从封装函数到实现简易版自用jQuery (二）

时间 2019-11-06

原文原文链接

回顾

上一篇文章从封装函数到实现简易版自用jQuery (一) 已经介绍了如何实现基本功能和封装成本身的库，这篇文章着重讲对本身 API 功能的拓展，使其更强大。node

如下是基于第一篇文章，在本次练习中要用到的代码，以 addClass( ) 为例进行拓展。bash

<ul>
  <li id="item1">item1</li>
  <li id="item2">item2</li>
  <li id="item3">item3</li>
  <li id="item4">item4</li>
  <li id="item5">item5</li>
</ul>

.red{
  color:red;
}

window.simpleTools = function(node){
  return{
    addClass:function(classes){
      classes.forEach((value) =>
                    node.classList.add(value));
    }
  };
};

复制代码

思考1: 若是传参是个选择器该怎么办？

解决方案：函数

加个类型判断来解决吧！为了让咱们的代码更加语义化，传来的参数由 node 更名为 nodeOrSelector，在函数内再定义一个 node 变量，若是传参是选择器，经过 document.querySelector() 来找到相应的节点，赋值给 node；若是传参不是选择器，直接赋值给 node 存起来。post

var node;
 if(typeof nodeOrSelector === 'string'){
    node = document.querySelector(nodeOrSelector);
 }else{
    node = nodeOrSelector;
 }
复制代码

测试运行：测试

var nodeTest = simpleTools('#item3');
nodeTest.addClass(['red']);
console.log(document.querySelectorAll('#item3'));
复制代码

思考2：若是传参是多个选择器该怎么办？

解决方案：优化

把 document.querySelector( ) 改为 document.querySelectorAll( ) , 此时变量 node 变成 nodes 对象。
遍历 nodes ，依次加上 red 效果

window.simpleTools = function(nodeOrSelector){
  var nodes = {};
  if(typeof nodeOrSelector === 'string'){
    nodes = document.querySelectorAll(nodeOrSelector);
  }else{
    nodes = nodeOrSelector;
  }
  return{
    addClass:function(classes){
      classes.forEach((value) =>{
      for(var i = 0;i < nodes.length;i++){
        nodes[i].classList.add(value);
      }
      });
    }
  };
};
复制代码

测试运行：ui

var nodeTest = simpleTools('ul>li');
nodeTest.addClass(['red']);
console.log(document.querySelectorAll('ul>li'))
复制代码

var nodeTest2 = simpleTools('#item3');
nodeTest2.addClass(['red']);
console.log(document.querySelectorAll('#item3'))
复制代码

思考3: 想要改变原型链怎么办？

如今的 nodes 是一个链接着 NodeList.prototype 的对象，个人原型链想直接是 Object.prototype，怎么办呢？spa

解决方案：prototype

借助一个临时变量，经过循环遍历获得一个纯净的对象。3d

window.simpleTools = function(nodeOrSelector){
  var nodes = {};
  if(typeof nodeOrSelector === 'string'){
    var temp = document.querySelectorAll(nodeOrSelector);
    for(var i =0 ;i<temp.length;i++){
      nodes[i] = temp[i];
    }
    nodes.length = temp.length;
  }else if(nodeOrSelector instanceof Node){
    nodes = {
      0 :nodeOrSelector,
      length :1
    };
  }
  return nodes; // 只看nodes的变化，暂时先忽略addClass( )方法
};
复制代码

若是是多个选择器，遍历并存储，不要忘记了nodes.length哦。若是是一个节点，也须要把 nodeOrSelector 构造出和上面分支同样的形式存到 node 对象中。如今不管是多个选择器仍是一个节点，都转化成了只连接 Object.prototype 的对象。

测试运行：

var nodeTest = simpleTools('#item3');
console.log(nodeTest);
复制代码

var nodeTest2 = simpleTools('ul>li');
console.log(nodeTest2);
复制代码

思考4: 设置文字怎么作？

若是是获取文字，那么把 nodes 中每一项的 textContent 存起来。

getText : function(){
    var texts = [];
    for(var i = 0; i < nodes.length;i++){
        texts.push(nodes[i].textContent);
    }
    return texts;
}
复制代码

若是是设置文字，经过遍历，将要设置的文字依次赋值给 textContent 。

setText : function(text){
    for(var i = 0; i < nodes.length;i++){
        nodes[i].textContent = text;
    }
    return text;
}
复制代码

测试运行：

var nodeTest = simpleTools('#item3');
nodeTest.setText('hello');
复制代码

代码优化：

不管是设置仍是获取，上面的代码看起来是那么相似，说明这就存在着优化的可能。咱们试图将这两个函数合并成为一个，若是你有参数传递，那么就说明你是须要设置文本，若是没有参数传入，那么就说明你是想获取文本。

text: function (text) {
    if (text == undefined) {
        var texts = [];
        for (var i = 0; i < nodes.length; i++) {
                texts.push(nodes[i].textContent);
            }
        return texts;
    }
    else {
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text;
        }
    }
}
复制代码

再给个 alias 吧

window.$ = function simpleTools(){...}
复制代码

使用全局变量 $ 就至关于在用 simpleTools。

tips: 若是某变量是由 jQuery 构造出来的，在变量前加上一个 $, 防止变量弄混。

eg：var $node = $(#item3)

关于 return 的两种形式

第一种

window.$ = function simpleTools(nodeOrSelector) {
    var nodes = {};
    if (typeof nodeOrSelector === 'string') {
        var temp = document.querySelectorAll(nodeOrSelector);
        for (var i = 0; i < temp.length; i++) {
            nodes[i] = temp[i];
        }
        nodes.length = temp.length;
    } else if (nodeOrSelector instanceof Node) {
        nodes = {
            0 : nodeOrSelector,
            length: 1
        };
    }

    return {
        addClass: function(classes) {
            classes.forEach((value) =>{
                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(value);
                }
            });
        },
        text: function(text) {
            if (text == undefined) {
                var texts = [];
                for (var i = 0; i < nodes.length; i++) {
                    texts.push(nodes[i].textContent);
                }
                return texts;
            } else {
                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].textContent = text;
                }
            }
        }

    };
};
复制代码

第二种

window.$ = function simpleTools(nodeOrSelector) {
    var nodes = {};
    if (typeof nodeOrSelector === 'string') {
        var temp = document.querySelectorAll(nodeOrSelector);
        for (var 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 (var i = 0; i < nodes.length; i++) {
                nodes[i].classList.add(value);
            }
        });
    };

    nodes.text = function(text) {
        if (text == undefined) {
            var texts = [];
            for (var i = 0; i < nodes.length; i++) {
                texts.push(nodes[i].textContent);
            }
            return texts;
        } else {
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].textContent = text;
            }
        }
    };
    return nodes;
};

复制代码

你喜欢哪一种就挑哪一种啦

小结

拓展了本身的addClass( )方法，不只能够传节点，还能够接收选择器。
进一步加深了对原型链的了解。

快动手试试写个本身的 API 吧！