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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 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
php4的session功能评述(二)
2006/10/09 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python 实现逻辑回归
2020/12/30 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
三个儿子教学反思
2014/02/03 职场文书
银行贷款收入证明
2014/10/17 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
喋血孤城观后感
2015/06/08 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python