Ajax::prototype 源码解读

薄荷般的凉x

薄荷般的凉x

2016-02-19 10:51

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐Ajax::prototype 源码解读,希望大家看完后也有个好心情,快快行动吧!
AJAX之旅(1):由prototype_1.3.1进入javascript殿堂-类的初探 
还是决定冠上ajax的头衔,毕竟很多人会用这个关键词搜索。虽然我认为这只是个炒作的概念,不过不得不承认ajax叫起来要方便多了。所以ajax的意思我就不详细解释了。
写这个教程的起因很简单:经过一段时间的ajax学习,有一些体会,并且越发认识到ajax技术的强大,所以决定记录下来,顺便也是对自己思路的整理。有关这个教程的后续,请关注http://www.x2design.net
前几年,javascript在一般人眼里,功能还很狭窄,所能做的要么是一些简单的表单验证,要么是许多华而不实的网页特效。随着flash的出现,大家已经不像以前那样热衷于js特效。似乎js能做的事情更加少了。但这时候,ajax的概念冒了出来,以gmail为典型代表的ajax应用受到很多人的关注,ajax一下子成为一种很热门的技术,当javascript和xml,和dom模型结合起来,其所能做的事情常常令人匪夷所思,甚至有些功能已经可以和桌面程序相当。
好了废话就不多说了,现在就从一个javascript的开发框架prototype_1.3.1(下面简称为prototype)开始。我本来是想先介绍一下javascript的高级应用,但怕水平不够,说的没有条理,所以就结合prototype来说,顺便会提及js的语法使用。
下面是框架最前面的两段代码:
var Prototype = {
  Version: '1.3.1',
  emptyFunction: function() {}
}
var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}
首先,让我们来看下面两个语法的区别:
var o={};
var f=function(){};

后面一个很容易理解,它等价于function f(){};定义一个函数f。但前面一个就不常见了:这其实是创建一个对象,在{}中可以指定对象的成员,比如上面的Prototype,就是一个对象,有两个成员,第一个是版本号,第二个是一个空方法(函数)。像这种不用定义类,就能直接创建对象的功能可能只有js能做到。后面一种语法其实还有一个功能,就是定义一个类f。如果你在函数体中用了this,那么this后面的变量就是类的成员。
不仅this可以定义类成员,还有一种语法:
function c(){
 member1:value,
 member2:function(){}
}

这等价于:
function c(){
 this.member1=value;
 this.member2=function(){};
}

需要注意的是,用前一种办法时,最后一个成员的最后不能加逗号,我想这种语法应该和数组有关。
在js里,函数和类是没有区别的,都可以new,new的作用是把函数体的语句都执行一遍,然后返回一个对象。如果函数里有this,那么this后面的变量会作为对象成员;如果没有,那么new的作用只是返回一个没有任何成员的空对象。所以你用typeof查看一个所谓类的类型时,仍然会返回function。在js里也基本没有类型的概念,所有变量的声明都用var,即使是函数,也是如此。函数,其实也只是一个变量。
说函数是变量,可能很多人不解。但是你试试下面的做法:
function fTest(){
 var a=1;
 alert(a);
}
alert(fTest);

你会发现显示的是fTest这个函数的函数体,所以我们可以认为,所谓函数,仅仅是js引擎可以解析的一段代码字符串。函数名变量存储的只是这个字符串。说的更准确一点,函数名是一个指针变量,它存储的是这个代码字符串在内存中的位置。这样就不难理解将函数作为参数传递,可以作为值返回了,这是以后会大量使用的技术。因为类也是函数,所以理解了函数,也就理解了类。
虽然在js里函数和类没有区别,但是类的概念却可以方便我们进行程序设计,于是prototype很有创意的创建了一个全局对象Class:
var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}

Class是一个全局对象,它的唯一方法就是create,作用返回一个函数,前面已经讲过函数作为返回值的机制,这里不再遨述。返回的函数包括一条语句:
this.initialize.apply(this, arguments);

前面讲过,new一个函数时,会执行函数里的代码,最后返回对象。所以当使用Class.create()创建了一个函数,再new这个返回的函数时,首先会执行这条语句。后面可以看到,这其实是为了调用类的构造函数。
就是这样,Class成为了整个prototype的类型创建模型,并且能很好的把类和函数在代码上区分开来。Class.create()仅仅是返回一个空类,而且它会默认为这个类是具有initialize方法的,所以要使用这个类,至少需要有一个构造函数,这就需要使用到类的继承。类只是一个函数,那么函数怎么继承呢?看起来匪夷所思,javascript能做到这一点,prototype使得实现更为优雅,至于它是怎么做到的,且听下回分解。
AJAX之旅(2):javascript中类的深入研究-实现和继承 
上回说到了类的定义,prototype通过一个全局对象Class从形式上将函数和类区别开来。既然是类,那么就有抽象类,具体类,类的继承,同时,类的成员可以有实例成员和静态成员。下面来看一下prototype是怎么做到这些的。
先看prototype中的以下的代码: 

var Abstract = new Object(); 
 Object.extend = function(destination, source) {
   for (property in source) {
     destination[property] = source[property];
   }
   return destination;
 } 
 Object.prototype.extend = function(object) {
   return Object.extend.apply(this, [this, object]);
 }
第一个声明了一个对象Abstract,Object其实是一个函数,他没有任何成员,所以是一个空类,所以Abstract也就没有任何成员。这个暂时不说,后面可以看到这是抽象类的基础。先解释以下这个语法:
function.member=function(){}
在这种情况下,function一般都是已经定义过的,这条语句的作用是给function增加一个静态成员member,member的内容是等号后面的。如上面第二段代码Object.extend=……,就是给Object这个类增加了一个静态方法extend。ok,我们知道了怎样给一个类定义静态成员,那么你一定很想知道实例成员怎么定义,很简单,在类名和成员名之间加上prototype: 

function.prototype.member=function(){}

prototype不仅可以这么使用,还可以: 
 function.prototype={
  member1:function(){……},
  member2:"abc",
  member3:function(){……}
 }
这样就是实现了实例成员的定义。但prototype代表什么意思呢?在第一篇我说过,直接用{}括起来,表示一个对象,如Prototype,Class都是这样定义的全局对象。而看下面一种用法,prototype后面就是一个{}的结构,难道它也是对象?是的,没错,prototype其实也是一个对象!在javascript里,一个对象我们可以任意增加它的成员,用如下的语法:
object.member=function(){……};
只要经过这样的定义,一个对象就可以立刻具有member这个方法!javascript就是这么神奇!
好,我们现在知道了prototype是一个对象,而function是一个函数或者类,那么我们可以认为prototype是任何一个类(函数)都内部保留的一个静态成员。它的功能就是存储这个类的所有成员指针,但这些成员都只是原型,没有经过初始化,这也符合prototype的原义。你可以随时通过prototype这个对象来扩充成员。在new一个类时,prototype的成员就经过初始化,然后赋给了实例化的对象。
上面第三段代码Object.prototype.extend=……,就是给Object增加了一个实例方法extend,实例方法中就可以引用this指针,指向由这个类实例化的对象本身。当然,这个对象就具有成员extend。
继续之前,先了解一下两个语句: 
for(var p in object){}
 method.apply(object,arguments);
第一句:列举出一个变量的所有成员,如果是函数,那么是所有静态成员;如果是对象,那就是所有实例成员,p的类型是一个字符串。表示成员的名称。引用一个成员不仅可以用variabel.member,还可以用variabel["member"]。反过来,赋值也是如此。这就给枚举一个变量的成员带来了很大方便。
第二条语句:将method这个方法应用到object去执行,参数是arguments这个数组。注意:method并不是object的成员。但是,我们可以认为这条语句执行的意思就是:object.method(arguments)。这是一个很重要的方法,后面会经常用到,你也会逐渐熟悉它的。
下面继续extend,它是一个非常重要的方法,可以看到它既是类Object的静态成员,也是其实例成员,那它有什么作用呢?让我们来看:它接收两个参数,destination和source,如果destination和source都是类,那么它的功能是把类source的所有静态成员都复制给类destination,如果destination和source都是对象,那么是把所有实例成员都复制过来。这时destination中如果已经有同名成员,那么这个成员将被覆盖。也就是说让destination具有了source的所有成员,并且函数返回这个destination。下面看extend作为Object的实例成员:
Object.prototype.extend = function(object) {
   return Object.extend.apply(this, [this, object]);
 }
开始有点晕了,不过不要急,还是可以看懂的,apply语法刚刚已经讲过了,它的调用者是一个方法,而Object.extend是一个静态方法,它被应用到this上面,也就是Object的实例,假设为obj,后面方括号是一个数组,包括两个成员,this和object。这个数组实际上就是Object静态成员extend的arguments参数。那么这条语句就相当于执行 
obj.extend(this,object);
this不解释了,表示本身。object是什么?参数,恩,是实例方法extend传来的参数,不要混淆。extend呢?obj并没有定义extend实例成员,但通过apply,它可以把Object的静态成员extend拿来使用,再看一下extend的函数体: 
Object.extend = function(destination, source) {
   for (property in source) {
     destination[property] = source[property];
   }
   return destination;
 }
因为obj是对象,object也是对象,即destination和source都是对象,于是函数的作用就是使obj具有object的所有成员。并且会返回obj。听起来有点拗口,但逻辑很简单:让obj“继承于”object!很好,我们看到了继承,但你肯定会问,对象的继承,第一次听说啊,我们讲继承都是讲的类的继承。没错,现在的确还没有看到真正的类继承,但已经近在眼前了:类不就是有个prototype吗,而prototype是对象!
好,想到这一点,类的继承语法看似很简单了: 
b.prototype.extend(a.prototype);
让b继承a。
可是事实却没那么简单:prototype是存放方法原型指针,extend方法没有初始化,不能使用!要使用extend,就必须实例化一个对象。还是看看prototype是怎么做的吧:
b.prototype=(new a()).extend(b.prototype);
很高明的办法!充分说明了函数其实也是一个变量的道理。先实例化a对象,然后在它基础上调用extend,将所有的成员b.prototype的成员覆盖到a的对象,然后把这个a对象再赋值给b.prototype。完成了b从a继承的工作。在实际使用中,一般的用法都是:
b.prototype=(new a()).extend({});
因为让一个b继承自a,通常b之前都是一个未定义的类,所以后面的{}中其实就可以定义类成员。当然,你也可以先定义,再继承,只是和传统概念有所区别了。

AJAX之旅(3):javascript中的事件设计模式 
今天暂时抛开prototype1.3.1,分享一下我的javscript事件设计心得。其实现的技术基础在于函数的本质,这在前面两篇中有详细叙述(更多请关注:http://www.x2design.net)。
javascript内置的对象都有事件功能,比如button就有onclick事件,input就有onchange事件。那么如何在我们自定义的类中实现事件呢?很简单:
var myClass=Class.create();
myClass.prototype={
 show:function(){
  //statement
  onshow();
 },
 onshow:function(){}
}
这段代码其实就是实现了onshow事件,在myClass实例show的时候触发,你可以给onshow绑定一个函数,从而使用事件功能。在javascript中,内置的对象事件使用方法都是如此,其内部实现应该也是基于这样的模式。但是,这样的实现却有两个突出的问题:
1.只能绑定一个回调函数。如果要实现多绑定,必须自己写很多代码来封装要回调的函数到一个函数中。
2.不能传递参数。因为onshow只能赋给函数名,即函数体本身,并不能传递参数进去,为了传递参数,我曾写过一篇:《用外壳包装法给javascript触发器传递参数》,可见,同样需要写很多代码。
那么,这些问题怎么解决呢?javascript内置对象的事件使用我们就暂时不管,来考虑一下怎么在自己实现的类中避免如上两个问题。实现之前,先来考虑下面这个问题,或许有助于理解实现这个功能的意义:
我的页面需要用javascript进行一些初始化,但初始化必须在页面载入完成之后进行。通常我们会将代码放到html文件最下面。但此时,在页面载入完成之前,页面上的按钮点击需要调用必须经过初始化的方法,如果不作判断,那么就很容易出现脚本错误。因为还没有初始化,一个简单的想法是:用一个bool变量loaded来判断,初始为false,初始化完成后为true,那么按钮点击时遇到false就简单返回。这实现固然简单,但有可能造成用户发现点击无效,而不知其所以然。所以完善的做法应该是能捕获这个方法,将其绑定到页面载入完成事件上,当页面载入完成后自动调用。
好,现在看事件设计模式的实现代码:
var myClass=Class.create();
myClass.prototype={
 initialize:function(){
  this.initEvent=new Object();
 },
 init:function(){
  //初始化要执行的语句

  //下面是调用绑定的回调函数
  for(var p in this.initEvent){
   //extend是内置方法,不可作为回调关键字
   if(p=="extend")continue;
   this.initEvent[p].apply(_object,[]);
  }
 },
 attachOnInit:function(_key,_object,_method,_arguments){
  this.initEvent[_key]=createFunction(_object,_method,_arguments);
 },
}
function createFunction(_object,_method,_arguments){
 return function(){
  _method.apply(_object,_arguments);
 }
}
这段代码就实现了一个类myClass,具有init方法,触发oninit事件,使用时要想绑定一个事件,可以调用attachOnInit方法,参数的意思分别为:_key,回调参函数的唯一标识,如果重复,后者覆盖前者;_object回调函数的对象,如果是直接在script中的函数,可以传递this指针进去,即document对象;_method,要回调的函数,注意,这是一个函数名,不是字符串;_arguments,回调函数的参数数组。还有一个函数是createFunction,作用是包装一个函数,使其内置参数,这是外壳包装法那篇文章的一个通用实现。如果大家看过ajax之旅系列的前两篇文章,应该容易理解上面的代码,如果有什么问题,欢迎评论。
使用示例:
function myFunc(s){
 alert(s);
}
var myObj=new myClass();
myClass.attach("key1",this,myFunc,[123]);
myClass.init();

这就将myFunc函数绑定到myObj的init函数,执行后会弹出对话框123。

Ajax::prototype 源码解读 之 prototype.js 一[转载] 
/** 
 * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 
 */ 
var Prototype = { 
  Version: '@@VERSION@@' 


/** 
 * 创建一种类型,注意其属性 create 是一个方法,返回一个构造函数。 
 * 一般使用如下  
 *     var X = Class.create();  返回一个类型,类似于 java 的一个Class实例。 
 * 要使用 X 类型,需继续用 new X()来获取一个实例,如同 java 的 Class.newInstance()方法。 
 * 
 * 返回的构造函数会执行名为 initialize 的方法, initialize 是 Ruby 对象的构造器方法名字。 
 * 此时initialize方法还没有定义,其后的代码中创建新类型时会建立相应的同名方法。 
 * 
 * 如果一定要从java上去理解。你可以理解为用Class.create()创建一个继承java.lang.Class类的类。当然java不允许这样做,因为Class类是final的 
 * 
 */ 
var Class = { 
  create: function() { 
    return function() { 
      this.initialize.apply(this, arguments); 
    } 
  } 


/** 
 * 创建一个对象,从变量名来思考,本意也许是定义一个抽象类,以后创建新对象都 extend 它。 
 * 但从其后代码的应用来看, Abstract 更多是为了保持命名空间清晰的考虑。 
 * 也就是说,我们可以给 Abstract 这个对象实例添加新的对象定义。 
 * 
 * 从java去理解,就是动态给一个对象创建内部类。 
 */ 
var Abstract = new Object(); 

/** 
 * 获取参数对象的所有属性和方法,有点象多重继承。但是这种继承是动态获得的。 
 * 如: 
 *     var a = new ObjectA(), b = new ObjectB(); 
 *     var c = a.extend(b); 
 * 此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是,c instanceof ObjectB 将返回false。 
 */ 
Object.prototype.extend = function(object) { 
  for (property in object) { 
    this[property] = object[property]; 
  } 
  return this; 


/** 
 * 这个方法很有趣,它封装一个javascript函数对象,返回一个新函数对象,新函数对象的主体和原对象相同,但是bind()方法参数将被用作当前对象的对象。 
 * 也就是说新函数中的 this 引用被改变为参数提供的对象。 
 * 比如: 
 *     input type="text" id="aaa" value="aaa" 
 *     input type="text" id="bbb" value="bbb" 
 *     ................. 
 *     script 
 *         var aaa = document.getElementById("aaa"); 
 *         var bbb = document.getElementById("bbb"); 
 *         aaa.showValue = function() {alert(this.value);} 
 *         aaa.showValue2 = aaa.showValue.bind(bbb); 
 *     /script 
 *  那么,调用aaa.showValue 将返回"aaa", 但调用aaa.showValue2 将返回"bbb"。 
 * 
 * apply 是ie5.5后才出现的新方法(Netscape好像很早就支持了)。 
 * 该方法更多的资料参考MSDN http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp 
 * 还有一个 call 方法,应用起来和 apply 类似。可以一起研究下。 
 */ 
Function.prototype.bind = function(object) { 
  var method = this; 
  return function() { 
    method.apply(object, arguments); 
  } 


/** 
 * 和bind一样,不过这个方法一般用做html控件对象的事件处理。所以要传递event对象 
 * 注意这时候,用到了 Function.call。它与 Function.apply 的不同好像仅仅是对参数形式的定义。 
 * 如同 java 两个过载的方法。 
 */ 
Function.prototype.bindAsEventListener = function(object) { 
  var method = this; 
  return function(event) { 
    method.call(object, event || window.event); 
  } 


/** 
 * 将整数形式RGB颜色值转换为HEX形式 
 */ 
Number.prototype.toColorPart = function() { 
  var digits = this.toString(16); 
  if (this  16) return '0' + digits; 
  return digits; 


/** 
 * 典型 Ruby 风格的函数,将参数中的方法逐个调用,返回第一个成功执行的方法的返回值 
 */ 
var Try = { 
  these: function() { 
    var returnValue; 

    for (var i = 0; i  arguments.length; i++) { 
      var lambda = arguments[i]; 
      try { 
        returnValue = lambda(); 
        break; 
      } catch (e) {} 
    } 

    return returnValue; 
  } 


/*--------------------------------------------------------------------------*/ 

/** 
 * 一个设计精巧的定时执行器 
 * 首先由 Class.create() 创建一个 PeriodicalExecuter 类型, 
 * 然后用对象直接量的语法形式设置原型。 
 * 
 * 需要特别说明的是 rgisterCallback 方法,它调用上面定义的函数原型方法bind, 并传递自己为参数。 
 * 之所以这样做,是因为 setTimeout 默认总以 window 对象为当前对象,也就是说,如果 registerCallback 方法定义如下的话: 
 *     registerCallback: function() { 
 *         setTimeout(this.onTimerEvent, this.frequency * 1000); 
 *     } 
 * 那么,this.onTimeoutEvent 方法执行失败,因为它无法访问 this.currentlyExecuting 属性。 
 * 而使用了bind以后,该方法才能正确的找到this,也就是PeriodicalExecuter的当前实例。 
 */ 
var PeriodicalExecuter = Class.create(); 
PeriodicalExecuter.prototype = { 
  initialize: function(callback, frequency) { 
    this.callback = callback; 
    this.frequency = frequency; 
    this.currentlyExecuting = false; 

    this.registerCallback(); 
  }, 

  registerCallback: function() { 
    setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); 
  }, 

  onTimerEvent: function() { 
    if (!this.currentlyExecuting) { 
      try { 
        this.currentlyExecuting = true; 
        this.callback(); 
      } finally { 
        this.currentlyExecuting = false; 
      } 
    } 

    this.registerCallback(); 
  } 


/*--------------------------------------------------------------------------*/ 

/** 
 * 这个函数就 Ruby 了。我觉得它的作用主要有两个 
 * 1.  大概是 document.getElementById(id) 的最简化调用。 
 * 比如:$("aaa") 将返回上 aaa 对象 
 * 2.  得到对象数组 
 * 比如: $("aaa","bbb") 返回一个包括id为"aaa"和"bbb"两个input控件对象的数组。 
 */ 
function $() { 
  var elements = new Array(); 

  for (var i = 0; i  arguments.length; i++) { 
    var element = arguments[i]; 
    if (typeof element == 'string') 
      element = document.getElementById(element); 

    if (arguments.length == 1) 
      return element; 

    elements.push(element); 
  } 

  return elements; 
}


Ajax::prototype 源码解读 之 prototype.js 二[转载] 
/** 
 * 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象 
 */ 
var Ajax = { 
  getTransport: function() { 
    return Try.these( 
      function() {return new ActiveXObject('Msxml2.XMLHTTP')}, 
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}, 
      function() {return new XMLHttpRequest()} 
    ) || false; 
  }, 

  emptyFunction: function() {} 


/** 
 * 我以为此时的Ajax对象起到命名空间的作用。 
 * Ajax.Base 声明为一个基础对象类型 
 * 注意 Ajax.Base 并没有使用 Class.create() 的方式来创建,我想是因为作者并不希望 Ajax.Base 被库使用者实例化。 
 * 作者在其他对象类型的声明中,将会继承于它。 
 * 就好像 java 中的私有抽象类 
 */ 
Ajax.Base = function() {}; 
Ajax.Base.prototype = { 
  /** 
   * extend (见prototype.js中的定义) 的用法真是让人耳目一新 
   * options 首先设置默认属性,然后再 extend 参数对象,那么参数对象中也有同名的属性,那么就覆盖默认属性值。 
   * 想想如果我写这样的实现,应该类似如下: 
     setOptions: function(options) { 
      this.options.methed = options.methed? options.methed : 'post'; 
      .......... 
     } 
     我想很多时候,java 限制了 js 的创意。 
   */ 
  setOptions: function(options) { 
    this.options = { 
      method:       'post', 
      asynchronous: true, 
      parameters:   '' 
    }.extend(options || {}); 
  } 



/** 
 * Ajax.Request 封装 XmlHttp 
 */ 
Ajax.Request = Class.create(); 

/** 
 * 定义四种事件(状态), 参考http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp 
 */ 
Ajax.Request.Events = 
  ['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete']; 

/** 
 * 
 */ 
Ajax.Request.prototype = (new Ajax.Base()).extend({ 
  initialize: function(url, options) { 
    this.transport = Ajax.getTransport(); 
    this.setOptions(options); 

    try { 
      if (this.options.method == 'get') 
        url += '?' + this.options.parameters + '&_='; 

     /** 
      * 此处好像强制使用了异步方式,而不是依照 this.options.asynchronous 的值 
      */ 
      this.transport.open(this.options.method, url, true); 

     /** 
      * 这里提供了 XmlHttp 传输过程中每个步骤的回调函数 
      */ 
      if (this.options.asynchronous) { 
        this.transport.onreadystatechange = this.onStateChange.bind(this); 
        setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10); 
      } 

      this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
      this.transport.setRequestHeader('X-Prototype-Version', Prototype.Version); 

      if (this.options.method == 'post') { 
        this.transport.setRequestHeader('Connection', 'close'); 
        this.transport.setRequestHeader('Content-type', 
          'application/x-www-form-urlencoded'); 
      } 

      this.transport.send(this.options.method == 'post' ? 
        this.options.parameters + '&_=' : null); 

    } catch (e) { 
    }    
  }, 

  onStateChange: function() { 
    var readyState = this.transport.readyState; 
   /** 
    * 如果不是 Loading 状态,就调用回调函数 
     */ 
    if (readyState != 1) 
      this.respondToReadyState(this.transport.readyState); 
  }, 

  /** 
   * 回调函数定义在 this.options 属性中,比如: 
      var option = { 
         onLoaded : function(req) {...}; 
         ...... 
      } 
      new Ajax.Request(url, option); 
   */ 
  respondToReadyState: function(readyState) { 
    var event = Ajax.Request.Events[readyState]; 
    (this.options['on' + event] || Ajax.emptyFunction)(this.transport); 
  } 
}); 

/** 
 * Ajax.Updater 用于绑定一个html元素与 XmlHttp调用的返回值。类似与 buffalo 的 bind。 
 * 如果 options 中有 insertion(from dom.js) 对象的话, insertion 能提供更多的插入控制。 
 */ 
Ajax.Updater = Class.create(); 
Ajax.Updater.prototype = (new Ajax.Base()).extend({ 
  initialize: function(container, url, options) { 
    this.container = $(container); 
    this.setOptions(options); 

    if (this.options.asynchronous) { 
      this.onComplete = this.options.onComplete; 
      this.options.onComplete = this.updateContent.bind(this); 
    } 

    this.request = new Ajax.Request(url, this.options); 

    if (!this.options.asynchronous) 
      this.updateContent(); 
  }, 

  updateContent: function() { 
    if (this.options.insertion) { 
      new this.options.insertion(this.container, 
        this.request.transport.responseText); 
    } else { 
      this.container.innerHTML = this.request.transport.responseText; 
    } 

    if (this.onComplete) { 
      setTimeout((function() {this.onComplete(this.request)}).bind(this), 10); 
    } 
  } 
});
Ajax::prototype 源码解读 之 prototype.js 三[转载] 
/** 
 * 针对 页面元素对象 的工具类,提供一些简单静态方法 
 */ 
var Field = { 
  /** 
   * 清除参数引用对象的值 
   */ 
  clear: function() { 
    for (var i = 0; i  arguments.length; i++) 
      $(arguments[i]).value = ''; 
  }, 

  /** 
   * 使参数引用对象获取焦点 
   */ 
  focus: function(element) { 
    $(element).focus(); 
  }, 

  /** 
   * 判断参数引用对象值是否为空,如为空,返回false, 反之true 
   */ 
  present: function() { 
    for (var i = 0; i  arguments.length; i++) 
      if ($(arguments[i]).value == '') return false; 
    return true; 
  }, 

  /** 
   * 使选中参数引用对象 
   */ 
  select: function(element) { 
    $(element).select(); 
  }, 

  /** 
   * 使参数引用对象处于可编辑状态 
   */ 
  activate: function(element) { 
    $(element).focus(); 
    $(element).select(); 
  } 


/*--------------------------------------------------------------------------*/ 

/** 
 * 表单工具类 
 */ 
var Form = { 
  /** 
   * 将表单元素序列化后的值组合成 QueryString 的形式 
   */ 
  serialize: function(form) { 
    var elements = Form.getElements($(form)); 
    var queryComponents = new Array(); 

    for (var i = 0; i  elements.length; i++) { 
      var queryComponent = Form.Element.serialize(elements[i]); 
      if (queryComponent) 
        queryComponents.push(queryComponent); 
    } 

    return queryComponents.join('&'); 
  }, 

  /** 
   * 得到表单的所有元素对象 
   */ 
  getElements: function(form) { 
    form = $(form); 
    var elements = new Array(); 

    for (tagName in Form.Element.Serializers) { 
      var tagElements = form.getElementsByTagName(tagName); 
      for (var j = 0; j  tagElements.length; j++) 
        elements.push(tagElements[j]); 
    } 
    return elements; 
  }, 

  /** 
   * 将指定表单的元素置于不可用状态 
   */ 
  disable: function(form) { 
    var elements = Form.getElements(form); 
    for (var i = 0; i  elements.length; i++) { 
      var element = elements[i]; 
      element.blur(); 
      element.disable = 'true'; 
    } 
  }, 

  /** 
   * 使表单的第一个非 hidden 类型而且处于可用状态的元素获得焦点 
   */ 
  focusFirstElement: function(form) { 
    form = $(form); 
    var elements = Form.getElements(form); 
    for (var i = 0; i  elements.length; i++) { 
      var element = elements[i]; 
      if (element.type != 'hidden' && !element.disabled) { 
        Field.activate(element); 
        break; 
      } 
    } 
  }, 

  /* 
   * 重置表单 
   */ 
  reset: function(form) { 
    $(form).reset(); 
  } 


/** 
 * 表单元素工具类 
 */ 
Form.Element = { 
  /** 
   * 返回表单元素的值先序列化再进行 URL 编码后的值 
   */ 
  serialize: function(element) { 
    element = $(element); 
    var method = element.tagName.toLowerCase(); 
    var parameter = Form.Element.Serializers[method](element); 

    if (parameter) 
      return encodeURIComponent(parameter[0]) + '=' + 
        encodeURIComponent(parameter[1]);                    
  }, 

  /** 
   *  返回表单元素序列化后的值 
   */ 
  getValue: function(element) { 
    element = $(element); 
    var method = element.tagName.toLowerCase(); 
    var parameter = Form.Element.Serializers[method](element); 

    if (parameter) 
      return parameter[1]; 
  } 


/** 
 * prototype 的所谓序列化其实就是将表单的名字和值组合成一个数组 
 */ 
Form.Element.Serializers = { 
  input: function(element) { 
    switch (element.type.toLowerCase()) { 
      case 'hidden': 
      case 'password': 
      case 'text': 
        return Form.Element.Serializers.textarea(element); 
      case 'checkbox':  
      case 'radio': 
        return Form.Element.Serializers.inputSelector(element); 
    } 
    return false; 
  }, 

  inputSelector: function(element) { 
    if (element.checked) 
      return [element.name, element.value]; 
  }, 

  textarea: function(element) { 
    return [element.name, element.value]; 
  }, 

  /** 
   * 看样子,也不支持多选框(select-multiple) 
   */ 
  select: function(element) { 
    var index = element.selectedIndex; 
    var value = element.options[index].value || element.options[index].text; 
    return [element.name, (index = 0) ? value : '']; 
  } 


/*--------------------------------------------------------------------------*/ 

/** 
 * Form.Element.getValue 也许会经常用到,所以做了一个快捷引用 
 */ 
var $F = Form.Element.getValue; 

/*--------------------------------------------------------------------------*/ 

/** 
 * Abstract.TimedObserver 也没有用 Class.create() 来创建,和Ajax.Base 意图应该一样 
 * Abstract.TimedObserver 顾名思义,是套用Observer设计模式来跟踪指定表单元素, 
 * 当表单元素的值发生变化的时候,就执行回调函数 
 * 
 * 我想 Observer 与注册onchange事件相似,不同点在于 onchange 事件是在元素失去焦点的时候才激发。 
 * 同样的与 onpropertychange 事件也相似,不过它只关注表单元素的值的变化,而且提供timeout的控制。 
 * 
 * 除此之外,Observer 的好处大概就在与更面向对象,另外可以动态的更换回调函数,这就比注册事件要灵活一些。 
 * Observer 应该可以胜任动态数据校验,或者多个关联下拉选项列表的连动等等 
 * 
 */ 
Abstract.TimedObserver = function() {} 

/** 
 * 这个设计和 PeriodicalExecuter 一样,bind 方法是实现的核心 
 */ 
Abstract.TimedObserver.prototype = { 
  initialize: function(element, frequency, callback) { 
    this.frequency = frequency; 
    this.element   = $(element); 
    this.callback  = callback; 

    this.lastValue = this.getValue(); 
    this.registerCallback(); 
  }, 

  registerCallback: function() { 
    setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); 
  }, 

  onTimerEvent: function() { 
    var value = this.getValue(); 
    if (this.lastValue != value) { 
      this.callback(this.element, value); 
      this.lastValue = value; 
    } 

    this.registerCallback(); 
  } 


/** 
 * Form.Element.Observer 和 Form.Observer 其实是一样的 
 * 注意 Form.Observer 并不是用来跟踪整个表单的,我想大概只是为了减少书写(这是Ruby的一个设计原则) 
 */ 
Form.Element.Observer = Class.create(); 
Form.Element.Observer.prototype = (new Abstract.TimedObserver()).extend({ 
  getValue: function() { 
    return Form.Element.getValue(this.element); 
  } 
}); 

Form.Observer = Class.create(); 
Form.Observer.prototype = (new Abstract.TimedObserver()).extend({ 
  getValue: function() { 
    return Form.serialize(this.element); 
  } 
});
Ajax::prototype 源码解读 之 prototype.js 四[转载] 
/** 
 * 根据 class attribute 的名字得到对象数组,支持 multiple class 
 * 
 */ 
document.getElementsByClassName = function(className) { 
  var children = document.getElementsByTagName('*') || document.all; 
  var elements = new Array(); 

  for (var i = 0; i  children.length; i++) { 
    var child = children[i]; 
    var classNames = child.className.split(' '); 
    for (var j = 0; j  classNames.length; j++) { 
      if (classNames[j] == className) { 
        elements.push(child); 
        break; 
      } 
    } 
  } 

  return elements; 


/*--------------------------------------------------------------------------*/ 

/** 
 * Element 就象一个 java 的工具类,主要用来 隐藏/显示/销除 对象,以及获取对象的简单属性。 
 * 
 */ 
var Element = { 
  toggle: function() { 
    for (var i = 0; i  arguments.length; i++) { 
      var element = $(arguments[i]); 
      element.style.display = 
        (element.style.display == 'none' ? '' : 'none'); 
    } 
  }, 

  hide: function() { 
    for (var i = 0; i  arguments.length; i++) { 
      var element = $(arguments[i]); 
      element.style.display = 'none'; 
    } 
  }, 

  show: function() { 
    for (var i = 0; i  arguments.length; i++) { 
      var element = $(arguments[i]); 
      element.style.display = ''; 
    } 
  }, 

  remove: function(element) { 
    element = $(element); 
    element.parentNode.removeChild(element); 
  }, 

  getHeight: function(element) { 
    element = $(element); 
    return element.offsetHeight; 
  } 


/** 
 * 为 Element.toggle 做了一个符号连接,大概是兼容性的考虑 
 */ 
var Toggle = new Object(); 
Toggle.display = Element.toggle; 

/*--------------------------------------------------------------------------*/ 

/** 
 * 动态插入内容的实现,MS的Jscript实现中对象有一个 insertAdjacentHTML 方法(http: //msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp) 
 * 这里算是一个对象形式的封装。 
 */ 
Abstract.Insertion = function(adjacency) { 
  this.adjacency = adjacency; 


Abstract.Insertion.prototype = { 
  initialize: function(element, content) { 
    this.element = $(element); 
    this.content = content; 

    if (this.adjacency && this.element.insertAdjacentHTML) { 
      this.element.insertAdjacentHTML(this.adjacency, this.content); 
    } else { 
     /** 
      * gecko 不支持 insertAdjacentHTML 方法,但可以用如下代码代替 
      */ 
      this.range = this.element.ownerDocument.createRange(); 
     /** 
      * 如果定义了 initializeRange 方法,则实行,这里相当与定义了一个抽象的 initializeRange 方法 
      */ 
      if (this.initializeRange) this.initializeRange(); 
      this.fragment = this.range.createContextualFragment(this.content); 

     /** 
      * insertContent 也是一个抽象方法,子类必须实现 
      */ 
      this.insertContent(); 
    } 
  } 


/** 
 * prototype 加深了我的体会,就是写js 如何去遵循 Don't Repeat Yourself (DRY) 原则 
 * 上文中 Abstract.Insertion 算是一个抽象类,定义了名为 initializeRange 的一个抽象方法 
 * var Insertion = new Object() 建立一个命名空间 
 * Insertion.Before|Top|Bottom|After 就象是四个java中的四个静态内部类,而它们分别继承于Abstract.Insertion,并实现了initializeRange方法。 
 */ 
var Insertion = new Object(); 

Insertion.Before = Class.create(); 
Insertion.Before.prototype = (new Abstract.Insertion('beforeBegin')).extend({ 
  initializeRange: function() { 
    this.range.setStartBefore(this.element); 
  }, 

  /** 
   * 将内容插入到指定节点的前面, 与指定节点同级 
   */ 
  insertContent: function() { 
    this.element.parentNode.insertBefore(this.fragment, this.element); 
  } 
}); 

Insertion.Top = Class.create(); 
Insertion.Top.prototype = (new Abstract.Insertion('afterBegin')).extend({ 
  initializeRange: function() { 
    this.range.selectNodeContents(this.element); 
    this.range.collapse(true); 
  }, 

  /** 
   * 将内容插入到指定节点的第一个子节点前,于是内容变为该节点的第一个子节点 
   */ 
  insertContent: function() {  
    this.element.insertBefore(this.fragment, this.element.firstChild); 
  } 
}); 

Insertion.Bottom = Class.create(); 
Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({ 
  initializeRange: function() { 
    this.range.selectNodeContents(this.element); 
    this.range.collapse(this.element); 
  }, 

  /** 
   * 将内容插入到指定节点的最后,于是内容变为该节点的最后一个子节点 
   */ 
  insertContent: function() { 
    this.element.appendChild(this.fragment); 
  } 
}); 


Insertion.After = Class.create(); 
Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({ 
  initializeRange: function() { 
    this.range.setStartAfter(this.element); 
  }, 

  /** 
   * 将内容插入到指定节点的后面, 与指定节点同级 
   */ 
  insertContent: function() { 
    this.element.parentNode.insertBefore(this.fragment, 
      this.element.nextSibling); 
  } 
});

 

Ajax::prototype 源码解读 之 prototype.js 五[转载] 
prototype 还有两个源码文件 effects.js compat.js 就不贴出来了。两者并不常用,effects.js 看example 做花哨的效果还不错,不过代码中没有太多新鲜的东西。 

需要指出的就是 
compat.js 中 Funcation.prototype.apply 的实现有两个错误(应该是拼写错误), 我分别贴出来,大家比较一下就清楚了。
展开更多 50%)
分享

猜你喜欢

Ajax::prototype 源码解读

Web开发
Ajax::prototype 源码解读

[转]prototype 源码解读 超强推荐

Web开发
[转]prototype 源码解读 超强推荐

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

调用prototype.js的ajax进行post提交示例源码

Web开发
调用prototype.js的ajax进行post提交示例源码

prototype 源码中文说明之 prototype.js

Web开发
prototype 源码中文说明之 prototype.js

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

AJAX源码应用示例

Web开发
AJAX源码应用示例

Ajax框架 Prototype 1.6.1 发布

Web开发
Ajax框架 Prototype 1.6.1 发布

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

java中对字符串每个字符统计的方法

java中对字符串每个字符统计的方法

MAC如何重置iCloud照片流

MAC如何重置iCloud照片流
下拉加载更多内容 ↓