【jQuery学习笔记------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){}

        }

    })()