jQuery 的 API

作者: 本来无一物_f1f2 | 来源:发表于2019-01-06 17:10 被阅读0次

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</body>
</html>

js部分

window.jQuery = function(nodeOrselector) {
    let nodes = {}
    if(typeof nodeOrselector==='string'){
        let temp= document.querySelectorAll(nodeOrselector)
        for(let i=0;i <temp.length;i++){
        nodes[i] = temp[i]
        }
        nodes.length=temp.length
    }else if(nodeOrselector instanceof Node){
        nodes = {0:nodeOrselector,length:1}
    }
    nodes.addclass=function(classes){
        classes.forEach((value)=>{
        for(let i=0; i<nodes.length; i++){
            nodes[i].classList.add(value)
        }
    })
    }
    nodes.Text =function(){
        if(text === undefined){
            var texts=[]
            for(let i= 0;i<nodes.length; i++){
                texts.push(nodes[i].textContent)
            }
            return texts    
        }else{
            for(let i=0; i<nodes.lenght; i++){
                nodes[i].textContent=text
            }
        }
    }
        return nodes
}


window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

html 就是加了几个div，没什么好说的。
js代码分为两部分，第一部分是封装jQuery的API过程。第二部分是使用jQuery的API
简单说，封装jQuery的API就是个把一堆代码封装成函数的过程，这个跟普通封装函数没有什么区别。这部分分为3步：

1 获取并重构nodes对象，也是个伪数组，有length。注意先要初始化nodes，即 let nodes = {};,然后我们在获取nodes对象的成员时，使用了DOM的API - querySelectorAll。
2.1给对象nodes添加方法addClass（函数属性）,说白了就是nodes本来就是个对象，给对象加个（key）属性addClass，属性值(value)是个函数，这样我们在使用属性就能调用这个函数。在编写addClass这个函数我们用到了数组属性forEach，一定要记得传数组参数。还用到了箭头函数以及DOM的API - ndoe.classList.add。
2.2 同理，给对象nodes添加方法setText（函数属性），这个函数也用了DOM的API - node.textContent。
3 return nodes,一定要记得返回值，函数一定要有返回值，不然就给你 return undefined。

第二部分，jQuery的API使用。

window. $= jQuery,那么$ 就是jQuery这个函数，可以少写单词。
var $div =$ ('div'),此时 $div就是nodes对象,这样我们就通过标签名获得了一组同名标签对象。建议在声明jQuery对象时在变量名前加$ ，这样就能清楚地知道这是jQuery的对象，要使用jQuery的API,而不是使用DOM的API。
$div.addClass(['red'])，这句话就是$ div这个对象调用了它的属性函数addClass，同时传了一个数组参数['red']，注意必须是数组，因为我们用了forEach。这里还要注意一点是 $div实际上也被传入到这个属性函数addClass里面了，这是不同于以前我学C语言。因为$ div.addClass(['red'])实际上是 $div.addClass.call($ div,['red'])的简写，后者是js函数调用的规范版。.前面的东西也是作为参数传入到函数里面的。
$div.setText('hi')，也是同上的原理，$ div调用了它的属性函数setText，实际传入了两个参数$div和'hi'。