jQuery学习(零)
前言:
阅读完JavaScript设计模式的第一部分后,对封装有了进一步的认识,并且学习了单体模式,跟链式调用。尤其是链式调用这一章节,对先前一些不懂的地方开始有了一点思路,紧接着该部分,打算学习理解下jQuery的封装,研读下源码,理解下jQuery源码的厉害之处。
-
观察jQuery的源码可以发现,所有的代码都是包括在一个自调用的匿名函数中,这个匿名函数有两个参数,global跟factory。其中global为全局对象,factory则是jQuery所有功能的生产者,jQuery的所有函数,功能均在这里面去做具体实现。
-
下面我们可以看下这个自调用,立即执行的匿名函数中做了些什么?
( 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的巧妙之处也在这里面。也是我们着重要学习的地方。
补充:
经过验证得知:
- jQuery以script的形式引入的情况下,是不存在module的,所以会直接执行factory方法,然后传入的第一个参数因为存在window对象,所以传入window。
- 如果使用es6的import引入的话,存在window对象,module为object类型,但是module.exports为undefined。
- 使用require引入,结果与import一致。