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的eval JSON object问题
Nov 15 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 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
将PHP作为Shell脚本语言使用
2006/10/09 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
jquery中radio checked问题
2015/03/16 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
python根据距离和时长计算配速示例
2014/02/16 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
详解Django中的form库的使用
2015/07/18 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
三下乡活动方案
2014/01/31 职场文书
初二学习计划书范文
2014/04/27 职场文书
求职信模板
2014/05/23 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
人与自然观后感
2015/06/16 职场文书
毕业实习证明范本
2015/06/16 职场文书
八年级语文教学反思
2016/03/03 职场文书
解析MySQL binlog
2021/06/11 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技