来学着写本身的“jQuery”

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操做

jQuery是开源软件，使用MIT许可证受权。jQuery的语法设计使得许多操做变得容易，如操做文档对象（document）、选择文档对象模型（DOM）元素、建立动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上建立插件的能力。这使开发人员能够对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库可以建立功能强大的动态网页以及网络应用程序

实际上jQuery能够看作将原生JavaScript库组合优化，经过调用不一样的原生API进行二次开发，以实现比原生JavaScript的API更为简单、强大的功能。若是jQuery的功能没攘括你的需求，那么你能够本身写个jQuery的函数来知足本身的需求哦，下面来学习下如何封装一个“jQuery”函数

1 怎样封装函数才好

当咱们须要本身封装一个函数时，能够直接将函数写进Node.prototype里面，也能够从新建立一个新的接口，那么这二者有什么区别呢？

• 方法一：拓展Node接口 能够直接在Node.prototype上加咱们所须要的函数，可是这种方法有个缺点，若是咱们的函数名已经在Node库里面存在了，那么新函数就会覆盖已经存在的函数，会致使已有函数失效，这显然不是咱们乐意看到的

• 方法二：写个新的接口 从新建立一个接口，在新的接口里面写函数，这种方法既不会覆盖已有函数，又能够知足咱们的需求，因此咱们采起这种方式来封装函数

2 来写一个jQuery

2.1 选择器

当咱们传入一个筛选条件时，咱们但愿能获取知足筛选条件的全部节点，这里要分状况来讨论了

若是筛选条件是一个节点，那么直接返回这个节点便可
若是筛选条件是一个字符串，那么就调用JavaScript的选择器，筛选全部符合字符串的节点

这里有小细节要处理一下，经过JavaScript选择器获取的是一个由符合条件的节点组成的伪数组，里面不只包含了节点信息，还有一些其余内容
且筛选条件是一个节点的话，那么返回的就不是个伪数组了
为了保证结果的统一性，须要将伪数组里面的其余信息清除，若是结果不是伪数组，就将它变成一个伪数组

代码实现以下

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
    };
  }
复制代码

2.2 写一个addClass()函数

addClass()函数的用途是将所选择的元素的class属性增长新内容

那么遍历所选择的元素，经过原生JavaScript里面的classList.add()函数便可是实现 代码实现以下

nodes.addClass = function(classes){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].classList.add(classes);
      }
  };
复制代码

2.3 再写一个setText()函数

咱们经过setText()函数须要实现将元素的textContent内容改写成指定内容

一样的思路，遍历元素，逐个将textContent改写

代码实现以下

nodes.setText = function(texts){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = texts;
      }
  };  
复制代码

2.4 组合一下吧

各个部分完成以后，就能够将其组合封装成jQuery函数了

代码以下

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
    };
  }
  //增长class属性函数
  nodes.addClass = function(classes){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].classList.add(classes);
      }
  };
  //改写textContent内容函数
  nodes.setText = function(texts){
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = texts;
      }
  };  
  //返回操做以后的内容
  return nodes;
}
复制代码

3 总结

jQuery没想象中的那么高不可攀，经过封装函数，咱们也能够写一个本身的“jQuery”来实现咱们本身需求