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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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显示指定目录下子目录的方法
2015/03/20 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php处理复杂xml数据示例
2016/07/11 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python 时间处理datetime实例
2008/09/06 Python
python中实现php的var_dump函数功能
2015/01/21 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
护理专科自荐书范文
2014/02/18 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
企业领导对照检查材料
2014/08/20 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
python在package下继续嵌套一个package
2022/04/14 Python
Django框架之路由用法
2022/06/10 Python