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){}
}
})()
