实现一个简单的 jQuery 的 API

203 阅读1分钟

jQuery 就是将 DOM 对象重新包装成 jQuery 对象,这个 jQuery 对象中包含了许多 DOM 中不能轻松实现的方法(函数),可以省去很多复杂的代码。

在不使用 jQuery 函数库的情况下自制一个与 jQuery 同样原理的 API:

确认以下两个需求:

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

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

代码部分:

window.jQuery = function(x){
    let nodes 
    if(typeof x === 'string'){
        nodes = document.querySelectorAll(x)
    }else{
        nodes = {
            0 : x,
            length : 1
        }
    }
    // 以上相当于一个选择器,根据设置的参数 x 形成一个 nodes 对象
    
    nodes.addClass = function(className){
        for(var i=0; i<nodes.length; i++){
            nodes[i].classList.add(className)
        }
    }

    nodes.setText = function(someText){
        for(var i=0; i<nodes.length; i++){
            nodes[i].textContent = someText
        }
    }
    // 以上是为 nodes 对象添加两个方法
    
    return nodes    
    // 最终返回 nodes 对象,这时 DOM 对象就被包装成了 jQuery 对象
}

window.$ = jQuery

var $div = $('div')
1. $div.addClass('red')  // 可将所有 div 的 class 添加一个 red
2. $div.setText('hi')  // 可将所有 div 的 textContent 变为 hi
// 调用 nodes 对象中自定义的方法

这样两个 API 就可以实现这两个需求了。它们可以同时给一个或多个元素节点,添加 classtextContent