Mootools 1.2教程 类(一)_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()参考

时间： 2024-09-23 08:02:09

Mootools 1.2教程 类(一)_Mootools的相关文章

Mootools 1.2教程(21)——类（二）_Mootools

Fdream注:原文好像少了一部分,因此我自作主张地补充了下面这一段及BaseClass的代码. 在今天的教程中,我们将主要学习一下MooTools中类的实现和继承(扩展).通过实现和继承,我们可以在子类中使用父类的方法,而不需要再重新声明和实现相同的方法.MooTools中的Class类可以帮助我们轻松地做到这一点.首先,我们定一个基类(base class). 参考代码: 复制代码 代码如下: var BaseClass = new Class({ // 定义一个方法testFunction

Mootools 1.2教程 事件处理_Mootools

今天我们开始第五讲,在上一讲(<Mootools 1.2教程(4)--函数>)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式.下一步就是理解事件了.和选择器类似,事件也是建立互动界面的一个重要部分.一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果.先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件. 左键单击事件 左键单击事件是web开发中最常见的事件.超链接识别点击事件,然后把你带到另外一个URL地址.MooTools能够识别其他DOM元素上的点击事

Mootools 1.2教程(2) DOM选择器_Mootools

如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

Mootools 1.2教程 排序类和方法简介_Mootools

Sortables类还提供了包括一个名叫"serialize"的优秀方法,通过这个方法你额可以把这些元素的id作为数组输出--对于服务器端的开发非常有用.接下来,我们看看如何创建一个新的排序项集合,还有一定要看一下最后的演示实例. 基本知识 创建一个新的Sortable对象 首先,我们要把我们要排序的元素赋值给变量.对于Sortables来说,如果你想要多个列表之间的元素能够在相互之间拖拽,你需要把这些元素全部都放在一个数组中,就像这样: 参考代码: 复制代码 代码如下: var so

Mootools 1.2教程 定时器和哈希简介_Mootools

定时器能比它表面看起来做更多的事情--定时能定期地触发一个函数.另一方面,hash则是键值对(key/value)的集合.如果你对hash还不熟悉现在也不要着急--我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接.就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用. .periodical()函数 基本用法 使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();,那样你的函数就会定时地触发.和以前的一样

Mootools 1.2教程 同时进行多个形变动画_Mootools

这在你给多个元素添加有相同选项的形变动画时非常有用.就像我们在第20讲中看到的最后一个例子一样. 基本用法 使用Fx.Elements的方法看起来和Fx.Morph差不多.这两者之间的区别在于.start({})方法和.set({})方法. 为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements. 参考代码: [复制代码] [保存代码] var fxElementsArray = $$('.myElementClass'); 现在我们就可以把我们的数组传递给Fx.Ele

Mootools 1.2教程 滑动效果（Slide）_Mootools

基本用法 就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例. 首先,让我们为滑动元素建立一个HTML文件. 参考代码: 复制代码 代码如下: <div id="slide_element" class="slide">这里是要滑动显示的内容.</div> 我们的CSS也不需要任何修饰. 参考代码: 复制代码 代码如下: .slide { margin: 20px 0;

Mootools 1.2教程(3) 数组使用简介_Mootools

今天,我们在来看看如何使用数组来管理DOM元素.基本方法 .each(); 在处理数组时,.each();方法是你最好的朋友.它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理.例如,我们可以假设你需要为页面中的每个div对象调用alert方法: 参考代码: 复制代码 代码如下: $$('div').each(function() { alert('a div'); }); 如果使用下面的HTML代码,上面的JavaScript代码将弹出两个alert对话

Mootools 1.2教程 设置和获取样式表属性_Mootools

欢迎开始这一系列的教程的第七讲.今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权.处理样式非常简单,不过今天我们要做一些调整.例如,我们要介绍键值对(key-value pair)对象.我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样.从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念.如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以