Jquery源码分析(一)
2010-01-29 15:55
281 查看
1,整体结构如下
( function () {
// ……
})(); 第一对括号里是一个匿名函数,第一对括号表示执行该函数。
注: js的匿名函数模式 http://www.hedgerwow.com/360/dhtml/js-anonymous-function-patterns.html
非匿名函数的类似写法如下
( function test(){alert('test');})();所有的jquery代码都放在该匿名函数里,避免了命名冲突。但有两个要单独处理:'jQuery'和'$'
// Map over jQuery in case of overwrite
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
var jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
};
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},假如没有执行noConflict,则原来定义的$或jQuery(如果定义了的话)会被一个新函数覆盖,只在内部留一个原来的引用(名叫_$或_jQuery)。
如果要兼容原来的$,则执行jQuery.noConflict(),然后只能用jQuery的写法;
极端情况:"jQuery"也被占用了,又要兼容,那么执行var myJQ =jQuery.noConflict(true),以后全用myJQ的写法。
注意:这时jquery.js要放在其他js的后面。
2,
定义jQuery的构造和原型函数,这个过程同时定义了prototype的别名为fn:jQuery.prototype=jQuery.fn。 jQuery对象的原型prototype包括了诸多的核心方法和属性:
init
jquery 当前的版本号
size 返回了length属性
length
get
each
...
定义完了以后必须写以下代码,不明白
// Give the init function the jQuery prototype for later instantiation(晚初始化?)
jQuery.fn.init.prototype = jQuery.fn;
见http://bbs.blueidea.com/thread-2843388-1-1.html
jQuery.prototype.init( selector, context )是jQuery对象的一个成员函数,但是在jQuery构造函数中总是会执行这个函数,所以说"它是加强的构造函数(init constructor 'enhanced')。因为在执行构造函数jQuery 时总是会执行它。 这也是很多框架的典型做法。
jQuery有3个身份,类,对象,函数(构造函数)。
如果find是对象的方法,即类似于 jQuery.find=function(){}
那么就应该使用jQuery.find();
如果find是类的成员函数,即类似于 jQuery.prototype.find=function(){}
那么必须通过jQuery()返回jQuery实例,再调用find方法,即jQuery().find()。
8,jQuery源码解读---执行过程分析
http://hi.baidu.com/zhuguoneng/blog/item/3d07e9d667e9482b06088b4c.html
转自:http://www.blogjava.net/leekiang/archive/2008/06/07/206456.html
( function () {
// ……
})(); 第一对括号里是一个匿名函数,第一对括号表示执行该函数。
注: js的匿名函数模式 http://www.hedgerwow.com/360/dhtml/js-anonymous-function-patterns.html
非匿名函数的类似写法如下
( function test(){alert('test');})();所有的jquery代码都放在该匿名函数里,避免了命名冲突。但有两个要单独处理:'jQuery'和'$'
// Map over jQuery in case of overwrite
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
var jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
};
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},假如没有执行noConflict,则原来定义的$或jQuery(如果定义了的话)会被一个新函数覆盖,只在内部留一个原来的引用(名叫_$或_jQuery)。
如果要兼容原来的$,则执行jQuery.noConflict(),然后只能用jQuery的写法;
极端情况:"jQuery"也被占用了,又要兼容,那么执行var myJQ =jQuery.noConflict(true),以后全用myJQ的写法。
注意:这时jquery.js要放在其他js的后面。
2,
定义jQuery的构造和原型函数,这个过程同时定义了prototype的别名为fn:jQuery.prototype=jQuery.fn。 jQuery对象的原型prototype包括了诸多的核心方法和属性:
init
jquery 当前的版本号
size 返回了length属性
length
get
each
...
定义完了以后必须写以下代码,不明白
// Give the init function the jQuery prototype for later instantiation(晚初始化?)
jQuery.fn.init.prototype = jQuery.fn;
见http://bbs.blueidea.com/thread-2843388-1-1.html
jQuery.prototype.init( selector, context )是jQuery对象的一个成员函数,但是在jQuery构造函数中总是会执行这个函数,所以说"它是加强的构造函数(init constructor 'enhanced')。因为在执行构造函数jQuery 时总是会执行它。 这也是很多框架的典型做法。
jQuery有3个身份,类,对象,函数(构造函数)。
如果find是对象的方法,即类似于 jQuery.find=function(){}
那么就应该使用jQuery.find();
如果find是类的成员函数,即类似于 jQuery.prototype.find=function(){}
那么必须通过jQuery()返回jQuery实例,再调用find方法,即jQuery().find()。
8,jQuery源码解读---执行过程分析
http://hi.baidu.com/zhuguoneng/blog/item/3d07e9d667e9482b06088b4c.html
转自:http://www.blogjava.net/leekiang/archive/2008/06/07/206456.html
相关文章推荐
- [转]jQuery源码分析系列
- jQuery 源码分析 选择器
- 献给和我合作的过得前端童靴们:jquery源码分析--核心函数(包装对象和holdReady方法)
- jQuery源码分析
- jquery 源码分析系列2
- [原创] jQuery源码分析-如何做jQuery源码分析(更新)
- jQuery-1.9.1源码分析系列(十)事件系统之事件包装
- jQuery源码分析-02正则表达式-RegExp-常用正则表达式
- jQuery源码分析-10事件处理-Event-概述和基础知识
- jQuery源码分析-12 DOM操作-Manipulation-核心函数.domManip()
- jQuery.form插件源码分析
- jQuery源码分析随笔之isPlainObject分析
- jQuery 1.8源码分析 core.js核心模块 jQuery对象的构造分析
- jQuery 2.0.3 源码分析core - 选择器
- jQuery1.11源码分析(10)-----Callbacks模块
- jQuery-1.9.1源码分析系列(六) 延时对象应用——jQuery.ready
- jQuery源码逐行分析学习02(第一部分:jQuery的一些变量和函数)
- JQuery源码分析
- Jquery源码分析(修改)
- Jquery源码分析系列(1)--Jquery整体架构