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 相关文章推荐
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JS实现div居中示例
Apr 17 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
拖动时防止选中
Feb 03 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
关于捕获用户何时点击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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
简单使用Python自动生成文章
2014/12/25 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
django中cookiecutter的使用教程
2020/12/03 Python
python自动化发送邮件实例讲解
2021/01/04 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
大学毕业感言200字
2014/03/09 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang