搜索:
首页 >> JavaScript >> Js高级编程 >> javascript面向对象编程(三)

javascript面向对象编程(三)

2008-3-7 作者:canque 来源:CanQue@RSSIDEA 投递文章

阅读上一篇: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接口。

下一篇:javascript面向对象编程(四)

相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号