[原创]JavaScript的接口设计初探

【声明】部分代码引用自<Javascipt Design Patterns>。

最近在看 <Javascipt Design Patterns> ，虽说纯english版的看起来有点费劲伤神，但还勉强的吸取了一点知识。精神上告诉我不能太心胸狭隘，所以拿出来一点点分享吧。另一方面也弥补我最近一直都没有写博。

我的计划是，一步步来将这个javascript设计模式汲取并且拿出来分享。那么我们的第一站，从javascript的接口讲起。

我们的服务端代码以Java语言举例，正好，这个语言与我们的javascript语言还有历史渊源。通常java语言的接口定义应该是这样滴：

public interface MyInterface{   
   String A();   
   void B();   
   int C();   
}   
  
//implements the interface MyInterface   
  
public class MyClass implements MyInterface{   
   public String A(){...}   
   public void B(){....}   
   public int C(){....}   
}

public interface MyInterface{   String A();   void B();   int C();}//implements the interface MyInterfacepublic class MyClass implements MyInterface{   public String A(){...}   public void B(){....}   public int C(){....}}

那我们的javascript中间如何来写接口呢？其实javascript中原本是没有接口的概念的。不过我们不要有这么“死”的想法，我们的脑子是灵活的，javascript语言也是灵活的。当初我们学c++的时候也没听说有接口啊。那么接口是什么呢？

在面向对象语言中，我们有了封装，怎样封装一个对象，那么需要封装属性和封装方法。这些方法往往代表着许多类似对象特有的方法。所以衍生出接口。其实简单：接口就是共有的方法定义。

其实方法本省类似一个没有属性，只有方法的对象。所以我们建立javascript接口要从这一点出发。现在我们应该有一些思路：我们需要建立一个Interface对象，然后我们在定义接口方法。最后我们会用实例对象实现这些接口。

1. 定义Interface对象：

 var Interface = function(){....}

2. 定义接口方法（只有方法名，没有方法体怎么实现呢？），这样在Interface中定义Methods数组来保存这些接口方法名称。

var Interface  = function(name,methods){ 

                                         this.name = name;

                                         this.methods  =[];

                                          .......

                                           }

3. 找个实例对象来实现接口，这javascript中不可能去实际的实现接口，只能这么做，规定了接口这样一个标准的方法系列。你每一个形态意识上实现他接口类都必须实现他的那些方法名称，即方法名称必须和接口一致。那么要使这样的工作严格起来，我们还有最后一件事要做。

4.接口方法的实现验证。即验证对象的方法名有没有把接口中的方法名都实现。这里我们会给Interface一个ensureImplements 方法，施行验证。

好了，现在开始抄代码：

//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("接口方法的名称必须是一个字符串“);   
        }   
        this.methods.push(methods[i]);   
    }   
};   
  
//Static class Method   
  
Interface.ensureImplements = function(object){   
    if(arguments.length<2){   
        throw new Error("方法 Interface.ensureImplemnents 指定了" + arguments.length+ "个参数，但是期望的是2个 .");   
    }   
    for(var i=1,len = arguments.length; i<len; i++){   
        var _interface = arguments[i];   
        if(_interface.constructor !== Interface){   
            throw new Error("方法 Interface.ensureImplements 期望两个或两个以上实例对象参数");   
        }   
           
        for(var j=0, methodsLen = _interface.methods.length; j<methodsLen;j++ ){   
            var method = _interface.methods[j];   
            if(!object[method]||typeof object[method] !== 'function'){   
                throw new Error("Function Interface.ensureImplements: object does not implements the "+_interface.name + "interface. Method "+ method + " was not found");   
            }   
        }   
    }   
};  
//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("接口方法的名称必须是一个字符串“);}this.methods.push(methods[i]);}};//Static class MethodInterface.ensureImplements = function(object){if(arguments.length<2){throw new Error("方法 Interface.ensureImplemnents 指定了" + arguments.length+ "个参数，但是期望的是2个 .");}for(var i=1,len = arguments.length; i<len; i++){var _interface = arguments[i];if(_interface.constructor !== Interface){throw new Error("方法 Interface.ensureImplements 期望两个或两个以上实例对象参数");}for(var j=0, methodsLen = _interface.methods.length; j<methodsLen;j++ ){var method = _interface.methods[j];if(!object[method]||typeof object[method] !== 'function'){throw new Error("Function Interface.ensureImplements: object does not implements the "+_interface.name + "interface. Method "+ method + " was not found");}}}};

这样，一个接口类就写好了，我们定义接口的方法如下：

var myInterface = new Interface('myInterface',['methodA','methodB','methodC']);   
  
//这里的myInterface 是接口名称，methodA~methodC 就是定义的接口  
var myInterface = new Interface('myInterface',['methodA','methodB','methodC']);//这里的myInterface 是接口名称，methodA~methodC 就是定义的接口

Next~~ 我们来实现接口~~

/**  
 * design interface  
 */  
  
var MyInterface = new Interface('MyInterface',['A','B','C']);   
  
/**  
 * implements the methods of the interface  
 */  
  
var MyObject = function(name){   
    this.name = name;   
}   
MyObject.prototype.A = function(){   
    alert('A');   
}   
MyObject.prototype.B = function(){   
    alert('B');   
}   
MyObject.prototype.C = function(){   
    alert('C');   
}   
MyObject.prototype.D = function(){   
    alert('another method D');   
}   
  
window.onload = function(){   
    var myObj = new MyObject('jgx');   
    Interface.ensureImplements(myObj,MyInterface);   
    myObj.D();   
}  
/** * design interface */var MyInterface = new Interface('MyInterface',['A','B','C']);/** * implements the methods of the interface */var MyObject = function(name){this.name = name;}MyObject.prototype.A = function(){alert('A');}MyObject.prototype.B = function(){alert('B');}MyObject.prototype.C = function(){alert('C');}MyObject.prototype.D = function(){alert('another method D');}window.onload = function(){var myObj = new MyObject('jgx');Interface.ensureImplements(myObj,MyInterface);myObj.D();}

把这些放入网页中试试

<html>   
<head>   
    <title>test</title>   
   <script type="text/javascript" src="Interface.js"></script>   
   <script type="text/javascript" src="implements.js"></script>   
</head>   
<body></body>   
</html>  
<html><head>    <title>test</title>   <script type="text/javascript" src="Interface.js"></script>   <script type="text/javascript" src="implements.js"></script></head><body></body></html>

ok ~~~我该休息了~~

结束语：

我一定还会回来的~~

posted @ 2011-04-05 23:08 江心逐浪阅读(968) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

[原创]JavaScript的接口设计初探

公告