JavaScript 原型的实际应用之实现一个 jQuery

我们平时使用jQuery大概是这样：

let $p = $('p');
$p.css('fontSize', '40px');

我们生成jQuery实例对象后，就可以使用原型上的css(), html()等方法，这就体现了原型继承：由构造函数生成的实例对象，可以继承构造函数的原型对象上的属性和方法。

我们可以试着手写一个迷你的jQuery，思路大概是这样：

1-通过匿名自执行函数来存放我们的代码，将window对象作为参数传入，防止全局作用域的污染。

2-利用工厂函数，在调用jQuery或者$的时候，返回构造函数的实例对象

3-构造函数定义为jQuery.fn.init，初始化时处理dom元素，将dom元素绑定在实例对象上

4-将构造函数的prototype属性指向jQuery.fn，此时构造函数的实例便可以继承jQuery.fn里的属性和方法

5-jQuery.fn是一个对象，里面存放了所有的jQuery方法，让外部来调用

代码实现：

完整代码请查看 my-jquery

// my-jquery.js
(function(window) {
  var jQuery = function (selector) {
    // 通过new关键字，找到构造函数
    return new jQuery.fn.init(selector);
  };
  // 初始化 jQuery.fn
  jQuery.fn = jQuery.prototype =  {
    constructor: jQuery,
    css: function(key, value) {
      let that = this;
      for (var i = 0; i < that.length; i++) {
        that[i].style[key] = value;
      }
    },
    html: function (value) {
      return this[0].innerHTML;
    },
  };
  // 定义构造函数
  var init = jQuery.fn.init = function(selector) {
    var slice = Array.prototype.slice;
    var dom = slice.call(document.querySelectorAll(selector));
    var i,
      len = dom ? dom.length : 0;
    for (i = 0; i < len; i++) {
      this[i] = dom[i];
    }
    this.length = len;
    this.selector = selector || '';
  };
  // 定义原型
  init.prototype = jQuery.fn;
  window.$ = jQuery;
})(window);

这里有个问题：这里为什么不直接把init.prototype赋值为一个对象，而是要通过jQuery.fn做中转呢？

jQuery.fn = {...};
init.prototype = jQuery.fn;

这就体现了原型的扩展性，jQuery.fn | $.fn 是用来扩展插件用的，将插件扩展统一到$.fn.xxx 这一个接口，也是符合对修改封闭，对扩展开放的原则。

下面我们来写一个简单的jQuery插件。

$.fn.getNodeName = function () {
    return this[0].nodeName;
}
// 测试
alert($box.getNodeName()); // DIV

小结：

本篇文章总结了以下几个问题

• jQuery是如何使用原型的？
• 如何实现一个小型的jQuery？
• jQuery的插件扩展机制