jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2017-01-18 17:03 我要评论( )

jquery源码学习笔记三:jQuery工厂剖析,上两篇说过,query的核心是一个jQuery工厂。其代码如下function(window,noGlobal){varjQuery=function(selector,context)

上两篇说过,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 jQuery; }

其实目前来讲,最难理解的就是这个:

var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); };

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

其实呢,应该是这么看:

//只是先定义了一个函数而已,还没有执行,无所谓先有鸡还是先有蛋 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; }

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

(“**”)这样来使用。

往下看,有:

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

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

第四个疑惑:

jQuery.fn = jQuery.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.fn.init( selector, context ); };

jQuery随同参数不同,是有许多个实例的。比如, ( " i v " ) 和

(“#div1”)是两个不同的实例。

疑惑五:

var init = jQuery.fn.init = function( selector, context, root ) { //... }; init.prototype = jQuery.fn; 为什么要把jQuery的原型(jQuery.fn)覆盖它孙子(jQuery.fn.init)的原型?
答曰,因为不这么写的话,jQuery将用不上jQuery.fn,一系列的原型扩展:jQuery.fn.extend()都白费了。为啥呢,因为 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); };

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery实现字符串全部替换的方法

    jQuery实现字符串全部替换的方法

    2016-12-15 13:07

  • jQuery 3.0 升级指南

    jQuery 3.0 升级指南

    2016-11-08 16:00

  • 四个步骤,学习jQuery

    四个步骤,学习jQuery

    2016-09-12 16:02

  • JavaScript的jQuery库中ready方法的学习教程

    JavaScript的jQuery库中ready方法的学习教程

    2016-06-17 10:00

网友点评