JQuery初探------Api功能实现

1、封装
获取当前元素的兄弟元素

          /*1. 获取当前元素的所有兄弟元素 */
          window.customDom = {}
          customDOM.getAllSiblings = function (node) {
          let allChildren = node.parentNode.children
          let array = {length: 0}
          for (let i = 0; i < allChildren.length; i++) {
              if (allChildren[i] !== node) {
                  array[array.length] = allChildren[i]
                         array.length++
             }
           }
              return array
          }
          /*2. 一次性添加多个class*/
          /*通过遍历数组来添加多个class*/
           customDOM.addClass = function (node, class) {
              for (let key in class) {
                  let value = class[key]
                  let method = value ? 'add' : 'remove'
                     node.classList[method](key)
                       }
            }

           /*增加命名空间*/
           window.customDOM = {}
           customDOM.getAllSiblings = getAllSiblings()
           customDOM.addClass = addClass()

上面代码我们根据提供的node节点获取父节点的所有子节点，然后遍历这个子节点形成一个新的伪数组，就可以获得操作节点的所有兄弟元素。然后操作获取的伪数组来进行批量添加class，经过封装后我们可以通过调用函数的方式实现这个功能，调用方法如下：

         customDom.getAllSiblings(item3)

但对于我们来说经常使用的调用方法是下面这种：

         item3.getAllSiblings(item3)

若要实现下面这种更为合理的调用方式我们可以将该功能直接写入Node的共用属性里：

         /*1. 获取当前元素的所有兄弟元素 */
         Node.prototype.getAllSiblings = function () {
         let allChildren = this.parentNode.children
         let array = {length: 0}
              for (let i = 0; i < allChildren.length; i++) {
                   if (allChildren[i] !== this) {
                       array[array.length] = allChildren[i]
                            array.length++
                         }
                }
           return array
          }

        /*2. 一次性添加多个class*/
        /*通过遍历数组来添加多个class*/
        Node.prototype.addClass = function (class) {
            for (let key in class) {
               let value = class[key]
               let method = value ? 'add' : 'remove'
                     this.classList[method](key)
               }
         }
        item3.addClass({a: true, b: false, c:true)
        //item3.addClass.call(item3, {a: true, b: false, c:true})

这里的this就是方法被调用时前面的对象。
通过上面代码将函数功能写入共用属性我们就可以直接通过API的形式直接调用。
但是，我们直接更改共用属性的函数可能会被别人更改或者覆盖掉，我们可以这样做：

       window.Node2 = function (node) {
       return {
        /*1. 获取当前元素的所有兄弟元素 */
          getAllSiblings: function () {
          let allChildren = node.parentNode.children
          let array = {length: 0}
               for (let i = 0; i < allChildren.length; i++) {
                    if (allChildren[i] !== node) {
                         array[array.length] = allChildren[i]
                              array.length++
                          }
                    }
               return array
           },
            /*2. 一次性添加多个class*/
            addClass: function (class){
                for (let key in class) {
                    let value = class[key]
                    let method = value ? 'add' : 'remove'
                          node.classList[method](key)
                                }
                      }
                }
             }

           let node2 = Node2(item3)
           node2.getAllSiblings()
           node2.addClass({a: true, b: false, c: true})

这里Node2是一个函数，我们想获得方法就变成了Node2函数的返回值，调用时的参数item3在Node2中已经传了。这种调用方法更简洁。如果我们把Node2的名字改为：jquery。由此我们可以看出：jQuery()实际上是一个构造函数，它接收一个参数，这个参数可以是一个节点或选择器（用来选择某个元素或节点），然后返回一个方法对象去操作节点。（对其进行某种操作）。