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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
JS删除数组指定值常用方法详解
Jun 04 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHPThumb图片处理实例
2014/05/03 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
再论Javascript的类继承
2011/03/05 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python创建子类的方法分析
2019/11/28 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
环保专业大学生职业规划设计
2014/01/10 职场文书
仓库组长岗位职责
2014/01/29 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
镇创先争优活动总结
2014/08/28 职场文书
关于召开会议的通知
2015/04/15 职场文书
聘任书范文大全
2015/09/21 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android