jquery源码学习笔记三：jQuery工厂剖析

jquery源码学习笔记三：jQuery工厂剖析

​​jquery源码学习笔记二：jQuery工厂​​

​​jquery源码学习笔记一：总体结构​​

上两篇说过，query的核心是一个jQuery工厂。其代码如下

function( window, noGlobal ) { var jQuery = function( selector, context ) {//首先定义一个内部jQuery。注意，此jQuery只是一个工厂内部的变量，并非我们在外面引用的那个jQuery或$ return new jQuery.fn.init( selector, context ); }; /*然后，对这个内部jQuery对象进行各种增强、扩展*/ jQuery.fn = jQuery.prototype = { //... }; jQuery.extend = jQuery.fn.extend = function() { //... }; var init = jQuery.fn.init = function( selector, context, root ) { //... }; init.prototype = jQuery.fn; jQuery.extend({ //... }); jQuery.fn.extend({ //... }); if ( !noGlobal ) {//最后，将内部jQuery赋给了外部，即我们所熟知的那个“$” window.jQuery = window.$ = jQuery; } return

其实目前来讲，最难理解的就是这个：

var jQuery = function( selector, context ) return new

感觉怎么将孙子赋给了爷爷？究竟是先有鸡还是先有蛋的问题？

其实呢，应该是这么看：

//只是先定义了一个函数而已，还没有执行，无所谓先有鸡还是先有蛋var jQuery = function( selector, context ) { …… };

好吧，第二点疑惑，为啥要new jQuery.fn.init( selector, context );这么个实例赋给jQuery?

是因为，new给jQuery，这样调用jQuery的时候，就不用再new了，简洁一点。

function( window, noGlobal ) var jQuery = function( selector, context ) return new jQuery.fn.init( selector, context ); }; …… if ( !noGlobal ) { window.jQuery = window.$ = jQuery; } return

由上代码可知，jQuery 已经是一个 new 出来的对象。如此，我们在使用jQuery的时候，就没有new这一步了，直接就是$.或者$(““)这样来使用。

往下看，有：

jQuery.fn = jQuery.prototype = { //...

为啥这样写呢？有什么玄妙？或者纯粹就是为了装逼？还真是，将原型prototype赋给fn，就是一种简写，不用写成”prototype”这么长。

第四个疑惑：

... }; jQuery.extend = jQuery.fn.extend = function() { //... }; jQuery.extend({ //... }); jQuery.fn.extend({ //...

jQuery.extend和jQuery.fn.extend有啥不一样？

当然不一样了。jQuery.extend扩展（顾名思义）的是实例，而jQuery.fn.extend扩展的是原型。扩展实例，作用仅限于实例；扩展原型，却可以惠及所有实例。扩展原型，可以节省内存。慢着，jQuery不是只有一个实例吗？

不是的，

var jQuery = function( selector, context ) return new

jQuery随同参数不同，是有许多个实例的。比如，$(“div”) 和 $(“#div1”)是两个不同的实例。

疑惑五：

function( selector, context, root ) { //...

为什么要把jQuery的原型(jQuery.fn)覆盖它孙子(jQuery.fn.init)的原型？ 答曰，因为不这么写的话，jQuery将用不上jQuery.fn，一系列的原型扩展：jQuery.fn.extend()都白费了。为啥呢，因为

var jQuery = function( selector, context ) return new

意味着当这个函数真正被执行以后，jQuery将被它孙子的实例所替换，所以必须在定义阶段，就要将扩展应用到孙子的原型中。那么，为啥不直接扩展孙子的原型呢，非要扩展爷爷的原型，然后覆盖孙子的原型，再然后构造孙子实例赋给爷爷？真他妈绕啊。搞来搞去，可能就是为了简洁，和显得有点可读性吧？你看，孙子的名字叫做init。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。