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 相关文章推荐
Jquery练习之表单验证实现代码
Dec 14 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
React key值的作用和使用详解
Aug 23 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
React中jquery引用的实现方法
2017/09/12 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
实例讲解JavaScript 计时事件
2020/07/04 Javascript
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python异常处理操作实例详解
2018/08/28 Python
python实现海螺图片的方法示例
2019/05/12 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
为什么需要版本控制?
2013/08/08 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Log4j.properties配置及其使用
2021/08/02 Java/Android