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 Object与Function使用
Jan 11 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
canvas绘制七巧板
Feb 03 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 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
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
简述Python中的进程、线程、协程
2016/03/18 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
歌唱比赛主持词
2014/03/18 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
车间安全生产管理制度
2015/08/06 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
HTML基础详解(上)
2021/10/16 HTML / CSS