Menu

30天學會 MooTools 教學(21): Class 類(第二部分)

在今天的教程中，我們將主要學習一下MooTools中類的實現和繼承（擴展）。

通過實現和繼承，我們可以在子類中使用父類的方法，而不需要再重新聲明和實現相同的方法。MooTools中的Class類可以幫助我們輕鬆地做到這一點。首先，我們定一個基類（base class）。

  

var BaseClass = new Class({  
      // 定義一個方法testFunction  
      // 這個方法彈出一個對話框  
      testFunction : function(){  
          alert('This function is defined in BaseClass');  
      }


現在，我們已經有了一個基類（base class），我們可以通過創建一個新類來實現它從而使用它的全部功能。注意，在下面的例子中，我們的新類沒有做任何事情，而只是實現了基類BaseClass。 

// 創建一個名叫ImplementingClass的類  
 var ImplementingClass = new Class({  
      // 我所做的全部事情就是實現Baseclass  
      Implements : BaseClass


現在，我們就可以創建一個ImplementingClass的實例，並使用在BaseClass中定義的方法。 

var demo_one = function(){  
      // 創建一個ImplementingClass實例  
      var test_class = new ImplementingClass();  
      // 調用在BaseClass中定義的testFunction  
      test_class.testFunction();  
 }

你也可以對基類中的變量和初始化函數（構造函數）做同樣的事情。如果你在實施類（實現基類的類）中聲明了的話，每個你在基類中定義的東西就將被轉移到實施類中。

注意：從現在開始，我們下面所有的示例中將全部使用下面這個版本的BaseClass。 

var BaseClass = new Class({  
      // 把參數賦值給這個類中的inputVariable變量  
      initialize: function(input){  
          this.inputVariable = input;  
      },  
      // 顯示變量inputVariable的值  
      testFunction : function(){  
          alert('BaseClass.testFunction() : ' + this.inputVariable);  
      },  
      // 為這個類的所有實例定義一個內部變量  
      definedVariable : "Defined in BaseClass",  
 });  
 
 var ImplementingClass = new Class({  
      // 重複一遍：  
      // 這裡我們做的全部事情就只是實現BaseClass  
      Implements : BaseClass  
 });

下面的示例表明：初始化程序、函數調用和變量都可以被訪問到，就像它們是屬於這個實施類的。 

var demo_two = function(){  
      // 創建一個ImplementingClass實例  
      var test_class = new ImplementingClass('this is the input value');  
 
      // 調用testFunction()（在BaseClass中定義的）  
      test_class.testFunction();  
 
      // 顯示變量definedVariable的值  
      alert('test_class.testVariable : ' + test_class.definedVariable);  
 }

一旦你實現了一個類，你可以添加任何你想要的功能到你的實施類定義中。 

var ImplementingClass = new Class({  
      Implements : BaseClass,  
      // 下面的這些功能都在BaseClass中定義了  
      definedVariable : "Defined in ImplementingClass",  
      testFunction : function(){  
          alert('This function is also defined in BaseClass');  
      },  
 
      // 下面的這些都沒有在BaseClass中定義  
      anotherDefinedVariable : "Also Defined in ImplementingClass",  
      anotherTestFunction : function(){  
          alert('This function is defined in ImplementingClass');  
      }  
 });

請注意，我們在實施類中重新定義了testFunction和definedVariable，就像我們添加新的函數和變量一樣。特別需要注意的是：如果你想在實施類中定義一個已經在基類中定義了的函數或者變量，基類中的定義將會取代實施類中的定義。如果不明白，看看下面的例子就知道了。 

var demo_three = function(){  
      // 創建一個ImplementingClass實例  
      var test_class = new ImplementingClass('this is the input value');  
 
      // (執行BaseClass中定義的方法）  
      test_class.testFunction();  
 
      // 顯示變量definedVariable的值（BaseClass中定義的值）  
      alert('test_class.testVariable : ' + test_class.definedVariable);  
 
      // （ImplementingClass中定義的方法）  
      test_class.anotherTestFunction();  
 
      // 顯示變量anotherDefinedVariable的值（ImplementingClass中定義的值）  
      alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable);  
 }


Extends（擴展）

如果你想要覆蓋基類中定義的方法和變量，你可以使用Extends。簡單地把上面代碼中的「Implements」替換成「Extends」就可以了。 

var ExtendingClass = new Class({  
      // 注意這裡用Extends替代了Implements  
      Extends : BaseClass,  
      // 下面的這些都在BaseClass中定義了  
      // 但是我們用extend替代了implements  
      // 這將覆蓋在BaseClass中的定義  
      definedVariable : "Defined in ImplementingClass",  
      testFunction : function(){  
          alert('This function is also defined in BaseClass');  
      }  
 });  
 
 var demo_four = function(){  
      // 創建一個ImplementingClass實例  
      var test_class = new ExtendingClass('this is the input value');  
 
      // 調用testFunction()（同時在BaseClass和ExtendingClass中都有定義）  
      test_class.testFunction();  
 
      // 顯示變量definedVariable的值（同時在BaseClass和ExtendingClass中都有定義）  
      alert('test_class.definedVariable : ' + test_class.definedVariable);  
 }

使用extends的另外一個有用的功能是，它提供了一個功能：在覆蓋基類的初始化方法時，你仍然可以調用基類中的初始化方法。因此，如果你在基類中定義了一個這樣的初始化方法： 

initialize : function(){  
      alert('base class');


然後，在擴展類中定義了下面這樣一個初始化方法，那麼將會彈出兩個提示分別顯示「base class」和「extending class」。 

initialize : function(){  
      // 調用父類的構造函數  
      this.parent();  
      alert('extending class');

如果父類的初始化函數需要參數，請一定要確保在這個初始化函數中又相同的輸入參數並傳遞給父類的構造函數。在下面的示例中，請注意我們沒有給input指定任何值——我們只是把它傳遞給了父類的構造函數，它會自動管理好的。 

var ExtendingClass = new Class({  
      // 重複一遍：我們在使用擴展方法，而不是實現  
      Extends : BaseClass,  
      initialize: function(input){  
          // 通過調用this.parent來執行父類的初始化方法  
          this.parent(input);  
          // 這樣我們可以在初始化方法中做一些其他的事情  
          // 而不用完全覆蓋父類的方法  
          this.otherVariable = "Original Input Was : " + input;  
      }  
 });  
 
 var demo_five = function(){  
      // 創建我們的擴展類實例  
      var test_class = new ExtendingClass('this is the input value');       
 
      // 調用testFunction  
      test_class.testFunction();  
 
      // 顯示變量otherVariable的值  
      alert("test_class.otherVariable : " + test_class.otherVariable);  
 }


.implement()方法

你不僅可以使用implements和extends來擴展你的類定義，你還可以使用它們原有的類來一次添加一個功能。在下面的這個示例中，我們將 使用一個簡單的計算器類（calculator），定義這個類的時候，我們只給了它一個對兩個數字做加法運算和一個做減法運算的功能。 

var Calculator = new Class({  
      // 在初始化的時候指定兩個數字  
      initialize: function(first_number, second_number){  
          this.first   = first_number;  
          this.second = second_number;  
      },  
      // 把兩個數字相加  
      // 並返回結果  
      add : function(){  
          result = this.first + this.second;  
          alert(result);  
      },  
      // 把兩個數字相減  
      // 並返回結果  
      subtract : function(){  
          result = this.first - this.second;  
          alert(result);  
      }  
 
 });

如果你只是要對數字做加法或者減法運算，這一切看起來都很好，但是，如果你要對它們做乘法怎麼辦呢？使用.implement();方法，我們可以給這個類添加一個功能，就像我們已經創建了另外一個以Calculator類為基類的類一樣。 

var demo_six = function(){  
      // 為Calculator類實現  
      // 實現一個方法  
      Calculator.implement({  
          // 把兩個數字相乘  
          // 並返回結果  
          multiply : function(){  
              result = this.first * this.second;  
              alert(result);  
          }  
      });       
 
      // 建立一個Calculator類實例  
      var myCalculator = new Calculator(100, 50);  
 
      // 調用multiply方法  
      myCalculator.multiply();  
 }


在類教程的第一部分中，我們使用了print_r這個函數來調試javascript。使用implement方法，我們可以讓它非常輕鬆地打印出出一個類中的變量值，只要在Calculator中實現這個方法就行了。 


var demo_seven = function(){  
      // 為Calculator類實現一個方法  
      // 用來打印這個類裡面的內容  
      Calculator.implement({  
          show_class : function(){  
              alert(print_r(this, true));  
          }  
      });  
 
      // 建立一個Calculator類實例  
      var myCalculator = new Calculator(100, 50);  
 
      // 顯示類的詳細信息  
      myCalculator.show_class();


代碼示例

雖然很簡潔，不過這對於相對比較簡單的計算器這個類來說不是一個特別有用的功能。但是，由於MooTools裡面的大多數對象都是用相同的方式建立 的類，因此我們可以用這種方式來擴充MooTools的類，提供更多功能。下面的例子實現了一個功能，它可以顯示任何你想看的HTML的內容結構。這個功 能現在就被自動地添加到了任何與你交互的HTML元素，因此你可以給你的元素添加一個showStructure元素的完整描述。 

var demo_eight = function(){  
      Element.implement({  
          showStructure : function(){  
              var structure = '<pre>' + print_r(this, true) + '</pre>';  
              // 打開一個彈出窗口  
              newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes');  
              // 把內容寫入到彈出窗口中  
              newWindow.document.write(structure);  
          }  
      });  
 
      $('demo_eight').showStructure();

注意：要讓這個示例能正確顯示，你需要先允許該頁面彈出窗口。

 

更多學習

下載一個包含你開始所需要的所有東西的zip包（29.75 KB）

MooTools Class文檔

一些非常好的關於更好地利用MooTools類的討論

 

Mootools 教學列表：