javascript面向对象编程（三）
作者：canque 来源：CanQue@RSSIDEA 时间：2008-03-07 13:19:00
阅读上一篇：javascript面向对象编程（二）
[Interface,Class.implement 接口及实现]
接口规定了一些方法，如果一个类实现了接口所定义的所有方法，就叫做实现了这个接口。诚然，javascript来模拟接口会带来一些效率上的损失，但是在大型项目特别是团队开发的时候，接口将带来很大的方便。使项目代码更加规范，更方便地查找错误信息。很多设计模式，像工厂模式、合成模式、装饰模式、命令模式等都依赖于接口来实现。
javascript模拟接口包括两部分:接口的模拟和接口实现的模拟。
[Interface接口类]
这段代码定义一个接口类，同样来自于《javascript design patterns》，略有改动。
// Constructor.
var Interface = function(name, methods){
if (arguments.length != 2) {
throw new Error("Interface constructor called with " + arguments.length +
"arguments, but expected exactly 2.");
}
this.name = name;
this.methods = [];
for (var i = 0, len = methods.length; i <len; i++) {
if (typeof methods[i] !== 'string') {
throw new Error("Interface constructor expects method names to be " +
"passed in as a string.");
}
this.methods.push(methods[i]);
}
};
[Interface.ensureImplements 接口实现检查]
这段代码检查一个对象是否实现了所要实现接口。
// Static class method.
Interface.ensureImplements = function(object){
if (arguments.length <2) {
throw new Error('Interface.ensureImplements:Wrong arguments number');
}
for (var i = 1, len = arguments.length; i <len; i++) {
var interfaces = arguments[i];
if (interfaces.constructor !== Interface) {
throw new Error("Function Interface.ensureImplements expects arguments " +
"two and above to be instances of Interface.");
}
for (var j = 0, methodLen = interfaces.methods.length; j <methodLen; j++) {
var method = interfaces.methods[j];
if (!object.prototype[method] || typeof(object.prototype[method]) !== 'function') {
throw new Error("Function Interface.ensureImplements: object " +
"does not implement the " +
interfaces.name +
" interface. Method " +
method +
" was not found.");
}
}
}
}
[Class.implement类实现接口]
接口定义后，还不能带来任何好处，需要在类中体现出来。看下面的两段代码就很清楚了：程序演示页面(3)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="JavaScript" src="http://rssidea.com/labs/OOP/OOP.js"></script>
<title>labs@RSSIDEA javascript OOP</title>
</head>
<body>
<script language="JavaScript">
//定义一个computer的接口，要求实现motherborad,memory,cpu,harddisk的方法。
var computer = new Interface('computer', ['motherboard', 'memory', 'cpu', 'harddisk'])
//定义一个PC类，实现computer接口
var PC = Class.create({
motherboardInfo: '',
memoryInfo: '',
cpuInfo: '',
harddiskInfo: '',
init: function(motherboard, memory, cpu, harddisk){
this.motherboardInfo = motherboard;
this.memoryInfo = memory;
this.cpuInfo = cpu;
this.harddiskInfo = harddisk;
},
motherboard: function(){
return this.motherboardInfo;
},
memory: function(){
return this.memoryInfo;
},
cpu: function(){
return this.cpuInfo;
},
mouse:function(){
return this.mouseInfo;
}
}).implement(computer);//浏览器报错,(没有硬盘电脑怎么转啊?)
var myComputer = new PC('微星主板', '现代2G', 'AMD3600+', '三星80G');
//输出电脑配置信息
trace(myComputer);
</script>
</body>
</html>
但是这段代码我们却得到一个浏览器错误，方法harddisk没有实现。（没有硬盘叫什么电脑啊？）
好吧，好吧！我承认是我拿买硬盘的钱去买了一个鼠标……（这鼠标不错吧？）
我原以为可以混过去，却被检查出来了。接口的工作和作用和上面的情况类似。现在，我需要再买个硬盘（harddisk）。程序演示页面(4)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="JavaScript" src="http://rssidea.com/labs/OOP/OOP.js"></script>
<title>labs@RSSIDEA javascript OOP</title>
</head>
<body>
<script language="JavaScript">
//定义一个computer的接口，要求实现motherborad,memory,cpu,harddisk的方法。
var computer = new Interface('computer', ['motherboard', 'memory', 'cpu', 'harddisk'])
//定义一个PC类，实现computer接口
var PC = Class.create({
motherboardInfo: '',
memoryInfo: '',
cpuInfo: '',
harddiskInfo: '',
init: function(motherboard, memory, cpu, harddisk){
this.motherboardInfo = motherboard;
this.memoryInfo = memory;
this.cpuInfo = cpu;
this.harddiskInfo = harddisk;
},
motherboard: function(){
return this.motherboardInfo;
},
memory: function(){
return this.memoryInfo;
},
cpu: function(){
return this.cpuInfo;
},
mouse:function(){
return this.mouseInfo;
},
harddisk:function(){
return this.harddiskInfo;
}//这是新买的硬盘
}).implement(computer);//实现了computer接口
var myComputer = new PC('微星主板', '现代2G', 'AMD3600+', '三星80G');
//输出电脑配置信息
trace(myComputer);
</script>
</body>
</html>
太好了！浏览器不再报错，这样，我们就实现了computer接口。
标签：面向对象,编程,oop,javascript
0
投稿猜你喜欢
Python进阶学习之特殊方法实例详析
2022-03-03 22:15:04
Vue 列表渲染 key的原理和作用详解
2024-05-03 15:11:21
PHP+Ajax简单get验证操作示例
2024-05-13 09:24:27
在NumPy中创建空数组/矩阵的方法
2023-11-02 05:30:35
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2023-04-03 04:19:06
Django的get_absolute_url方法的使用
2023-05-28 02:38:14
python http服务flask架构实用代码详解分析
2023-07-31 13:52:59
python 实现循环定义、赋值多个变量的操作
2023-10-24 08:44:20
django 2.2和mysql使用的常见问题
2024-01-27 17:40:02
Python超细致探究面向对象
2023-05-28 17:02:56
Firebug 必须掌握的技巧
2009-12-21 20:04:00
Python 条件判断的缩写方法
2021-04-20 16:06:20
在MySQL中使用通配符时应该注意的问题
2024-01-26 13:17:07
OpenCV+face++实现实时人脸识别解锁功能
2023-03-17 20:10:19
python3中编码获取网页的实例方法
2023-07-17 23:31:47
PHP实现的curl批量请求操作示例
2023-11-17 01:51:10
Python基于动态规划算法解决01背包问题实例
2021-01-10 21:22:26
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2023-01-07 14:20:26
Python3.10 Generator生成器Coroutine原生协程详解
2023-10-25 15:31:36
使用numpngw和matplotlib生成png动画的示例代码
2023-06-15 13:38:21