jQuery源码解读-理解架构

1、jQuery设计理念

正如jQuery的标题:The Write Less,Do More,无疑这就是jQuery的核心理念,这里面让人激动的设计有简洁的API、优雅的链式、强大的查询与便捷的操作。
简洁的API

$.on
$.css
$.ajax
….

优雅的链式

var  xhr = $.ajax( "./example.php" )
    .done(function() { alert("success"); })
    .fail(function() { alert("error"); })

类CSS的选择器

$("div, span, p.myClass" )
$("div span:first-child")
...

便捷的操作

$("p").removeClass("myClass noClass").addClass("yourClass");
$("ul li:last").addClass(function(index) {
   return "item-" + index;
});
$('.container').append($('h2'));
…

2、立即调用表达式

任何库或者框架设计的第一个需要考虑的点就是解决命名空间和全局变量污染的问题,jQuery利用了JavaScript函数作用域的特性,采用立即执行函数包裹了自身的方法来解决这个问题。建议在下面的阅读前,如果对立即执行函数不是很理解的小伙伴们,先阅读下我写的另一篇文章:JavasSript-立即执行函数

jQuery的立即调用函数表达式的写法吧
one

(function(window, factory) {
    factory(window)
}(this, function() {
    return function() {
       //jQuery的调用
    }
}))

相必很多同学看到这里,和我当时一样都很懵逼吧,其实不用着急,对于复杂的代码我们学会将其拆分为我们熟悉的知识结构,然后简化它就好了。这里我们可以开始剖解它

//相信这样大家很容易理解,对啊就是一个简单的匿名函数执行函数的两种写法
(function() {
    /*code*/
})()
or
(function() {
    /*code*/
}())

下面我们再看一个传参的立即执行函数

(function(a,b) {
    /*code*/
}(c,d))

我们知道在javascript中函数作为一等公民,我们可以将一个函数作为参数传入另一个函数中

//这里的factory是一个形参函数
(function(window, factory) {
    factory(window)
}(this, function() {    
    return function() {
       //jQuery的调用
    }
}))
//整个这样一段就是给上面的匿名函数传入第一个实参this,第二个实参一个function,并立即执行
(this, function() {    
    return function() {
       //jQuery的调用
    }
})

相比上面的经过简化分析后,大家都应该看的懂,那么想必大家肯定有一个疑问为什么要搞得怎么复杂,其实我前面已经说过了任何库或者框架设计的第一个需要考虑的点就是解决命名空间和全局变量污染的问题,下面我们接着看第二种简单点的写法

two

var factory = function(){
    return function(){
        //执行方法
    }
}
var jQuery = factory();

其实上面的代码效果和第一种写法是等同的,纳尼?想必写道这里很多人会说那你前面搞的那么复杂干嘛,故作高深的装逼,哈哈,请接着看。
上面的factory函数有点变成了简单的工厂方法模式,需要自己调用,当时我们需要的是一个“自执行”的啊,并不是另外调用的,而且上面的写法虽然简单,却很容易造成全局变量的污染,这是一种魔鬼。这里顺便安利一下《JavaScript语言精粹》这本书哈,这本书将告诉那些是JS中优雅的特性和尽量避免使用的特性。

下面我们再看一下最后一种写法吧
three

(function(window, undefined) {
    var jQuery = function() {}
    // ...
    window.jQuery = window.$ = jQuery;
})(window);

从上面的代码可看出,自动初始化这个函数,让其只构建一次。详细说一下这种写法的优势:

  • window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后,在闭包内部使用它的时候,可以把它当成一个局部变量,显然比原先在window scope下查找的时候要快一些
  • undefined也是同样的道理,其实这个undefined并不是JavaScript数据类型的undefined,而是一个普普通通的变量名。只是因为没给它传递值,它的值就是undefined,undefined并不是JavaScript的保留字。

可能会有疑问,为什么要传递一个undefined啊?这里我们可以这样理解:Javascript 中的 undefined 并不是作为关键字,因此可以允许用户对其赋值 ,简单点就是如果函数调用不传递,参数默认就是undefined

最后总结一下jQuery为什么要创建这样的一个外层包裹,其原理又是如何?

  • 首先我们分析下写法2,其实这就可以理解为一个简单的工厂函数啊,我们可以在下面执行n次调用。
  • 那么写法3,首先我们这里需要区分2个概念一个是匿名函数,一个是自执行。顾名思义,匿名函数,就是没有函数名的函数,也就是不存在外部引用了。这样匿名函数可以有效的保证在页面上写入JavaScript,而不会造成全局变量的污染,之后通过小括号,让其加载的时候立即初始化,这样就形成了一个单例模式的效果从而只会执行一次

其实这里就是已经再进一步就涉及了设计模式中的工厂模式和单例模式,需要了解的可以参考下我的github:https://github.com/joinmouse/Design-Mode-

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

推荐阅读更多精彩内容