解開Ajax技術中的達芬奇密碼

2024-07-21 02:30:17

字體：大中小

來源：轉載

供稿：網友

現在，ajax技術發展勢頭迅猛，開發者已經建立了一個調用大量客戶端javascript、不斷增長的、復雜的系統。因此，在javascript上嘗試oo技術便成為了管理復雜性的一種手段。在此過程中，多數開發者很快便認識到：javascript是一種原型化的(prototypical)語言，它缺少oo自身帶來的多種便利。

  　　幾乎每位在開發javascript時嘗試應用面向對象技術的開發者，或多或少都會問自己一個問題：“如何調用父類(super class)的方法?”在ajax技術還沒有目前這樣炙手可熱之前，這種問題很少出現，因為大多數開發者僅在進行客戶端form驗證或者簡單的dhtml/dom操作時使用javascript。在那些簡單的解決方案中，函數式編程(functional programming)是很有意義的，面向對象編程則處在次之重要的位置。

  　　現在，ajax技術發展勢頭迅猛，開發者已經建立了一個調用大量客戶端javascript、不斷增長的、復雜的系統。因此，在javascript上嘗試oo技術便成為了管理復雜性的一種手段。在此過程中，多數開發者很快便認識到：javascript是一種原型化的(prototypical)語言，它缺少oo自身帶來的多種便利。

  　　oo設計的主旨和關于它的一些話題談起來很大，但只著眼于class的定義方式，我認為它是javascript開發者嘗試解決問題的首選。因此，你可以在互聯網上找到許多不同的問題解決案例，但在我看過它們后不免有些失望——這些案例都是在某個場合下適用，而不是放之四海而皆準的通法。而我對這個話題的興趣來自于我的team在開發 thinwire ajax framework 的影響。

  　　由于這個框架生成出對客戶端代碼的需求，才使我們“被迫”去實現可靠的、支持父類方法調用的oo模式。通過父類調用，你可以進一步依靠類的繼承特性來核心化通用代碼，從而更易于減少重復代碼，去掉客戶端代碼的壞味道。

  　　下面羅列出了一些在我的研究過程中遇到的解決方式。最終，我沒有從中找出一個可以接收的解決方案，于是我不得不實現一個自己的解決方案，你將在本文的結尾部分看到這個方案。

  　　然而父類調用在這里是最重要的oo機制，因此我需要一個相應的工作模式，也正是因為在我的觀點中原型化方式是丑陋的，所以我更需要一種更加自然地使用javascript定義類的方法。

  　　more solutions：

  　　好吧，讓我們進入討論。正如開發者所察覺的那樣，在js中實現基本的繼承是很容易的事，事實上有一些眾所周知的方法：

  　　丑陋的solution：

  　　沒有進行父類調用的簡單繼承:

  // 提前寫好的javascript class定義和繼承
  // 當然，這種代碼很丑陋，散發著代碼的壞味道。
  function baseclass() {
   //baseclass constructor code goes here
  }

  baseclass.prototype.getname = function() {
   return "baseclass";
  }

  function subclass() {
   //subclass constructor code goes here
  }

  //inherit the methods of baseclass
  subclass.prototype = new baseclass();

  //override the parent's getname method
  subclass.prototype.getname = function() {
   return "subclass";
  }

  //alerts "subclass"
  alert(new subclass().getname());



  　　導致 ie內存泄露的solution：

  　　這種實現方式能夠導致在ie中的內存泄漏，你應該盡量避免：

  // 運行時的javascript class 定義和繼承
  // 看上去很傳統，但這些腳本會導致在internet explorer中的內存泄漏.
  function baseclass() {
   this.getname = function() {
   return "baseclass";
   };

   //baseclass constructor code goes here
  }

  function subclass() {
   //在對象實例建立時重載父類的getname方法
   this.getname = function() {
   return "subclass";
   }

   //subclass constructor code goes here
  }

  //inherit the methods of baseclass
  subclass.prototype = new baseclass();

  //alerts "subclass"
  alert(new subclass().getname());



  　　就像我在第一個實現方法中所注釋的那樣，第一個實現方法有些丑陋，但它相比引起內存泄漏的第二種方式便是首選了。

  　　我把這兩種方法放在這里的目的是指出你不應該使用它們。

上一篇：AJAX使用技巧：如何處理書簽和翻頁按扭

下一篇：WebService服務和ajax 使用教程一例