jQuery学习(零)

前言:

阅读完JavaScript设计模式的第一部分后,对封装有了进一步的认识,并且学习了单体模式,跟链式调用。尤其是链式调用这一章节,对先前一些不懂的地方开始有了一点思路,紧接着该部分,打算学习理解下jQuery的封装,研读下源码,理解下jQuery源码的厉害之处。


  1. 观察jQuery的源码可以发现,所有的代码都是包括在一个自调用的匿名函数中,这个匿名函数有两个参数,global跟factory。其中global为全局对象,factory则是jQuery所有功能的生产者,jQuery的所有函数,功能均在这里面去做具体实现。

  2. 下面我们可以看下这个自调用,立即执行的匿名函数中做了些什么?

( function( global, factory ) {
"use strict";
    if ( typeof module === "object" && typeof module.exports === "object" ) {
        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        //对于像commonJs或者类似commonJs的环境中的话,因为的确存在'window',所以就会执行factory方法并且获取到jQuery对象。
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        //对于像node.js这样的代码环境中没有'document'的'window'对象的,会将factory方法像module.export的形式导出。
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

通过对module跟module.export进行类型判断,可以检测出是否存在类似commonJS模块化的环境中,但不存在模块化的环境中是直接执行factory方法,并且将global对象传入factory方法中。
我的理解是像我们常规的web开发的时候,如果不涉及到模块化,我们会直接在script上面引入jQuery,这个时候就是执行了else语句里面的,因为检测不到module的存在。
如果我们使用了commonJs的情况下,要引入jQuery,我们应该会这样做,var jQuery = require("jquery")(window),我们会用到require的形式去引入jQuery,这时候就会检测到module的存在。
然后会进行判断global对象里是否存在document对象,如果存在则调用factory方法,不过此处有两个参数,这里不一样的地方是,这个第二个参数传入了true。第二个参数的作用,后面一点再说。
如果不存在document对象,那就说明我们的代码可能不在浏览器的执行环境中,这时候返回的是匿名函数,这个匿名函数只有一个参数,这个参数是让我们手动去传入存在document的window的对象。
如果传入的值内部不存在document对象,则会抛出异常。如果存在则将我们传入的对象去执行factory方法。这里我们就可以发现require("jquery")(window)的写法就是进行手动指定window对象。
对于上面的写法,我会在之后用commonJs跟AMD,es6的import还有node分别去验证,确认下自己的理解是否正确。

这个匿名函数实际上传入的两个参数为: typeof window !== "undefined" ? window : this, function( window, noGlobal ) {...}。第一个参数是先进行一次三元运算,判断window是否存在,如果存在则传入window,如果不存在则传入this。这个判断的作用感觉就是确认是否在浏览器的运行环境内,因为只有浏览器才存在window对象。第二个参数则是我们前面所讲的factory方法,这就是jQuery功能的具体实现方法,jQuery的巧妙之处也在这里面。也是我们着重要学习的地方。


补充:

经过验证得知:

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

推荐阅读更多精彩内容

  • 面试题一:https://github.com/jimuyouyou/node-interview-questio...
    R_X阅读 1,621评论 0 5
  • 本博客转自:「作者:若愚链接:https://zhuanlan.zhihu.com/p/22361337来源:知乎...
    韩宝亿阅读 2,762评论 0 3
  • 相关知识点 数据类型、运算、对象、function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Aj...
    sandisen阅读 22,932评论 20 251
  • 经历 编译原理上课 微机原理上课 看《c与指针》中数组和字符串部分 web应用开发上课 在简书上总结了c语言中ty...
    DouQing阅读 215评论 2 2
  • 刘畅 咨询主管【日精进打卡第111天】 【知~学习】 《六项精进大纲》0遍 共172遍 《大学》0遍 共174遍 ...
    瑶瑶_8f95阅读 136评论 0 0