封装函数

尽管 DOM 提供了 API ，可是当我们使用 DOM API 的时候却不尽人意，它提供的功能实在是有限，并且有些方法还没有，所以我们先来封装两个函数。第一个函数作用是获取一个元素节点的所有兄弟，第二个函数作用是可以对一个节点添加或者删除 class 。

获取一个元素节点的所有兄弟

当调用 getSiblings 函数的时候只需要传入一个元素节点即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function getSiblings(node) {
        let allchild = node.parentNode.children
        let siblings = {
            length: 0
        }
        for (let i = 0, len = allchild.length; i < len; i++) {
            if (allchild[i] !== node) {
                siblings[siblings.length] = allchild[i]
                siblings.length += 1
            }
        }
        return siblings;
    }

操纵一个节点的 class 可以进行添加和删除

调用 operationClass 时，需要传入一个节点和一个 classes 对象operationClass( node, { className: true, className: false } )

1
2
3
4
5
6
 
function operationClass(node,classes){
        for(let key in classes){
            let method = classes[key] ? 'add' : 'remove'
            node.classList[method](key)
        }
    }

命名空间

利用命名空间，从而对上述两个函数进行优化
调用方法：
DOM.operationClass.call(undefined,node,{className:true,className:false})
console.log(DOM.getSiblings.call(undefined,node))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
let DOM = {}
    DOM.operationClass = (node,classes) => {
        for(let key in classes){
            let method = classes[key] ? 'add' : 'remove'
            node.classList[method](key)
        }
    }
    DOM.getSiblings = (node) => {
        let allchild = node.parentNode.children

        let siblings = {
            length: 0
        }

        for (let i = 0, len = allchild.length; i < len; i++) {
            if (allchild[i] !== node) {
                siblings[siblings.length] = allchild[i]
                siblings.length += 1
            }
        }
        return siblings;
    }

最终优化

方案一

在 Node.prototype 上添加方法，调用方法是：
node.operationClass.call(node,{className:true,className:false})
node.getSiblings.call(node)
缺点：改变了 Node.prototype

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
Node.prototype.operationClass = function(classes){
       for(let key in classes){
           let method = classes[key] ? 'add' : 'remove'
           this.classList[method](key)
       }
   }
   
   Node.prototype.getSiblings = function(){
       let allchild = this.parentNode.children
       let siblings = {
           length: 0
       }

       for (let i = 0, len = allchild.length; i < len; i++) {
           if (allchild[i] !== this) {
               siblings[siblings.length] = allchild[i]
               siblings.length += 1
           }
       }
       return siblings;
   }

方案二

创造一个新的接口，使用全局变量 otherNode ，无侵入式调用。
调用方法：

let node = otherNode.call(undefined,node)
node.operationClass.call(undefined,{red:true,blue:false})
node.getSiblings.call(undefined))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
window.otherNode = (node) => {
    return {
        operationClass: (classes) => {
            for (let key in classes) {
                let method = classes[key] ? 'add' : 'remove'
                node.classList[method](key)
            }
        },
        getSiblings : () => {
            let allchild = node.parentNode.children
            let siblings = {
                length: 0
            }

            for (let i = 0, len = allchild.length; i < len; i++) {
                if (allchild[i] !== node) {
                    siblings[siblings.length] = allchild[i]
                    siblings.length += 1
                }
            }
            return siblings;
        }
    }
}
方案二优化

优化方向：

  • 允许用户传入一个 CSS 选择器
  • 添加了操作文本的功能
    调用方法： 
    1
    2
    3
    		 
    let node = otherNode.call(undefined,'#id')
    node.getSiblings.call(undefined)
    node.operationClass.call(undefined,{red:true,blue:false})
    		 
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.otherNode = (nodeOrSelector) => {
        let node
        if(typeof nodeOrSelector === 'string'){
            node = document.querySelector(nodeOrSelector)
        }else{
            node = nodeOrSelector
        }
        return {
            operationClass: (classes) => {
                for (let key in classes) {
                    let method = classes[key] ? 'add' : 'remove'
                    node.classList[method](key)
                }
            },
            setText:(text) => {
                node.textContent = text;
            },
            getSiblings : () => {
                let allchild = node.parentNode.children
                let siblings = {
                    length: 0
                }

                for (let i = 0, len = allchild.length; i < len; i++) {
                    if (allchild[i] !== node) {
                        siblings[siblings.length] = allchild[i]
                        siblings.length += 1
                    }
                }
                return siblings;
            }
        }
    }
方案二再优化

优化方向：

  • 满足更多的 CSS 选择器，例如 ul > li
  • 简化了 text 功能，不传参数，就是获取，传参数就是设置
    使用方法： 
    1
    2
    3
    4
    5
    6
    7
    		 
    let node = otherNode.call(undefined, 'ul > li')
    node.text()
    node.text('hello world')
    node.operationClass.call(undefined, {
        className: false,
        className: true
    })
    		 
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
34
35
36
37
 
window.otherNode = (nodeOrSelector) => {
    let nodes = {}
    if (typeof nodeOrSelector === 'string') {
        let temp = document.querySelectorAll(nodeOrSelector)
        for (let i = 0, len = temp.length; i < len; i++) {
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    } else if (nodeOrSelector instanceof Node) {
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    nodes.operationClass = (classes) => {
        for (let key in classes) {
            let method = classes[key] ? 'add' : 'remove'
            for (let i = 0, len = nodes.length; i < len; i++) {
                nodes[i].classList[method](key)
            }
        }
    },
    nodes.text = (text) => {
        if (text === undefined) {
            let texts = []
            for (let i = 0, len = nodes.length; i < len; i++) {
                texts.push(nodes[i].textContent)
            }
            return texts
        } else {
            for (let i = 0, len = nodes.length; i < len; i++) {
                nodes[i].textContent = text;
            }
        }
    }
    return nodes
}

jQuery

jQuery 就是将 otherNode 更名为 jQuery，当然 jQuery 的兼容性更好、功能更加丰富（DOM 操作、动画、AJAX操作等等），并且它使用了 prototype 。