jQuery源码分析

2016-11-21 本文已影响47人 coolheadedY

jQuery方法的调用方式：

//一般是这两种
$('div').html();
$.ajax();

从jQuery的使用方法来猜测它的编写方式。

jQuery插件方式如何编写？
第一步：搭Query插件框架，找到我们的目的。

思路：通过立即执行函数内生成Query的构造函数然后赋值给我们的全局对象内，然后在全局对象下使用$或yQuery绑定原生dom对象，这样我们通过yQuery绑定的原生dom对象都能使用yQuery.prototype下的方法。
注：不直接在全局对象下创建yQuery对象是为了防止压缩代码时重命名window导致错误。

现象：现在我们在浏览器下验证真有$这个函数，并且可以通过构造函数传递原生对象。但写法不是$('div')。
第二步：试试return，我们需要在全局下直接返回一个对象

思路：我们需要直接返回一个对象，试着在yQuery里return一下看看结果。
现象：真的在全局下返回了一个对象,还调用到了我们想要的方法，但是我们只是返回了yQuery.prototype。

yQuery.prototype是一个公共区域，绑定任何元素dom对象返回的都是同样一个东西，离结果很远。
第三步：这次我们不返回公共区域，返回公共区域下的对象

思路：得到了个对象，但没返回值，试试this。
第四步：加上this看看

思路：试一下this看看返回了什么，this返回的是函数的调用者。

现象：结果很眼熟，好像就是yQuery.prototype，和第二步的结果一样。。但我们好像更接近了目标。
第五步：this返回的是函数的调用者，但this在构造函数里返回的是一个实例
思路：我们想做的应该是后者,这样我们每次绑定原生dom的时候返回的都是一个实例，他们相互独立但又使用prototype下的公共区域。

现象：这一步不仅加了new，还加了红框里的两句话，我们需要一张图来解释

看上图前我们先了解下我们的目的有两个：1创建各不相同的实例对象（完成）2使用我们yQuery.prototype下的公共方法。
解释：通过原型链和继承的知识我们知道我们新创建的这个实例对象的__prto__指向的是他的构造函数下的prototype，也就是yQuery.prototype.init.prototype,是一个null的空对象。而我们需要的方法在yQuery.prototype，那么我们通过yQuery.prototype.init.prototype = yQuery.prototype使我们新创建的实例对象可以拥有yQuery.prototype下的方法。并且为了内部正确我们constructor: yQuery让它指向正确。
constructor: yQuery
yQuery.prototype.init.prototype = yQuery.prototype;
jQuery插件的方法是如何实现的？
通过上面的步骤我们完成了jQuery插件核心的构成，但jQuery有两种使用方法$('div').addClass()和$.ajax()，这两类方法分布的位置是不一样的

$('div').addClass()类型方法处于的位置
$.ajax()类型方法处于的位置

实现：在内部定义一个extend方法，作用是确定对象是否存在，如果不存在就存入extend方法的调用者。这样我们就只需要在yQuery.prototype里留下初始的构造函数，公共方法都放在yQuery.prototype.extend里面

函数里的this表示调用者，不要想不通- -

jQuery如何与其他插件防止冲突？
方法一：jQuery.noConflict();然后就不用$
方法二：把jQuery传递到函数内使用$
方法二
noConflict()的原理：这里的_$是个临时变量并且为undefined，当执行时window下的$就被赋值为undefined了，window下就jQuery的$就失效了
noConflict()源码

jQuery链式调用是什么？是如何实现的？
链式调用：$('div').addClass().html()，原理很简单，就是在我们的方法的最后return this。这里的this是调用此方法的对象$('div').addClass()，addClass()里return this出了$('div')对象，然后继续调用html()方法。
return this 返回了调用此方法的对象
本博客版权归本人和饥人谷所有，转载需说明来源

jQuery源码分析

猜你喜欢

热点阅读