思洋互动网站建设学前班

jQuery原型技术分解

任何复杂的技术都是从最简单的问题开始的，如果你被jQuery几千行庞杂结构的源代码所困惑，那么建议你阅读本节内容，我们将探索jQuery是如何从最简单的问题开始，并逐步实现羽翼渐丰的演变过程，从jQuery核心技术的还原过程来理解jQuery框架的搭建原理。

2.2.1  起源--原型继承

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

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

1. <script language="javascript" type="text/javascript"> 
2. var jQuery = function(){  
3.     //函数体  
4. }  
5. </script> 

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

所有类都有最基本的功能，如继承、派生和重写等。JavaScript很奇特，它通过为所有函数绑定一个prototype属性，由这个属性指向一个原型对象，原型对象中可以定义类的继承属性和方法等。所以，对于上面的空类，可以继续扩展原型，其代码如下。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script language="javascript" type="text/javascript"> 
2. var jQuery = function(){}  
3. jQuery.prototype = {  
4.    //扩展的原型对象  
5. }  
6. </script> 

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

1. <script language="javascript" type="text/javascript"> 
2. jQueryjQuery.fn = jQuery.prototype = {  
3.    //扩展的原型对象  
4. }  
5. </script> 

这里的jQuery.fn相当于jQuery.prototype的别名，方便以后使用，它们指向同一个引用。因此若要调用jQuery的原型方法，直接使用jQuery.fn公共属性即可，不需要直接引用jQuery.prototype，当然直接使用jQuery.prototype也是可以的。

既然原型对象可以使用别名，jQuery类也可以起个别名，我们可以使用$符号来引用它，代码如下。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. var $ = jQuery = function(){} 

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

1. <script language="javascript" type="text/javascript"> 
2. var $ = jQuery = function(){}  
3. jQueryjQuery.fn = jQuery.prototype = {  
4.     jquery: "1.3.2",   //原型属性  
5.     size: function() {   //原型方法  
6.         return this.length;  
7.     }  
8. }  
9. </script>