简述jQuery实现原理

---

背景介绍

jQuery可以说是流行最广，使用量最多的一个js库了。它极大的提高了人们工作的效率，解决了困扰人们很久的dom不一致性所带来的各种问题。jQuery最大的贡献就是在dom操作这方面，当然它还提供其他方面的操作。下面我们来通过一个小的例子简单介绍一下jQuery的实现原理。

内部结构

jQuery内部其实是一个伪数组对象，对象上还绑定一些自带的属性，比如说context,selector等。最重要的是jQuery的原型，接下来我们讲。

构造函数

把jQuery写成构造函数，把所有的共用属性写在JQuery.prototype上，方便每个示例的调用，也节省了大量的内存空间。如果是非构造函数形式调用，那么就new一个实例并返回。

  window.jQuery = function(nodes){
    //判断是否使用 new 关键字
    if(this instanceof jQuery){
      this.init(nodes);
    }else {
      return new jQuery(nodes);
    }
  };

获取节点

jQuery基于原生的Dom属性与方法封装了自己的选择器方法。通过选择器方法，可以把原生节点，选择器字符串转换为jQuery内部节点。然后对节点进行操作。由于选择器方法比较复杂，我们就用现有的document.querSelectorAll()来代替，实现的效果相同。在构造函数初始化的时候就去执行这个方法。

  //初始化函数，把nodes节点传给this
  jQuery.prototype.init = function(nodes){
    var _this = this;
    _this.length = 0;
    if(typeof nodes === 'string'){
      nodes = document.querySelectorAll(nodes);
    }
    for(var i=0;i<nodes.length;i++){
      _this[_this.length] = nodes[i];
      _this.length++;
    }
  };

addClass方法

jQuery有一个addClass方法，我们这里模拟一下。不过只是一个简易版，了解一下原理即可。首先遍历所有实例中的节点对象，然后每个执行dom原生提供的classList.add()。

  //添加class
  jQuery.prototype.addClass = function(className){
    var _this = this;
    for(var i = 0;i < _this.length;i++){
      _this[i].classList.add(className)
    }
  };

setText方法

setText方法和addClass方法原理类似，都要遍历实例中的节点对象，然后每个执行一遍dom提供的textContent的方法。

  //添加文字
  jQuery.prototype.setText = function(text){
    var _this = this;
    for(var i = 0;i < _this.length;i++){
      _this[i].textContent = text;
    }
  };

window.$

为了使用户用的方便，最好能像jQuery一样，直接使用$就可以，只需要设置window.$ = jQuery即可。刚刚已经讲过内部已经判断过是否是通过new 来构造实例的，如果不是，内部return new jQuery。

调用测试

通过以下代码调用，基本都实现功能。如果想要实现链式调用，直接在每个方法结尾return this即可。

    $('div').addClass('red');
    $('div').setText('h1');

总结

jQuery内部提供了大量的api,如果有兴趣，可以自己多实现一些方法。本文只是简单介绍一下实现原理与结构。本文内容仅供学习与交流使用，转载请注明出处。