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 相关文章推荐
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
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中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python中用max()方法求最大值的介绍
2015/05/15 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python+opencv实现阈值分割
2018/12/26 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
python中%格式表达式实例用法
2021/06/18 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫