在jquery实际应用中可通过$或jQuery生成jquery对象,如$("#hr_three")可生成jquery对象,jquery是如何做到的呢?
jquery加载时,入口为如下匿名方法,
红色部分为调用参数,global为window对象,factory为匿名方法,factory指向的匿名方法包含了整个jquery的主要功能代码。
在jquery加载调用默认方法时,通过factory( global );对factory指向的匿名方法进行调用,可以看到匿名方法调用时第二个参数并未传入,因此noGlobal参数为undefined,以下代码初始化了window全局对象的jQuery及$属性。
将jQuery对象赋值给了全局的jQuery及$属性,因此,可以在jquery环境中使用jQuery或$来生成jquery对象。
再来看下jQuery对象的初始过程,
为什么this会指向jQuery对象呢? 看以下代码
jQuery.fn为jQuery的别名(参照下面代码),而init的prototype对象又指向jQuery.fn,因此init也是jQuery对象的别名,this就指向jQuery对象了。
以上代码jQuery.fn赋值为jQuery.prototype对象,并将其自身的构造方法指向 jQuery,因此jQuery.fn实际上就是jQuery对象的别名。为什么要为jQuery设置别名呢?个人感觉是想将jQuery对象方法用别名区分开来。
以上即为jQuery对象的初始框架。
如下代码段模拟了jQuery对象生成的骨架代码:
jquery加载时,入口为如下匿名方法,
(function( global, factory ) {...} ([color=red]typeof window !== "undefined" ? window : this, function( window, noGlobal) {...}[/color]));
红色部分为调用参数,global为window对象,factory为匿名方法,factory指向的匿名方法包含了整个jquery的主要功能代码。
在jquery加载调用默认方法时,通过factory( global );对factory指向的匿名方法进行调用,可以看到匿名方法调用时第二个参数并未传入,因此noGlobal参数为undefined,以下代码初始化了window全局对象的jQuery及$属性。
if ( !noGlobal ) {
// noGlobal为undefined,因此if判断为真
window.jQuery = window.$ = jQuery;
}
将jQuery对象赋值给了全局的jQuery及$属性,因此,可以在jquery环境中使用jQuery或$来生成jquery对象。
再来看下jQuery对象的初始过程,
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
init = jQuery.fn.init = function( selector, context, root ) {
...
// this实际上指向的是jQuery对象,根据selector的类别,对jQuery对象做了很多属性增强封装并最终返回
return this;
}
为什么this会指向jQuery对象呢? 看以下代码
init.prototype = jQuery.fn;
jQuery.fn为jQuery的别名(参照下面代码),而init的prototype对象又指向jQuery.fn,因此init也是jQuery对象的别名,this就指向jQuery对象了。
jQuery.fn = jQuery.prototype = {
jquery: version,
constructor: jQuery,
...
}
以上代码jQuery.fn赋值为jQuery.prototype对象,并将其自身的构造方法指向 jQuery,因此jQuery.fn实际上就是jQuery对象的别名。为什么要为jQuery设置别名呢?个人感觉是想将jQuery对象方法用别名区分开来。
以上即为jQuery对象的初始框架。
如下代码段模拟了jQuery对象生成的骨架代码:
var test = function() {
return new test.fn.init();
};
test.fn = test.prototype = {
constructor: test,
add: function() {
}
};
var init = test.fn.init = function() {
// 增加长度属性
this.length = 1;
// 增加0属性
this[ 0 ] = "test";
// 返回自身
return this;
}
init.prototype = test.fn;
var test = test();
console.log(test.length + "---" + test[0]);