jQuery的无new创建方法

一般我们去写一个框架,会采用什么样的设计呢?比如设计一个jQuery框架,一般我们会创建一个函数对象

functionjQuery(params){  //构造函数}

jQuery.prototype.init = function(params){

//初始化操作

}jQuery.prototype.html=function(html){

//实现类似设置innerHTML的操作

}varjq =newjQuery("#id");

jq.init();

jq.html("test");

我想这是我们最常见的使用方式,这种方式需要new一个新的实例,然后再进行初始化操作,然后才能继续操作,很显然这样会比较繁琐而且代码较多,而jQuery中的使用方法却非常简洁:

获取指定元素:$("#id")/$(".class")/$("body").html("test");

创建html片段$("

").html("test");

设置文档加载完成后的方法$(function(){XXX});

等等,为何jQuery的使用方法如此简单,这是因为jQuery设计的是一种无new的创建方法,这是jQuery独特的设计思路之一。

我们打开jQuery初始化的这块代码,发现基本结构是这样子的(提取主要框架部分源码):

(function( window, undefined ) {varjQuery =function( selector, context ) {returnnewjQuery.fn.init( selector, context, rootjQuery );

};

jQuery.fn= jQuery.prototype ={

constructor: jQuery,

init:function( selector, context, rootjQuery ) {

if ( !selector ) {

return this;

}

if ( typeof selector === "string" ) {

if ( match && (match[1] || !context) ) {

return this;

} else if ( !context || context.jquery ) {

return ( context || rootjQuery ).find( selector );

} else {

return this.constructor( context ).find( selector );

}

} else if ( selector.nodeType ) {

return this;

} else if ( jQuery.isFunction( selector ) ) {

return rootjQuery.ready( selector );

}

if ( selector.selector !== undefined ) {

this.selector = selector.selector;

this.context = selector.context;

}

return jQuery.makeArray( selector, this );

},

html:function(value){

//实现类似innerHTML操作

}    }    jQuery.fn.init.prototype= jQuery.fn;

})( window );

1. 首先把代码封装在一个匿名函数里面,防止污染全局环境,然后创建一个对象jQuery,这个对象接受两个参数selector,context,其中selector就是我们通常传入的 #id,.class等字符串,这个对象函数里面并没有做什么逻辑而是直接返回了一个原型上的init方法,然后把参数传了进去。

2. init方法接受了3个参数,然后在内部进行了各种判断,根据不同的场景,返回一个不同的实例对象,类似一个工厂方法。

3. 将jQuery.fn.init的原型挂载到jquery的原型上。

4. 将jQuery的constructor还原为jQuery

init方法的内部逻辑我们后面再看,首先看下为何jQuery要这样做?

首先jQuery在构造函数里面就执行了new方法并执行了init方法,将new和init两步直接合并成一步,而且自带new操作,不需要用户再去进行new的操作,但是为何要使用一个原型上的init方法,而不是在自身自己new出一个对象呢?

想象一下如果jQuery这样写

varjQuery =function( selector, context ) {

//做上面的各种场景判断returnnewjQuery( selector, context, rootjQuery );

}

这样写会存在一个问题,jQuery函数内部new一个新的jQuery,然后会一直这样new下去无限循环,陷入死循环。为了防止这种情况的出行,jQuery将这部分逻辑放在了原型中的一个init方法,由init方法来进行工厂方法的处理,return new jQuery.fn.init( selector, context, rootjQuery ),这样就避免了死循环的问题,而且实现了一步到位的初始化。

但是这样写还存在一个问题,init方法里面的return this是指向的jQuery的实例对象,那他将无法访问jQuery的原型对象,比如说jQuery.prototype.html方法,因为html的方法是jQuery.prototype上的所以init方法无法访问这个函数,为了解决这个问题,我们看到之前的源码有最后一行:

jQuery.fn.init.prototype = jQuery.fn;

其中jQuery.fn就是jQuery.prototpye,也就等价于

jQuery.prototpye.init.prototype = jQuery.prototpye;

这句话的意思是,把init的方法的原型改为指向jQuery的原型,这样new init的出来的实例对象也就等价于new jQuery的实例对象,所以也就可以访问jQuery的原型方法了。

jQuery.prototype.init和jQuery的原型指向的是同一个对象,这样不管是init还是jQuery去修改原型对象都是等价的,这样就实现了上面提到的问题。

最后,jQuery再把constructor还愿回来到jQuery,防止构造函数指向错误,引起调用问题,为何要这样处理呢?因为我们是把jQuery的prototype直接覆盖成了一个新的实例对象,所以jQuerty的constructor就变成了{}的构造函数Object,所以需要将constructor还原为真正的jQuery。

对比下两种原型改写方式:

//方式1

jQuery.prototype.html =function(value){}

//方式2jQuery.prototype={

html:function(value){}

}

两种方式看起来好像没啥区别,但其实区别很大,第一种是给jQuery的prototype新增一个方法,这种方式是不会影响jQuery的constructor,还是function jQuery(),

而第二种方式是直接覆盖了jQuery的prototype,这种情况下的constructor会被直接改写为{html:function(value)}这个实例对象的构造函数,也就是function Object()

所以需要重置一下jQuery的constructor

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容