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 textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
iScroll.js 使用方法参考
May 16 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
永不消失的title提示代码
2007/02/15 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
django使用图片延时加载引起后台404错误
2017/04/18 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
办公室前台岗位职责
2014/01/04 职场文书
我的求职计划书
2014/01/10 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
个人银行贷款担保书
2014/04/01 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
前台文员岗位职责
2015/02/04 职场文书
迎国庆主题班会
2015/08/17 职场文书