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高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
jQuery插件的写法分享
Jun 12 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
Vue.use源码学习小结
Jun 20 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
微信小程序实现多图上传
Jun 19 Javascript
React如何创建组件
Jun 27 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添加数据到xml文件的简单例子
2016/09/08 PHP
客户端静态页面玩分页
2006/06/26 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
一道python走迷宫算法题
2018/01/22 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
简单实现Python爬取网络图片
2018/04/01 Python
对numpy中轴与维度的理解
2018/04/18 Python
python实现人民币大写转换
2018/06/20 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
Python实现结构体代码实例
2020/02/10 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
活动策划求职信模板
2014/04/21 职场文书
文艺晚会开场白
2015/05/29 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android