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里使用Dom操作Xml
Jan 22 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
Date对象格式化函数代码
Jul 17 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
有关Promises异步问题详解
Nov 13 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
详解a++和++a的区别
Aug 30 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
vuex存值与取值的实例
Nov 06 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
vue实现淘宝购物车功能
Apr 20 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中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
实现React单页应用的方法详解
2016/08/02 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python文件读写代码实例
2019/10/21 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
python数据化运营的重要意义
2019/11/25 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Django中FilePathField字段的用法
2020/05/21 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
2014植树节活动总结
2014/03/11 职场文书
规范化管理年活动总结
2014/08/29 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
作风建设剖析材料
2014/10/06 职场文书
2014年司机工作总结
2014/11/21 职场文书
党支部对转正的意见
2015/06/02 职场文书
休学证明范本
2015/06/19 职场文书
小学生运动会广播
2015/08/19 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android