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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 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
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP打印输出函数汇总
2016/08/28 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
动态控制Table的js代码
2007/03/07 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
Python入门篇之函数
2014/10/20 Python
浅析Python多线程下的变量问题
2015/04/28 Python
python非递归全排列实现方法
2017/04/10 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
华为慧通面试题
2012/09/11 面试题
十一个高级MySql面试题
2014/10/06 面试题
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
2015年春节标语口号
2014/12/09 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL