jQuery-v2.0.3源码浅析01-链式操作

前言

最近在学习jQuery源码过程中发现jQuery之前能这么火还是有原因的，源码中还是存在很多值得学习和借鉴的技巧。为了加深记忆在此记录一下学习到的一些内容。
首先从神奇的链式写法开始吧，相信大家很多时候会这样使用jQuery

$('div').css('color', 'red').css('height', '100px').html('测试').**();

不少人会疑惑jQuery是如何实现链式操作的。

源码

/**源码61行**/
jQuery = function( selector, context ) {
  // The jQuery object is actually just the init constructor 'enhanced'
  return new jQuery.fn.init( selector, context, rootjQuery );
},
/**源码96行**/
jQuery.fn = jQuery.prototype = {
  // The current version of jQuery being used
  *****
  init: function( selector, context, rootjQuery ) {
    ******
  }
}
/**源码283行**/
jQuery.fn.init.prototype = jQuery.fn;
/**源码8825行**/
if ( typeof window === "object" && typeof window.document === "object" ) {
    window.jQuery = window.$ = jQuery;
}

总结

通过以上代码可以发现
1、$等于jQuery 是一个构造函数
2、jQuery.fn 其实就是 jQuery.prototype
3、jQuery.fn.init.prototype = jQuery.prototype.init.prototype = jQuery.fn = jQuery.prototype

所以在大家使用$()的时候其实jQuery内部 使用 new jQuery.fn.init() 返回了一个实例对象。所以我们在使用jQuery的时候不需要自己去使用new方法去生成一个新的实例。

看到这里大家是不是觉得jQuery写的确实很精妙。

看到这一步大家可以看到$()其实最终返回了一个实例对象，那我们前面事例代码中

$('div').css('color', 'red').css('height', '100px').html('测试');

使用的css和html方法是不是只要挂载到jQuery的原型下就能获取了。
jQuery代码中其实就是这样实现的。
接着往下看当我们调用css方法的时候，是通过$(**)生成的实例去调用的，所以最终css方法内部的this就指向了这个实例，我们在操作完对应的操作然后最终通过return this 是不是又返回了这个实例对象，这样我们就实现链式写法了。
类似这样

jQuery.fn.css = function(){
  //其他操作
  return this;
}
jQuery.fn.html = function(){
  //其他操作
  return this;
}
***