DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Prototype框架源碼分析心得
Prototype框架源碼分析心得
編輯:AJAX詳解     

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 引用被改變為參數提供的對象。 
 * 比如: 
 *      
 *      
 *     ................. 
 *     
 *  那麼,調用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); 
  } 
});

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved