发布于 2016-12-16 04:35:17 | 102 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

MooTools JavaScript WEB应用框架

MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。 它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。 它提供了一个比普通js更面向对象的documentAPI。

---

今天我们将讲一下用MooTools来创建和使用类的一些基本知识。
简单地讲，一个类就是一个容器，这个容器包含了一些变量集合和操作这些变量的函数，以便实现特定的功能。在一个内容牵涉较多的项目中，类会显得难以置信的有用。
变量
在前面一系列的课程中，我们已经学习过了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(); 
// 设置第一个选项 
class_instance.setOptions({options_one : "Override First Option"}); 

一旦设置了选项，你就可以通过变量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包

MooTools Class文档MooTools Class.extra文档print_r()参考