Mootools 1.2教程(21)——类(二)


Posted in Javascript onSeptember 15, 2009

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

var BaseClass = new Class({ 
// 定义一个方法testFunction 
// 这个方法弹出一个对话框 
testFunction : function(){ 
alert('This function is defined in BaseClass'); 
} 
});

现在,我们已经有了一个基类(base class),我们可以通过创建一个新类来实现它从而使用它的全部功能。注意,在下面的例子中,我们的新类没有做任何事情,而只是实现了基类BaseClass。
参考代码:
// 创建一个名叫ImplementingClass的类 
var ImplementingClass = new Class({ 
// 我所做的全部事情就是实现Baseclass 
Implements : BaseClass 
});

现在,我们就可以创建一个ImplementingClass的实例,并使用在BaseClass中定义的方法。
参考代码:
var demo_one = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ImplementingClass(); 
// 调用在BaseClass中定义的testFunction 
test_class.testFunction(); 
}

demo_one()
你也可以对基类中的变量和初始化函数(构造函数)做同样的事情。如果你在实施类(实现基类的类)中声明了的话,每个你在基类中定义的东西就将被转移到实施类中。
注意:从现在开始,我们下面所有的示例中将全部使用下面这个版本的BaseClass。
参考代码:
var BaseClass = new Class({ 
// 把参数赋值给这个类中的inputVariable变量 
initialize: function(input){ 
this.inputVariable = input; 
}, 
// 显示变量inputVariable的值 
testFunction : function(){ 
alert('BaseClass.testFunction() : ' + this.inputVariable); 
}, 
// 为这个类的所有实例定义一个内部变量 
definedVariable : "Defined in BaseClass", 
}); 
var ImplementingClass = new Class({ 
// 重复一遍: 
// 这里我们做的全部事情就只是实现BaseClass 
Implements : BaseClass 
});

下面的示例表明:初始化程序、函数调用和变量都可以被访问到,就像它们是属于这个实施类的。
参考代码:
var demo_two = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ImplementingClass('this is the input value'); 
// 调用testFunction()(在BaseClass中定义的) 
test_class.testFunction(); 
// 显示变量definedVariable的值 
alert('test_class.testVariable : ' + test_class.definedVariable); 
}

demo_two()
一旦你实现了一个类,你可以添加任何你想要的功能到你的实施类定义中。
参考代码:
var ImplementingClass = new Class({ 
Implements : BaseClass, 
// 下面的这些功能都在BaseClass中定义了 
definedVariable : "Defined in ImplementingClass", 
testFunction : function(){ 
alert('This function is also defined in BaseClass'); 
}, 
// 下面的这些都没有在BaseClass中定义 
anotherDefinedVariable : "Also Defined in ImplementingClass", 
anotherTestFunction : function(){ 
alert('This function is defined in ImplementingClass'); 
} 
});

请注意,我们在实施类中重新定义了testFunction和definedVariable,就像我们添加新的函数和变量一样。特别需要注意的是:如果你想在实施类中定义一个已经在基类中定义了的函数或者变量,基类中的定义将会取代实施类中的定义。如果不明白,看看下面的例子就知道了。
参考代码:
var demo_three = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ImplementingClass('this is the input value'); 
// (执行BaseClass中定义的方法) 
test_class.testFunction(); 
// 显示变量definedVariable的值(BaseClass中定义的值) 
alert('test_class.testVariable : ' + test_class.definedVariable); 
// (ImplementingClass中定义的方法) 
test_class.anotherTestFunction(); 
// 显示变量anotherDefinedVariable的值(ImplementingClass中定义的值) 
alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable); 
}

demo_three()
Extends(扩展)
如果你想要覆盖基类中定义的方法和变量,你可以使用Extends。简单地把上面代码中的“Implements”替换成“Extends”就可以了。
参考代码:
var ExtendingClass = new Class({ 
// 注意这里用Extends替代了Implements 
Extends : BaseClass, 
// 下面的这些都在BaseClass中定义了 
// 但是我们用extend替代了implements 
// 这将覆盖在BaseClass中的定义 
definedVariable : "Defined in ImplementingClass", 
testFunction : function(){ 
alert('This function is also defined in BaseClass'); 
} 
}); 
var demo_four = function(){ 
// 创建一个ImplementingClass实例 
var test_class = new ExtendingClass('this is the input value'); 
// 调用testFunction()(同时在BaseClass和ExtendingClass中都有定义) 
test_class.testFunction(); 
// 显示变量definedVariable的值(同时在BaseClass和ExtendingClass中都有定义) 
alert('test_class.definedVariable : ' + test_class.definedVariable); 
}

demo_four()
使用extends的另外一个有用的功能是,它提供了一个功能:在覆盖基类的初始化方法时,你仍然可以调用基类中的初始化方法。因此,如果你在基类中定义了一个这样的初始化方法:
参考代码:
initialize : function(){ 
alert('base class'); 
}

然后,在扩展类中定义了下面这样一个初始化方法,那么将会弹出两个提示分别显示“base class”和“extending class”。
参考代码:
initialize : function(){ 
// 调用父类的构造函数 
this.parent(); 
alert('extending class'); 
}

如果父类的初始化函数需要参数,请一定要确保在这个初始化函数中又相同的输入参数并传递给父类的构造函数。在下面的示例中,请注意我们没有给input指定任何值——我们只是把它传递给了父类的构造函数,它会自动管理好的。
参考代码:
var ExtendingClass = new Class({ 
// 重复一遍:我们在使用扩展方法,而不是实现 
Extends : BaseClass, 
initialize: function(input){ 
// 通过调用this.parent来执行父类的初始化方法 
this.parent(input); 
// 这样我们可以在初始化方法中做一些其他的事情 
// 而不用完全覆盖父类的方法 
this.otherVariable = "Original Input Was : " + input; 
} 
}); 
var demo_five = function(){ 
// 创建我们的扩展类实例 
var test_class = new ExtendingClass('this is the input value'); 
// 调用testFunction 
test_class.testFunction(); 
// 显示变量otherVariable的值 
alert("test_class.otherVariable : " + test_class.otherVariable); 
}

demo_five()
.implement()方法
你不仅可以使用implements和extends来扩展你的类定义,你还可以使用它们原有的类来一次添加一个功能。在下面的这个示例中,我们将使用一个简单的计算器类(calculator),定义这个类的时候,我们只给了它一个对两个数字做加法运算和一个做减法运算的功能。
参考代码:
var Calculator = new Class({ 
// 在初始化的时候指定两个数字 
initialize: function(first_number, second_number){ 
this.first = first_number; 
this.second = second_number; 
}, 
// 把两个数字相加 
// 并返回结果 
add : function(){ 
result = this.first + this.second; 
alert(result); 
}, 
// 把两个数字相减 
// 并返回结果 
subtract : function(){ 
result = this.first - this.second; 
alert(result); 
} 
});

如果你只是要对数字做加法或者减法运算,这一切看起来都很好,但是,如果你要对它们做乘法怎么办呢?使用.implement();方法,我们可以给这个类添加一个功能,就像我们已经创建了另外一个以Calculator类为基类的类一样。
参考代码:
var demo_six = function(){ 
// 为Calculator类实现 
// 实现一个方法 
Calculator.implement({ 
// 把两个数字相乘 
// 并返回结果 
multiply : function(){ 
result = this.first * this.second; 
alert(result); 
} 
}); 
// 建立一个Calculator类实例 
var myCalculator = new Calculator(100, 50); 
// 调用multiply方法 
myCalculator.multiply(); 
}

demo_six()
在类教程的第一部分中,我们使用了print_r这个函数来调试javascript。使用implement方法,我们可以让它非常轻松地打印出出一个类中的变量值,只要在Calculator中实现这个方法就行了。
参考代码:
var demo_seven = function(){ 
// 为Calculator类实现一个方法 
// 用来打印这个类里面的内容 
Calculator.implement({ 
show_class : function(){ 
alert(print_r(this, true)); 
} 
}); 
// 建立一个Calculator类实例 
var myCalculator = new Calculator(100, 50); 
// 显示类的详细信息 
myCalculator.show_class(); 
}

demo_seven()
代码示例
虽然很简洁,不过这对于相对比较简单的计算器这个类来说不是一个特别有用的功能。但是,由于MooTools里面的大多数对象都是用相同的方式建立的类,因此我们可以用这种方式来扩充MooTools的类,提供更多功能。下面的例子实现了一个功能,它可以显示任何你想看的HTML的内容结构。这个功能现在就被自动地添加到了任何与你交互的HTML元素,因此你可以给你的元素添加一个showStructure元素的完整描述。
参考代码:
var demo_eight = function(){ 
Element.implement({ 
showStructure : function(){ 
var structure = '<pre>' + print_r(this, true) + '</pre>'; 
// 打开一个弹出窗口 
newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes'); 
// 把内容写入到弹出窗口中 
newWindow.document.write(structure); 
} 
}); 
$('demo_eight').showStructure(); 
}

注意:要让这个示例能正确显示,你需要先允许该页面弹出窗口。

更多学习

下载一个包含你开始所需要的所有东西的zip包

MooTools Class文档

一些非常好的关于更好地利用MooTools类的讨论

Javascript 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
JS中字符串trim()使用示例
May 26 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
js实现日历与定时器
Feb 22 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
create-react-app开发常用配置教程
Jun 25 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 #Javascript
Mootools 1.2教程 Tooltips
Sep 15 #Javascript
Mootools 1.2教程 类(一)
Sep 15 #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
You might like
php调用Google translate_tts api实现代码
2013/08/07 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
Python函数返回值实例分析
2015/06/08 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python创建或生成列表的操作方法
2019/06/19 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
药店主任岗位责任制
2014/02/10 职场文书
个人函授自我鉴定
2014/03/25 职场文书
外国人聘用意向书
2014/04/01 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
小学生读书笔记范文
2015/06/30 职场文书
员工试用期工作总结
2019/06/20 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
python 实现体质指数BMI计算
2021/05/26 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android