模仿jQuery实现一个API

---

title: 模仿jQuery实现一个API
date: 2018-09-29 16:46:48
tags: [JavaScript]
categories: JavaScript

---

如何模仿jQuery实现一个API？

jQuery是一个 JavaScript 库，核心理念是 - write less, do more。
其实jQuery就是一个函数，里面封装了很多方法，我们通过这些方法来获取节点(元素)并进行操作，大大方便了我们的编程。

• 那么关于下面的代码，如何实现类似jQuery提供的api呢？

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass(['red','blue']) // 可将所有 div 的 class 添加 red 和 blue  注意这里是数组的写法
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

1. 首先获取对象

window.jQuery = function(nodeOrSelector){
    let nodes = {}  //初始化对象
    //判断用户想获取一个还是多个节点
    if(typeof nodeOrSelector === 'string'){     //多个节点
        let temp = document.querySelectorAll(nodeOrSelector)   // 伪数组
        //遍历临时对象temp，将它的值放入nodes内，得到一个纯净的伪数组，原型链指向Object
        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
        }
    }
    return nodes  //返回nodes
}

2. 添加addClass方法

nodes.addClass = function(classes){
    // 用户在addClass中输入的是数组所以用forEach
    classes.forEach((value) =>{
        //遍历nodes，为nodes内每一个元素节点添加class
        for(let i = 0 ; i<nodes.length; i++){
            nodes[i] .classList.add(value)
        }
    })
}

3. 添加setText方法

nodes.setText = function(text){
    //遍历nodes，为nodes内每一个元素节点的textContent添加text
    for(let i=0;i<nodes.length;i++){
        nodes[i].textContent = text
    }
}

4. 完整代码

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.setText = function(text){
        for(let i=0;i<nodes.length;i++){
            nodes[i].textContent = text
        }
    }

    return nodes
}
window.$ = jQuery

var $div = $('div')
$div.addClass(['red','blue']) // 可将所有 div 的 class 添加 red 和 blue
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

完成，另外以上代码还使用到了JS的闭包。