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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
手机端转换rem适应
Apr 01 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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检测useragent版本示例
2014/03/24 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
日语求职信范文
2013/12/17 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
民生工程实施方案
2014/03/22 职场文书
终止劳动合同协议书
2014/10/05 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
男方婚礼答谢词
2015/01/20 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
社区服务活动感想
2015/08/11 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android