Mootools 1.2教程 类(一)


Posted in Javascript onSeptember 15, 2009

简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能。在一个内容牵涉较多的项目中,类会显得难以置信的有用。
变量
在前面一系列的课程中,我们已经学习过了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()参考
Javascript 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
Mootools 1.2 手风琴(Accordion)教程
Sep 15 #Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 #Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 #Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 #Javascript
Mootools 1.2教程 正则表达式
Sep 15 #Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 #Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 #Javascript
You might like
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
Javascript String.replace的妙用
2009/09/08 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Vue header组件开发详解
2018/01/26 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 多线程应用介绍
2012/12/19 Python
使用python实现knn算法
2017/12/20 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python虚拟环境迁移方法
2019/01/03 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python collections模块使用方法详解
2019/08/28 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python实现批量转换图片为黑白
2020/06/16 Python
初中考试作弊检讨书
2014/02/01 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js