jQuery原型技术分解

jQuery原型技术分解

起源----原型继承

用户过javascript的都会明白，在javascript脚本中到处都是 函数，函数可以归置代码段，把相对独立的功能封闭在一个函数包中。函数也可以实现类，这个类是面向对象编程中最基本的概念，也是最高抽象，定义一个灰就相 当于制作一个模型，然后借助这个模型复制无数的实例。

例如，下面的就可定义最初的jQuery类，类名就是jQuery，你可以把它视为一个函数，函数名是jQuery。那当然也可以把它视为一个对象，对象 名是jQuery。与其也面向对象的编程语言比，javascript对于这些概念的界定好像很随意，这降低了编程的门槛，反之也降低了 javascript作为编程语言的层次。

<script language=”javascript” type=”text/javascript”>

var jQuery = function(){

//函数体

}

</script>

上面创建一个空函数，好像什么都不能够做，这个函数实际上是所谓的构造函数。构造函数在面向对象语言中是类的一个特殊方法，用来创建类。在javascript中，你可以把任何函数都视为构造函数，这没有什么不可以的，这样不会伤害代码本身。

所有类都有最基本的功能，如继承、派生和重写等。javascript很奇特，它通过所有函数绑定一个prototype属性，由这个属性指向一个原型对象，原型对象中可以定义类的继承属性和方法，所以，对于上面的空类，可以继续扩展原型。（继承请参见js学习笔记---类和模块）

<script language=”javascript” type=”text/javascript”>

var jQuery = function(){}

jQuery.prototype = {

//扩展原型对象

}

</script>

原型对象是javascript实现继承的基本机制。如果觉得 jQuery.prototype名称太长，没有关系，我们可以为其重新命名，如fn，当然你可以随便命名。如果直接命名fn，则表示该名称属于 Window对象，即全局变量名。更安全的方法是为jQuery类定义一个公共属性jQuery.fn，然后把jQuery的原型对象传递给这个公共属 性，实现代码如下：

<script language=”javascript” type=”text/javascript”>

var jQuery = function(){}

jQuery.fn=jQuery.prototype= {

//扩展原型对象

}

</script>

这里jQuery.fn相当于jQuery.prototype的别名，方便以后使 用，它们指向一个引用。因此若要调用jQuery的原型方法，直接使用jQuery.fn公共属性即可，不需要直接引用 jQuery.prototype，当然直接使用jQuery.prototype也是可以的。然后原型对象可以使用别名，jQuery类也可以起个别 名，我们可以使用$符号来引用它，如下：var $ = jQuery = function(){}

现在模仿jQuery框架源码，给它添加两个成员，一个是原型属性jquery,一个是原型方法size()，如下：

<script language=”javascript” type=”text/javascript”>

var $=jQuery = function(){}

jQuery.fn = jQuery.prototype = {

jquery:”1.10.01”  //原型属性

size:function(){    //原型方法

return this.length;

}

}

</script>

生命------返回实例

上例中的代码相信很多人都写过，但是只有John Regis一个人把它发展成了jQuery这样牛X的框架。

上面定义了两个原型成员，这个框架基本的样子就出来啦，但是该如何调用jquery属性和size()方法呢？

也许，你可采用如下的方法调用：

<script language=”javascript” type = “text/javascript”>

var my$ = new $();

alert(my$.jquery);

alert(my$.size());

</script>

但是，jQuery不是这样调用的。它模仿类似下面的方法进行调用。

$().jquery

$().size();

也就是说，我们应该把jQuery看做一个类，同时也应该把它视为一个普通函数，并让这个函数返回值为jQuery类的实例。因此如下

<script language=”javascript” type=”text/javascript”>

var $=jQuery = function(){

return  new jQuery();

}

jQuery.fn = jQuery.prototype = {

jquery:”1.10.01”  //原型属性

size:function(){    //原型方法

return this.length;

}

}

//调用

alert(my$.jquery);

alert(my$.size());

</script>

但是，如果在浏览器中预览，则会提示如图所示的错误。内存外溢，说明出现了死循环引用。

回一下，当使用var my$ = new$(); 创建jQuery类的实例时，this关键字就指向对象my$，因此my$实例对象就获得了jQuery.prototype包含的原型属性或方法，这些 方法内this关键字就会自动指向my$实例对象。因此可以使用一个工厂方法来创建一个实例，这个方法放在jQuery.prototype原型对象中， 然后在jQuery函数中返回这个原型方法的调用。代码如下：

<script language=”javascript”type=”text/javascript”>

var $ = jQuery = function(){

return  jQuery.fn.init(); //调用原型方法init();

}

jQuery.fn = jQuery.prototype= {

init:function(){

return this;

}

,jquery:”1.10.01

,size:function(){

return  this.length;

}

}

//调用

alert(my$.jquery);    //调用属性，返回”1.3.2

alert(my$.size());     //调用方法，返回undefined

</script>

学步-----分隔作用域

我们已经初步实现了让jQuery函数能够返回jQuery实例，下面继续思 考：init()方法返回的是this关键字，该关键字引用的是jQuery类的实例，如果在init()函数中继续使用this关键字，也就是说，假设 我们把init()函数也视为一个构造器，则其中的this该如何理解和处理？

例如，在下面的示例中，jQuery原型对象中包含一个length属性，同时 init()从一个普通的函数转身变成了构造器，它也包含一个length属性和一个test()方法，运行该示例，我们可以看到，this关键字引用 init()函数作用域所在的对象，此时它访问length属性时，返回0.而this关键字也能够访问一级对象jQury.fn对象的作用域，所 以$().jquery返回”1.3.2”，但是调用$().size()方法时，返回的是0，而不是1。

<script language=”javascript”type=”text/javascript”>

var $ = jQuery = function(){

return  jQuery.fn.init(); //调用原型方法init();

}

jQuery.fn = jQuery.prototype= {

init:function(){

this.length=0;

this.test = function(){

return this.length;

}

return this;

}

,jquery:”1.10.01

,length:1

,size:function(){

returnthis.length;

}

}

//调用

alert($().jquery);    //调用属性，返回”1.3.2

alert($().test());     //调用方法，返回0

alert($().size());     //调用方法，返回0

</script>

这种设计思路很容易破坏作用域的独立性，对于jQuery这样的框架来说，很可能会造成消极影响，因此我们可以看到jQuery框架是通过下面的方式调用init()初始化构造函数的

<script language=”javascript”type=”text/javascript”>

var $=jQuery=function(){

return new  jQuery.fn.init(); //实例化init初始化类型，分隔作用域

}

</script>

这样就可以把init()构造器中的this和jQuery.fn对象中的this关键字隔离开来，避免相互混淆。但是，这种方式也会带来另一个问题，无法访问，jQuery.fn对象的属性或方法。如下：

<script language=”javascript”type=”text/javascript”>

var $=jQuery=function(){

return new  jQuery.fn.init();

}

jQuery.fn =jQuery.prototype = {

init:function(){

this.length = 0;

this.test= function(){

return this.length;

}

},

jquery:”1.10.01”,

length:1,

size:function(){

return this.length;

}

}

alert($().jquery);    //调用属性，返回 undefined

alert($().test());     //调用方法，返回0

alert($().size());     //调用方法，返回抛出异常

</script>

生长-----跨域访问

如何做到既能分隔始始化构造函数与jQuery原型对象的作用域，又能够在返回实例中访问jQuery原型对象呢？

jQuery框架巧妙地通过原型传递解决了这个问题，它把jQuery.fn传递给jQuery.fn.init.prototype，也就是说jQuery的原型对象覆盖init构造器的原型对象，从而实现跨域访问，

<script language=”javascript”type=”text/javascript”>

var $=jQuery=function(){

return new  jQuery.fn.init();

}

jQuery.fn =jQuery.prototype = {

init:function(){

this.length = 0;

this.test= function(){

return this.length;

}

},

jquery:”1.10.01”,

length:1,

size:function(){

return this.length;

}

}

jQuery.fn.init.prototype =jQuery.fn; //使用jQuery的原型对象覆盖init的原型对象。

alert($().jquery);    //调用属性，返回 1.10.01

alert($().test());     //调用方法，返回0

alert($().size());     //调用方法，0

</script>

成熟------选择器

jQuery返回的是jQuery对象，它是一个类数组对象，本质上它就是一个对象，但是它拥有数组的长度和下标，却没有继承数组的方法。

jQuery函数包含两个参数selector和context，其中selector表示选择器，而context表示选择内容范围，它表示一个DOM元素，为了简化操作，我们假设选择的类型仅限定为标签选择器。

<div></div>

<div></div>

<div></div>

<script language=”javascript”type=”text/javascript”>

var $=jQuery=function(){

return new jQuery.fn.init();

}

jQuery.fn = jQuery.prototype = {

init:function(selector,context){

selector = selector|| document;

context= context || document;

if(selector.nodeType){

this[0] = selector;

this.length = 1;

this.context = selector;

return this;

}

if(typeof selector = “string”){

var e = context.getElementByTagName(selector);

for(vari=0;i<e.length;i++){

this[i] = e[i];

}

this.length = e.length;

this.context = context;

return this;

}else{

this.length = 0;

this.context = context;

return this;

}

},

jquery:”1.10.01”,

length:1,

size:function(){

return this.length;

}

}

jQuery.fn.init.prototype =jQuery.fn; //使用jQuery的原型对象覆盖init的原型对象。

alert($(“div”).size());    //返回3

</script>

延续----迭代器

在jQuery框架中，jQuery对象是一个很奇怪的概念，具有多重身份：

第一、  jQuery对象是一个数据集合，它不是一个个体对象，因此，你无法直接使用javascript的方法。

第二、  jQuery对象实际上是一个普通 的对象，因为它是通过new运行符创建的一个新的实例对象。它可以继承原型方法或属性，同时也拥有Object类型的方法和属性。

第三、  jQuery对象包含数组特性，因为它赋值了数组元素，以数组结构存储返回的数据。我们可以以javascript的概念理解jQuery对象，如：

<script language=”javascript” type = “text/javascript”>

var jquery= {

name:”jquery”,

value:”1.2.3”

};

jquery[0] = “jquery”;

jquery[1] = “1.2.3”;

alert(jquery.name);  //返回”jquery”

alert(jquery[0]); //返回”jquery”

</script>

jQuery对象的结构是按这种形式设计的。可以说，jQuery对象就是对象和数组的混合体，但是它不拥有数组的方法，因为它的数组结构是人为附加的，也就说它不是Array类型的数据，而是Object类型的数据。

第四、  jQuery对象包含的数据都是DOM元素，是通过数组形式存储的，即通过jQuery[n]形式获取。同时jQuery对象又定义了几个模仿Array基本特性的属性，如length等。

所以jQuery对象是不允许直接操作，只有分别读取它包含的每一个DOM元素，才能够实现各种操作。

延续-----功能扩展

根据一般设计习惯，如果要为jQuery或jQuery.prototype添加函数 或方法，可以直接通过点（.）语法实现，或者在jQuery.prototype对象结构中增加一个属性即可。但是，如果分析jQuery框架的源代码， 你会发现它是通过extend()函数来实现功能扩展的。例如下面两段代码都是jQuery框架通过extend()函数来扩展功能的

jQuery.extend({

noConflict:function(deep){},

isFunction:function(obj){},

isArray:function(obj){},

isXMLDoc:function(elem){},

globalEval:function(data){},

})

或者

jQuery.fn.extend({

show:function(speed,callback){},

hide:function(speed,callback){},

toggle:function(fn,fn2){},

fadeTo:function(speed,to,callback){},

animate:function(prop,speed,easing,callback){},

stop:function(clearQueue,gotoEnd){},

})

extend()函数能够方便用户快速扩展jQuery框架的功能。但是不会破坏框架的原型结构，从而避免后期人工手动添加工具函数或者方法时破坏 jQuery框架的单纯性，同时也方便管理。如果不需要某个插件，只需要简单地删除即可，而不是需要在jQuery框架源代码中去筛选和删除。

extend()函数的功能实现起来也很简单，它只要把指定对象的方法复制给jQuery对象或jQuery.prototype对象。例如，在下面的示 例中，我们为jQuery类和原型定义一个扩展功能函数extend()，该函数的功能很简单，它能够把指定参数对象包含的所有属性复制给jQuery或 者jQuery.prototype对象，这样就可以在应用中随时调用它，并动态扩展jQuery对象的方法。

//jQuery功能扩展函数

jQuery.fn.extend = jQuery.extend =function(obj){

for(var prop in obj) this[prop] =obj[prop];

return this;

}

jQuery框架定义的extend()函数的功能要强大很多，它不仅能够完成基本的功能扩展，还可以实现对象合并等功能，详细代码和解释如下：

jQuery.extend = jQuery.fn.extend =function(){

//定义复制操作的目标对象

var target = arguments[0]||{},i=1,length=arguments.length,deep = false,options;

//获取是否深度复制处理

if(typeof target ===”boolean”){

deep = target;

target = arguments[1] || {};

//跳出布尔值和目标对象

i = 2;

}

if(typeof target!=”object” &&!jQuery.isFunction(target)) target = {};

if(length==i){

target = this;

--i;

}

for(;i<length;i++){

//若参数不为null，则进行处理

if((options=arguments[i])!=null){

//extend the baseobject

for(var name in options){ //遍历参数对象

var src =target[name],copy = options[name];

if(target===copy)continue;

//递归运算

if(deep&& copy && typeof copy===”object” && !copy.nodeType)

target[name]= jquery.extend(deep,

//不要复制原对象

src || (copy.length!=null?[]:{}),copy);

else if(copy!==undefined)

target[name] = copy;

}

return target;

}

}

}

延续----参数处理

对于参数不固定，传递参数的最好办法是对象直接量。

命名空间

var jQuery =function(){}

jQuery=function(){}

上面所示的代码是两种不同的写法，且都是合法的，但是它们的主义完全不同。第一行代码声明了一个变量。而第二行代码定义了Window对象的一个属性，也就是说它等同于下面的语句

window.jQuery =function(){};

在全局作用域中，变量和Window对象的属性可以是相等的，也是可以是互通的，但是 当在其他环境中（如局部作用域中），则它们是不相等的，也是无法互通的，因此如果希望jquery具有类似$.method();调用的能力，就需要将 jQuery调协为Window对象的一个属性，所以你就会看到jQuery框架中是这样定义的。

var jQuery = window.jQuery = window.$ =function(selectio,context){

return new jQuery.fn.init(selector,context);

}

<script language=”javascript” type=text/javascript”>

(function(){

function f1(){

return “f1()”;

}

})();

function f2(){

return “f2()”;

}

alert(f2());  //返回”f2()”

alert(12());  //抛出异常，禁止访问

</script>

实际上，上面的匿名函数是所谓的闭包，闭包是javascript函数中一个最核心的概念。当然，$和jQuery名字并非是jQuery框架的专利，其 他一些经典框架中也会用到$名字，为此jQuery提供了一个noConfilit()方法，该方法能够实现禁止jQuery框架使用这两个名字。为了实 现这样的目的，jQuery在框架的最前面，先使用_$和_jQuery临时寄存这两个变量的内容，当需要禁用jQuery框架的名字时，可以使用一个临 时变量_$和_jQuery恢复和jQuery这两个变量的实际内容。如下代码：

(function(){

var window = this,

undefined,

_jQuery = window.jQuery,

_$ = window.$,

jQuery = window.jQuery = window.$ =function(selector,context){

return newjQuery.fn.init(selector,context);

};

jQuery.fn = jQuery.prototype = {

init:function(selector,context){}

}

})()