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 相关文章推荐
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
详解JavaScript对象类型
Jun 16 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
javascript+Canvas实现画板功能
Jun 23 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重定向的三种方法分享
2012/02/22 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
python线程池的实现实例
2013/11/18 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
python如何获取服务器硬件信息
2017/05/11 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
高中自我鉴定范文
2013/11/03 职场文书
工程测量与监理专业应届生求职信
2013/11/27 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
党员个人党性分析材料
2014/12/18 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书