MooTools - 类

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

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

变量

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

语法

//创建一个名为 class_one 的新类
//具有两个内部变量
var Class_one = new Class({
    variable_one : "I'm First",
    variable_two : "I'm Second"
});
var run_demo_one = function(){
    //实例化一个名为 demo_1 的 Class_one 类
    var demo_1 = new Class_one();
    
    //显示 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(){
//实例化 class_two 的一个版本
var demo_2 = new Class_two();

//调用 function_one
demo_2.function_one();

//调用 function_two
demo_2.function_two();
}

initialize

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

语法

var Myclass = new Class({
    //定义一个带有一个参数的初始化函数
    initialize : function(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 + "
" + 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_variable 的新选项
var run_demo_6 = function(){
   var demo_6 = new Class_four({new_option : "This is a new option"});
   demo_6.show_options();
}