菜鸟的jQuery源码学习笔记(一)
2014-08-15 22:58
316 查看
整个jQuery是一个自调用的匿名函数:
自调用函数大家都不陌生,前面的function(){}是函数定义,然后紧接着的()表示立即执行,这样构建了一个命名空间,其中的变量都是局部变量,不管起什么名字,都不会覆盖全局变量。这样就不会污染全局的命名空间。如果有不熟悉的同学,可以去看看作用域链和闭包的基础知识就明白啦。
这个子调用函数的函数体我们暂时可以不用管,貌似是处理jQuery与CommonJS、Node.js等的冲突和协调关系,这个我觉得不是重点,重点是这个自调用函数的参数。
整个参数列表有两个参数,第一个参数是传入Global对象,所有的全局变量都是Global对象的成员。传入这个变量,我们就将Global对象变成了这个自调用匿名函数的局部变量了,这样当我们访问它时,在自调用匿名函数的作用域中就能找到它,而不用将作用域链会退到Global,这样就更快啦。
第二个参数就是我们的jQuery啦,其中定义了jQuery的所有的内容,咱们的重点就在这里,那么现在开始,我们往下看。
在自调用的匿名函数里面,定义了一个jQuery变量,它是一个方法,执行后返回一个新jQuery对象,不过这个对象实际上是由jQuery.fn.init函数构建。在整个jQuery主体代码的最后会让window.jQuery和window.$两个全局变量引用这个jQuery方法:
这样当我们使用$(...)或者jQuery(...)的时候就能创建jQuery对象啦!
[b]下期预告:[/b]
我们都知道,在javascript中构建对象的方法有很多种,什么工厂模式、构造函数模式、原型模式等等,jQuery使用的是构造函数和原型相结合的方式。下期我们来看看jQuery的原型是怎么样的。
(function(global, factory) { if (typeof module === "object" && typeof module.exports === "object") { 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) { /* jQuery主体代码 */ }));
自调用函数大家都不陌生,前面的function(){}是函数定义,然后紧接着的()表示立即执行,这样构建了一个命名空间,其中的变量都是局部变量,不管起什么名字,都不会覆盖全局变量。这样就不会污染全局的命名空间。如果有不熟悉的同学,可以去看看作用域链和闭包的基础知识就明白啦。
这个子调用函数的函数体我们暂时可以不用管,貌似是处理jQuery与CommonJS、Node.js等的冲突和协调关系,这个我觉得不是重点,重点是这个自调用函数的参数。
整个参数列表有两个参数,第一个参数是传入Global对象,所有的全局变量都是Global对象的成员。传入这个变量,我们就将Global对象变成了这个自调用匿名函数的局部变量了,这样当我们访问它时,在自调用匿名函数的作用域中就能找到它,而不用将作用域链会退到Global,这样就更快啦。
第二个参数就是我们的jQuery啦,其中定义了jQuery的所有的内容,咱们的重点就在这里,那么现在开始,我们往下看。
jQuery = function(selector, context) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init(selector, context); }
在自调用的匿名函数里面,定义了一个jQuery变量,它是一个方法,执行后返回一个新jQuery对象,不过这个对象实际上是由jQuery.fn.init函数构建。在整个jQuery主体代码的最后会让window.jQuery和window.$两个全局变量引用这个jQuery方法:
if (typeof noGlobal === strundefined) { window.jQuery = window.$ = jQuery; }
这样当我们使用$(...)或者jQuery(...)的时候就能创建jQuery对象啦!
[b]下期预告:[/b]
我们都知道,在javascript中构建对象的方法有很多种,什么工厂模式、构造函数模式、原型模式等等,jQuery使用的是构造函数和原型相结合的方式。下期我们来看看jQuery的原型是怎么样的。
相关文章推荐
- 菜鸟的jQuery源码学习笔记(前言)
- 菜鸟的jQuery源码学习笔记(二)
- 菜鸟的jQuery源码学习笔记(三)
- jQuery源码学习笔记九
- jQuery源码学习笔记十(改)
- jQuery源码研究分析学习笔记-jQuery.buildFragment()(六)
- jquery源码学习笔记一:总体结构
- jquery源码学习笔记二:jQuery工厂
- jQuery源码学习笔记五(转)
- jQuery 源码学习笔记
- jQuery源码学习笔记八
- jQuery源码学习笔记一(转)
- jQuery 入门级学习笔记及源码
- 菜鸟的jquery学习笔记,jquery添加删除html标签属性:2011-12-19
- jQuery源码学习笔记:构造jQuery对象
- jQuery源码学习笔记二(转)
- jquery源码学习笔记
- jquery源码学习笔记一:总体结构
- jQuery源码学习笔记:jQuery.fn.init(selector,context,rootjQuery)代码详解