Menu

30天學會 MooTools 教學(18): Class 類(第一部分)

今天我們將講一下用MooTools來創建和使用類(class)的一些基本知識。

簡單地講，一個類就是一個容器，這個容器包含了一些變量集合和操作這些變量的函數，以便實現特定的功能。在一個內容牽涉較多的項目中，類會顯得難以置信的有用。

 

變量

在前面一系列的課程中，我們已經學習過了Hash對象中鍵值對（key/value pair）的使用方式，因此，下面的這個例子中創建了一個類，它只包含了一些變量，你看起來可能會覺得非常的熟悉： 

// 創建一個名為class_one的類  
 // 包含兩個內部變量  
 var Class_one = new Class({  
      variable_one : "I'm First",  
      variable_two : "I'm Second"  
 });

類似地，你可以通過類似訪問hash中的變量的方式來訪問其中的變量，注意一下，在下面的代碼中，我們創建了一個我們在上面定義的Class_one類的實例。 

var run_demo_one = function(){  
      // 創建類Class_one的一個實例，名稱為demo_1  
      var demo_1 = new Class_one();  
      // 顯示demo_1中的變量  
      alert( demo_1.variable_one );  
      alert( demo_1.variable_two );
    

方法/函數

方法是指一個指定的類中的函數（通俗地說就是一個類中的函數就叫做方法，換了個叫法而已）。這些方法必須通過這個類的實例來調用，而類本身不能調用它們。你可以像定義一個變量來定義一個方法，不同的是你需要給它指定一個靜態的值，給它指定一個匿名函數： 

var Class_two = new Class({  
      variable_one : "I'm First",  
      variable_two : "I'm Second",  
      function_one : function(){  
          alert('First Value : ' + this.variable_one);  
          },  
      function_two : function(){  
          alert('Second Value : ' + this.variable_two);  
      }  
 });

注意一下上面例子中的關鍵字this的使用。由於在上面的方法中操作的變量都是類內部的變量，因此你需要通過使用關鍵字this來訪問這些變量，否則你將只能得到一個undefined值。 

// 正確  
 working_method : function(){  
      alert('First Value : ' + this.variable_one);  
 },  
 // 錯誤  
 broken_method : function(){  
      alert('Second Value : ' + variable_two);  
 }

調用新創建的類中的方法就像訪問那些類的變量一樣。 

var run_demo_2 = function(){  
      // 實例化一個類class_two  
      var demo_2 = new Class_two();  
      // 調用function_one  
      demo_2.function_one();  
      // 調用function_two  
      demo_2.function_two();  
 }


initialize方法

類對象中的initialize選項可以讓你來對類進行一些初始化操作，也可以讓你來處理一些可供用戶設置的選項和變量。（Fdream註：實際上這個就相當於類的初始化方法。）你可以像定義方法一樣來定義它： 

var Myclass = new Class({  
      // 定義一個包含一個參數的初始化方法  
      initialize : function(user_input){  
          // 創建一個屬於這個類的變量  
          // 並給它賦值  
          // 值為用戶傳進來的值  
          this.value = user_input;  
      }


你也可以通過這個初始化來改變其他的選項或者行為： 

var Myclass = new Class({  
      initialize : function(true_false_value){  
          if (true_false_value){  
              this.message = "Everything this message says is true";  
          }  
          else {  
              this.message = "Everything this message says is false";  
          }  
      }  
 })  
 
 // 這將設置myClass實例的message屬性為下面的字符串  
 // "Everything this message says is true"  
 var myclass_instance = new Myclass(true);  
 
 // 這將設置myClass實例的message屬性為下面的字符串  
 // "Everything this message says is false"  
 var myclass_instance = new Myclass(false);

所有的這一切工作都不需要聲明任何其他變量或者方法。只需要記住每個鍵值對後面的逗號就行了。真的是非常容易漏掉一個逗號，然後花費大量的時間來追蹤這些不存在的漏洞。 

var Class_three = new Class({  
      // 當類創建的時候就會執行這個類  
      initialize : function(one, two, true_false_option){  
          this.variable_one = one;  
          this.variable_two = two;  
          if (true_false_option){  
              this.boolean_option = "True Selected";  
          }  
          else {  
              this.boolean_option = "False Selected";  
          }  
      },  
      // 定義一些方法  
      function_one : function(){  
          alert('First Value : ' + this.variable_one);  
          },  
      function_two : function(){  
          alert('Second Value : ' + this.variable_two);  
      }       
 });  
 
 var run_demo_3 = function(){  
      var demo_3 = new Class_three("First Argument", "Second Argument");  
      demo_3.function_one();  
      demo_3.function_two();  
 }


實現選項功能

當創建類的時候，給類中的一些變量設置一些默認值會非常有用，如果用戶沒有提供初始輸入的話。你可以手動地在初始化方法中設置這些變量，檢查每一個 輸入來看用戶是不是提供了相應的值，然後替換相應的默認值。或者，你也可以使用MooTools中Class.extras提供的Options類來實現。

給你的類增加一個選項功能非常簡單，就像給類添加一個其他的鍵值對一樣： 

var Myclass = new Class({  
      Implements: Options

首先不要太著急實現選項的細節問題，我們會在後面的教程中更深入的學習。現在，我們已經擁有一個有選項功能的類了，我們還需要做的就是定義一些默認 的選項。和其他的所有東西一樣，只需要添加一些需要初始化的鍵值對就可以了。與定義單個值不一樣的是，你需要像下面這樣定義一組鍵值對集合： 

var Myclass = new Class({  
      Implements: Options,  
      options: {  
          option_one : "First Option",  
          option_two : "Second Option"  
      }

現在我們就有了這些默認的集合，我們還需要提供一個方式來供用戶在初始化這個類的時候覆蓋這些默認值。你所要做的工作就是在你的初始化函數中增加一行新的代碼，而Options類會完成其餘的工作： 

var Myclass = new Class({  
      Implements: Options,  
      options: {  
          option_one : "First Default Option",  
          option_two : "Second Default Option"  
      }  
      initialize: function(options){  
          this.setOptions(options);  
      }  
 })

一旦這個完成以後，你就可以通過傳遞一組鍵值對來覆蓋任何默認選項： 

// 覆蓋所有的默認選項  
 var class_instance = new Myclass({  
      options_one : "Override First Option",     
      options_two : "Override Second Option"  
      });  
 
 // 覆蓋其中的一個默認選項  
 var class_instance = new Myclass({  
      options_two : "Override Second Option"  
 })

注意一下初始化函數中的setOptions方法。這是Options類中提供的一個方法，可以讓你在實例化一個類的時候設置選項。 

var class_instance = new Myclass();  
 // 設置第一個選項

一旦設置了選項，你就可以通過變量options來訪問它們。 

var class_instance = new Myclass();  
 // 取得第一個選項的值  
 var class_option = class_instance.options.options_one;  
 // 變量class_option現在的值就為"First Default Option"了

如果你想在類的內部訪問這個選項，請使用this語句： 

var Myclass = new Class({  
      Implements: Options,  
      options: {  
          option_one : "First Default Option",  
          option_two : "Second Default Option"  
      }  
      test : function(){  
          // 注意我們使用this關鍵字來  
          // 引用這個類  
          alert(this.option_two);  
      }  
 });  
 
 var class_instance = new Myclass();  
 // 將彈出一個對話框，顯示"Second Default Option"  
 class_instance.test();

把這些東西組合成一個類，看起來就是這樣的： 

var Class_four = new Class({       
      Implements: Options,  
      options: {  
          option_one : "Default Value For First Option",  
          option_two : "Default Value For Second Option",  
      },  
      initialize: function(options){  
          this.setOptions(options);  
      },      
      show_options : function(){  
          alert(this.options.option_one + "\n" + this.options.option_two);  
      },  
 });  
 
 var run_demo_4 = function ){  
      var demo_4 = new Class_four({  
          option_one : "New Value"  
          });  
      demo_4.show_options();  
 }  
 
 var run_demo_5 = function(){  
      var demo_5 = new Class_four();  
      demo_5.show_options();  
      demo_5.setOptions({option_two : "New Value"});  
      demo_5.show_options();  
 }  
 
 // 創建一個類class_four的實例  
 // 並指定一個名叫new_option的新選項  
 var run_demo_6 = function(){  
      var demo_6 = new Class_four({new_option : "This is a new option"});  
      demo_6.show_options();  
 }


代碼及示例

熟悉PHP的人可能認識下面示例中的show_options方法中的print_r()函數： 

show_options : function(){  
      alert(print_r(this.options, true));

這不是一個javascript的原生方法，只不過是從PHP2JS項目中Kevin van Zonneveld的一小段代碼而已。對於那些不熟悉PHP的人，這個print_r()方法就給你了一個數組中鍵值對格式化後的字符串。在調試腳本的過程中，這是一個極其有用的debug工具，這個函數在後面提供的下載包中有詳細的代碼，我強烈推薦使用它來測試和研究。 


var Class_five = new Class({  
      // 我們使用了選項  
      Implements: Options,  
      // 設置我們的默認選項  
      options : {  
          option_one : "DEFAULT_1",  
          option_two : "DEFAULT_2",       
      },  
      // 設置我們的初始化函數  
      // 通過setOptions方法來設置選項  
      initialize : function(options){  
          this.setOptions(options);  
      },  
      // 用來打印選項數組信息的方法  
         show_options : function(){  
             alert(print_r(this.options, true));  
         },  
      // 通過setOptions方法來交換兩個選項的值  
      swap_options : function(){  
          this.setOptions({  
              option_one : this.options.option_two,  
              option_two : this.options.option_one  
          })  
      }  
 });  
 
 function demo_7(){  
      var demo_7 = new Class_five();  
      demo_7.show_options();  
      demo_7.setOptions({option_one : "New Value"});  
      demo_7.swap_options();  
      demo_7.show_options();


更多學習

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

其他資源：

 

Mootools 教學列表：