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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
JsChart组件使用详解
Mar 04 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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连接mysql数据库代码
2009/03/10 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
利用Python如何生成随机密码
2016/04/20 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
上海天奕面试题笔试题
2015/04/19 面试题
销售人员中英文自荐信
2013/09/22 职场文书
质检的岗位职责
2013/11/17 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
项目建议书范文
2014/05/12 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2015年环保局工作总结
2015/05/22 职场文书
小学教师读书笔记
2015/07/01 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python