jQuery源码骨架浅析

题外话：

           看源码的工具：lambda-view【基于nodejs环境】。我感觉之所以好用是因为可以直接在浏览器看源码结构

           本次参考的jQuery源码版本是 3.2.1

大纲：

               1、jq简单用法

               2、jq基本骨架 

               3、jq扩展插件的两种方式

               4、jq里的小方法大智慧

一、jq的简单使用

$(".foo").addClass("active");

var arr= [1,2,3]; $.isArray(arr) ; // true

有两种使用方式：一个是$()之后去调用了方法；一个是$直接去调用了方法(相当于jq的工具方法)。

很显然，$()是拿到了一个jquery对象的实例。

二、jq的基本骨架

 1、上图：

jquery就是一个闭包，然后把window和一个函数传进去。

参数作用：

           window：①、判断window是否存在。②、减少原型链的查找，提高性能。③、利于后期压缩

           function：好处有哪些，现在还不知道，以后补上

2、这个参数function是在闭包里被调用的，

factory(global);  // 把window传进去

在这个factory方法里，先是声明了一系列变量。接着是声明了一个jQuery变量。

给jQuery的原型赋值，

总结

````

(function(window, undefined){

            var jQuery = funciton(selector, root){

                  return new jQuery.fn.init(selector, root)

           }

          jQuery.fn.init = function(selector, root){

                  ......  // 这里相当于程序的分发中转站，判断是选择器还是要生成html标签代码

                 return jQuery.makeArray(selector,this); // 这里返回的数据转为一个数组，一般使用选择器，比如是class时，返回的数据是一个数组无可厚非；但是选择一个 id 时，返回的数据也是一个数组对象，只不过这个数组length为1

         }

         jQuery.fn.extend({  // jQuery中，好多属性和方法都是通过extend方法为jq添加属性和方法的，稍后会看下extend方法的源码

             addClass: function(){

                     .....

                    return this; // 把当前对象返回，就可以链式调用。

              }

          window.jQuery = window.$ = jQuery; // 把jquery和$挂载到window上（全局变量）

       })

})(window)

````

还有在看源码的时候会看到好多与核心逻辑没关系的代码，这都些判断，为了代码能够安全执行。

上面代码可以看到整个jQuery库就是一个闭包，闭包的好处请另行百度，然后把$ 和 jquery 对象挂载到window上，以便外部能够访问到。一般我们调用 $("#foo") 就是调用了 jQuery的init方法，然后init里判断，如果匹配到是选择器，就调选择器相应的方法；如果是<>开头和结尾的，就生成html标签；如果是一个function对象，就调用  root.ready 方法，判断页面加载完后执行里面的函数；

最开始jQuery.prototype（关于原型，请看另一篇文章）下的方法没那么多，都是后来通过 extend 方法不断的往 prototype 里面添加方法和功能的。

直接把方法挂载到了jquery($)对象上

开头用到的isArray()方法就是在这里加载到 $ 对象上的

还有另一种方式

这个是把方法加载到了jQuery的原型里面，我们都知道，原型里的方法都是通过new出来的对象才能访问。

所以我们一般这样用：$("nav").find("a")；找nav下的所有a标签

既然这个extend这么强大，那我们看下extend都做了什么

这是extend代码位置，$可以直接调用，$()也可以直接调用

进入到方法里面，会看到一系列变量和一系列判断，其他的我们不管，直奔主题

for循环，遍历属性，把每个属性取出来，然后赋值给参数列表的第一个对象。

这里还有一个深拷贝浅拷贝的问题

$.extend(true, obj1, obj2) 如果参数列表第一个值为boolean，则为深拷贝；如果没有就是浅拷贝。深拷贝原理也挺简单的，就是利用递归，当拷贝到当前属性时，检测到该属性类型为对象（object）则再次调用自身。

三、jq扩展插件的两种方式：

扩展插件就是上面说到的，使用extend方法。

如果是给 $ 对象增加方法，可以这样

$.extend({

            foo: function(){ }

})

这样使用：$.foo();

如果是给 $ 对象实例添加方法，可以这样

$.fn.extend({

             foo: function(){}

})

这样使用：$(".add").foo()

再说一次：fn.extend()是把对象给了jQuery.prototype的，所以要通过new出来的实例才能访问

extend之所以能够扩展是因为它把我们写的对象（foo方法）拷贝给了jQuery($)或jQuery的prototype

另外附上以前写的jQuery小插件，关于form表单数据回显的：zzhFormTool

四、jq里的小方法大智慧（这个标题有点.....）

             1、jQuery的无new构造

一般使用一个对象时，看到它上面挂载了很多prototype方法，就得先new出一个实例对象，然后才能访问这个方法，但是在使用jQuery的时候，一般是这样 $("#nav"),选择器，找到这个dom对象，然后做操作，没有new出现。

那jQuery是怎么做的呢？

在调用$("#foo") 的时候，返回的是 return new jQuery.fn.init(selector,context);这个很关键。首先，init方法是挂载到prototype上的，在new的时候，去prototype(fn)上找；这个没什么问题，无非是调用了一个方法（这个方法在prototype），返回了一个对象实例；那么问题来了，这个对象实例只能访问 init 方法自身，以及它的原型（__proto__）上挂载的方法；在本文的第二部基本骨架中说了，jQuery是一直往prototype上加方法，丰富其功能，init 实例出的对象根本访问不到的。所以jQuery的精妙之笔来了，让init的prototype指向jQuery的prototype，这样jQuery身上有的方法，init也有，并且实例对象也能访问到。

具体源码如下图。

未完待续......