MooTools - 类


MooTools 包含不同 API 的类。了解通过 MooTools 创建和使用类的基础知识。类是变量和函数集合的容器,这些变量和函数对这些变量进行操作以执行特定任务。

让我们详细讨论变量、方法和选项。

变量

创建变量是一项非常简单的任务。这就像在哈希中声明键/值对。同样,您可以以相同的方式访问变量,这意味着 < class_name.variable >。看一下以下用于在类中创建和访问变量的语法。

句法

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

初始化

初始化是类对象中的一个选项。这可以帮助您创建类设置。这还可以帮助您设置用户配置选项和变量。看一下初始化选项的以下语法。

句法

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