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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
javascript 函数调用规则
Aug 26 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
node.js实现快速截图
2016/08/27 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
Python实现图片拼接的代码
2018/07/02 Python
python实现连续图文识别
2018/12/18 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
微观物理专业自荐信
2014/01/26 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
校长师德表现自我评价
2015/03/04 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
python实现网络五子棋
2021/04/11 Python
python munch库的使用解析
2021/05/25 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技