JS封装jquery库

发表于 | 更新于

jquery

拼多多面试题,当时完全不会写,所以赶紧回来补补课.

实现目标

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

第一步:创建构造函数

1
2
3
4
5
6
window.jQuery = function(nodeOrSelector) {     
    let nodes ={}   // 定义一个对象            
    nodes.addClass = function() {}  // 给对象添加方法
    nodes.setText = function() {}
    return nodes    // 返回这个对象
}

然后应该为了判断jQuery接受的参数到底是node还是selector，应该在函数开始做一个判断，并且最后返回的对象会是一个伪数组。

第二步:判断传入参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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                // 因为这个对象是伪数组，也给它加个length                   
    } else if(nodeOrSelector instanceof Node) {   // 判断是否节点
        nodes = {                                 // 为了配合上面 ,这里也做一个伪数组    
            0: nodeOrSelector,
            length: 1
        }
    }
    nodes.addClass = function() {}
    nodes.setText = function() {}
    return nodes
}

第三步:添加方法

1
2
3
4
5
6
7
8
9
10
11
12
nodes.addClass = function(classes) {                 // 接受一个或者多个 class
       classes.forEach(value => {                       // 遍历 classes 的 value，并作为参数进行下面的 for 循环
           for (let i = 0; i < nodes.length; i++) {     // 遍历 nodes
               nodes[i].classList.add(value)            // 给nodes里的每一元素都加上 class   
           }
       })
   }
   nodes.setText = function(text) {                    // 接受一个 text
       for (let i = 0; i < nodes.length; i++) {        // 遍历 nodes
           nodes[i].textContent = text                 // 每一个的文本都赋值为 text
       }
   }

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

参考

https://zhuanlan.zhihu.com/p/50521880