自己封装一个简单的jQuery

jQuery优点

虽然jQuery已经渐渐的退出了历史舞台，但是现在市场上还有大量的网站使用该框架，因为它具有以下优点。

1. 轻量级：文件大小非常小，压缩包只有18k左右。
   2.强大的选择器：不仅支持css里所有选择器还有jQuery独有的选择器。
   3.DOM封装
   jQuery封装了大量常用DOM操作。
   4.兼容性：兼容性较好，可以在大部分常见的浏览器兼容。
   5.链式编程：对发生在同一个jQuery对象上进行一组动作。
   6.丰富的插件支持
   核心理念就是‘“write less,do more”

今天就自己试着还原一下jQuery。

封装一个简单的jQuery

封装函数前先需要明确功能需求，需要封装两个函数，第一个函数获取节点所有的兄弟节点。
第二个函数用来给上述获取到的节点增加class和css属性。

1.第一个函数

        function getSiblings(node){
            let allChildren = node.parentNode.allChildren
            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.第二个函数

        function addClass(node,classes){
            classes.forEach((value)=> node.classList.add(value))
        }
        // 遍历classes中的value，给节点增加所有classes中的value

3.命名空间

为了方便使用，需要给上面的函数增加命名空间

    var swDOM = {};
    swDOM.getSiblings(nodes);
    swDOM.addClass(node,['a','b','c'])
    //这样下次直接调用swDOM.xxx()就可以调用函数。

    //但是swDOM.xxx调用起来还是太复杂，就可以变成如下
    window.$ = swDOM

4.把node放到前面

为了让这两个函数看起来更像jQuery。我们需要把node放到addClass和getSibling前面。有两种方法：
（1）拓展node接口，在Node.prototype加上函数。

Node.prototype.addClass = function(classes){
  classes.forEach((value)=> node.classList.add(value))
}

这样就可以直接操作xxx.addClass(['a','b','c'])

(2)创造一个新的接口

 function Node2(node){
     return {
         element: node,
         getSiblings: function(){

         },
         addClass: function(){

         }
     }
 }
 let node =document.getElementById('x')
 let node2 = Node2(node)
 node2.getSiblings()
 node2.addClass()

最后，再在之前的基础上对代码进行修改，使之能获取文本。

    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.text = function(text) {
            if (text === undefined){
                var texts = [];
                for (let i = 0; i< nodes.length;i++){
                    texts.push(nodes[i].textContent)
                }
                return texts
            } else{
                for (let i=0;i<nodes.length;i++){
                    nodes[i].textContent = text
                }
            }
          }
          return nodes
}
var node2 = jQuery('ul>li');
node2.text('hi')

这样就可以将ul>li中所有文本改为hi。

这样一个简单的jQuery就完成啦