MooTools - 類

MooTools 包含不同 API 的類。瞭解使用 MooTools 建立和使用類的基礎知識。類是用於儲存一系列變數和函式的容器，這些變數和函式操作這些變數以執行特定任務。

讓我們詳細討論變數、方法和選項。

變數

建立變數是一項非常簡單的任務。它就像在雜湊表中宣告鍵值對一樣。同樣，您可以以相同的方式訪問變數，這意味著<類名.變數>。請檢視以下在類中建立和訪問變數的語法。

語法

//Create a new class named class_one
//with two internal variables
var Class_one = new Class({
   variable_one : "I'm First",
   variable_two : "I'm Second"
});
var run_demo_one = function(){
   //instantiate a Class_one class called demo_1
   var demo_1 = new Class_one();

   //Display the variables inside demo_one
   alert( demo_1.variable_one );
   alert( demo_1.variable_two );
}

方法

通常，方法是一個使用屬於特定類的指令集的函式。您可以使用類的例項來呼叫這些函式。還有一點，當您想在函式中呼叫例項變數時，必須使用this關鍵字。請檢視以下建立和訪問方法的語法。

語法

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);
   }
});

var run_demo_2 = function(){
   //Instantiate a version of class_two
   var demo_2 = new Class_two();
   
   //Call function_one
   demo_2.function_one();
   
   //Call function_two
   demo_2.function_two();
}

初始化

initialize 是類物件中的一個選項。這有助於您建立類設定，這也有助於您設定使用者配置選項和變數。請檢視以下 initialize 選項的語法。

語法

var Myclass = new Class({
   //Define an initalization function with one parameter
   initialize : function(user_input){
      //create a value variable belonging to
      //this class and assign it the value
      //of the user input
      this.value = user_input;
   }
})

實現選項

實現選項對於接受使用者輸入和構建類非常有用。向您的類新增選項功能就像向類的初始化選項新增另一個鍵值對一樣簡單。完成此設定後，您可以透過傳遞鍵值對來覆蓋任何或所有預設選項。它提供 setOptions 方法。此方法允許您在類初始化後設置選項。如果要從類內部訪問變數，請使用以下語法。

語法

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();
}

//Create a new class_four class with
//a new option called new_variable
var run_demo_6 = function(){
   var demo_6 = new Class_four({new_option : "This is a new option"});
   demo_6.show_options();
}