Mootools 1.2教程

Mootools1.2教程类(一)

时间:2015-07-13 19:40来源:网络整理 作者:KKWL 点击:
简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能。在一个内容牵涉较多的项目中,类会显得难以置信的有用。 变量 在前面

简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能。在一个内容牵涉较多的项目中,类会显得难以置信的有用。
变量
在前面一系列的课程中,我们已经学习过了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类来实现。
给你的类增加一个选项功能非常简单,就像给类添加一个其他的键值对一样:
参考代码:

复制代码 代码如下:

------分隔线----------------------------