jQuery总体架构的理解分析


Posted in Javascript onMarch 07, 2011

jQuery脚本总体结构来说,有如下形式:

(function( window, undefined ) { 
// Define a local copy of jQueryvar jQuery = function( selector, context 
) { // The jQuery object is 
actually just the init constructor 
'enhanced' return new 
jQuery.fn.init( selector, context ); }, 
// Expose jQuery to the global objectwindow.jQuery = 
window.$ = jQuery; 
})(window);

对这样的结构不很理解,也没做深究,只知道和和所谓的
Technorati 标签: JQuery,Javascript,Web前端
js闭包的概念相关,今天查了一些资料,有了些基本的理解。
实际是定义了一个全局函数,前一个括号为一个匿名函数,后面为函数的调用。可以这样理解:
var fun=function(window, undefined){ 
... ... 
} 
fun(window);

整个脚本是一个匿名函数(暂时叫它mainFn吧),函数被加载的时候便开始执行,mainFn可以接收两个参数,执行时只传递一个参数window.

1. 具体解释下这个写法的意思:
2. window 函数执行时会传入window,这个传入的window是全局对象(通常为Window)的
3. 一个属性且window=this,而传入mainFn函数中作为其参数时,它会被存储在
4. mainFn的调用对象中.在原型链中查找变量的策略是(非嵌套函数):先查找调用
5. 对象,再查找全局对象,所以这使得整个mainFn中使用的window时查找效率更高
6. undefined 由于执行时并未传递第二个参数,故变量undefined的值为undefined.早期版
7. 本的浏览器中全局对象可能没有undefined属性,所以不能直接使用它.通常避免
8. 这个问题的写法是 window.undefined = window.undefined

然后在最后让jQuery库中最重要的对象jQuery成为了window对象的一个属性,并可以简写为“$”。

其它的补充资料:
JQuery是个出色的javascript库,最近结合它写javascript,看了下源码。
先从整体、全局的看,jQuery的源码几乎都在下面的代码中:

(function() { //…… 
})();

第一个括号里面是个匿名函数,第二个括号表示马上执行第一个括号里面的代码。
首先明白,javascript里面是没有命名空间的,要保证你的javascript函数、对象与其他的不冲突,这里用了javascript的一个技巧:你的所有javascript函数、对象都在一个匿名函数里面定义,确保了所定义的函数、对象的有效范围,起到了命名空间的作用。既然作用范围在这个匿名函数中,怎么被别人使用呢?下面看它的下面代码:

var jQuery = window.jQuery = function(selector, context) {
//……
};

这里让jQuery库中最重要的对象jQuery成为了window对象的一个属性,这样就可以在其他地方像使用 document(document也是window的一个属性)一样使用jQuery了。也许使用过jQuery的朋友惊讶-我没有使用jQuery对象,一直使用$的。没错,那是jQuery的同名对象:

window.$ = jQuery;

现在明白了吧。

这个库的结构是这样的:

1. (function(window, undefined){ 
2. var document = window.document; 
3. var jQuery = ... 
4. ... 
5. ... 
6. })(window); (function(window, undefined){ var document = window.document; var jQuery = ... ... ... })(window);

整个脚本是一个匿名函数(暂时叫它mainFn吧),函数被加载的时候便开始执行,mainFn可以接收两个参数,执行时只传递一个参数window.
1. 具体解释下这个写法的意思:
2. window 函数执行时会传入window,这个传入的window是全局对象(通常为Window)的
3. 一个属性且window=this,而传入mainFn函数中作为其参数时,它会被存储在
4. mainFn的调用对象中.在原型链中查找变量的策略是(非嵌套函数):先查找调用
5. 对象,再查找全局对象,所以这使得整个mainFn中使用的window时查找效率更高
6. undefined 由于执行时并未传递第二个参数,故变量undefined的值为undefined.早期版
7. 本的浏览器中全局对象可能没有undefined属性,所以不能直接使用它.通常避免
8. 这个问题的写法是 window.undefined = window.undefined
Javascript 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
js实现分页功能
May 24 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 #Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 #Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 #Javascript
淘宝搜索框效果实现分析
Mar 05 #Javascript
再论Javascript下字符串连接的性能
Mar 05 #Javascript
再论Javascript的类继承
Mar 05 #Javascript
Array的push与unshift方法性能比较分析
Mar 05 #Javascript
You might like
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP链表操作简单示例
2016/10/15 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
javascript import css实例代码
2008/07/18 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
chrome调试javascript详解
2015/10/21 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python lxml模块安装教程
2015/06/02 Python
Python实现身份证号码解析
2015/09/01 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
浅析python参数的知识点
2018/12/10 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
淘宝网店营销策划书
2014/01/11 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
2014年优秀党员材料
2014/12/18 职场文书
六年级学生评语大全
2014/12/26 职场文书
地心历险记观后感
2015/06/15 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python