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提示 "object expected"的解决方法
Dec 13 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
微信小程序实现消息框弹出动画
Apr 18 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(1)
2006/10/09 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
解析php取整的几种方式
2013/06/25 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
Element PageHeader页头的使用方法
2020/07/26 Javascript
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python针对excel的操作技巧
2018/03/13 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
关于VPN
2012/06/10 面试题
Linux开机引导的步骤是什么
2014/02/26 面试题
中学生民族团结演讲稿
2014/08/27 职场文书
2014年学校体育工作总结
2014/12/08 职场文书