夏日博客

A-A+

javascript中Interface接口用法

2016年10月13日 前端设计 评论 2 条 阅读 5 views 次

如何用面向对象的思想来写JavaScript，对于初学者应该是比较难的，我们经常用的JQuery其实也是用面向对象的思想去封装的，今天我们来看看如何在Javascript中用Interface，在C#还是JAVA中都应该面向接口设计我们的程序，在C#和Java中都Interface这样的关键字.

但是JavaScript中没有相应的机制，但是Javascript很灵活，我们可以用它的特性去模仿Interface，但是我们需要加入一些methods来做check的动作,我们还是可以使用程序来模拟JavaScript Interface接口的实现。一般来说，模拟Interface的实现有如下三种方法：

1.注释法——将接口的定义写在注释中，大家能否小心注意，以实现接口的所有方法全凭自觉.

2.属性检查法——自己说明我实现了哪些接口，一会儿你检查的时候记得检查我说我实现的接口里面，是否把我真正想要实现的接口全部实现了（这么别扭呢），总之就是自欺欺人.

3.鸭式辨型法——像鸭子一样,嘎嘎叫的那么就是鸭子。具有鸭子特性的东西,我们就可以称之为鸭子,能直立行走,会使用工具的除了机器人,都是人。嗯～～
按照书中介绍的,我们也一样彩注释法与鸭式辨型相结合的方法,来模拟Js的接口实现,代码如下:

  1. // Constructor  
  2. /* 
  3.  * @param name String 接口的名字 
  4.  * @param methods Array 接口里面定义的方法 
  5. */  
  6. var Interface = function(name, methods){  
  7.     //如果购造函数的参数不等于2个，那么抛出异常  
  8.     if (arguments.length != 2) {  
  9.         throw new Error("Interface constructor called with " + arguments.length +  
  10.         "arguments,but expected exactyl 2.")  
  11.     }  
  12.     this.name = name;  
  13.     this.methods = [];  
  14.     //方法数组，保证传进来的methods数组中，每一个元素都是字符串类型  
  15.     for (var i = 0, len = methods.length; i < len; i++) {  
  16.         if (typeof methods[i] !== "string") {  
  17.             throw new Error("Interface constructor expects methods names to bo " +  
  18.             "passed in asastring.");  
  19.         }  
  20.         this.methods.push(methods[i]);  
  21.     } //xiariboke.net  
  22. }  
  23. //Static class methods  
  24. Interface.ensureImplements = function(object){  
  25.         //如果参数少于2个，抛出异常，object是待判断实现接口的对象  
  26.         if (arguments.length < 2) {  
  27.                 throw new Error("Function Interface.ensureImplements called with " + arguments.length +  
  28.                 "arguments,but expected at least 2.");  
  29.         }  
  30.         for (var i = 1, len = arguments.length; i < len; i++) {  
  31.                 //inter_face为接口，一定要实现Interface类  
  32.                 //书中使用interface，因是JavaScript中保留字，所以暂替换为inter_face  
  33.                 var inter_face = arguments[i];  
  34.                 if (inter_face.constructor !== Interface) {  
  35.                         throw new Error("Function Interface.ensureImplementsexpects arguments " +  
  36.                         "two and above to be instances of Interface.");  
  37.                 }  
  38.                 for (var j = 0, methodsLen = inter_face.methods.length; j < methodsLen; j++) {  
  39.                         //对象中是否含有接口中定义的方法  
  40.                         var method = inter_face.methods[j];  
  41.                         if (!object[method] || typeof object[method] !== 'function') {  
  42.                                 throw new Error("Function Interface.ensureImplements: object " +  
  43.                                 "does not implements the " +  
  44.                                 inter_face.name +  
  45.                                 "interface.Method " +  
  46.                                 method +  
  47.                                 "was not found.");  
  48.                         }  
  49.                 }  
  50.         }  
  51. }  

可能大家比较晕，注释写在哪了？答，注释写在调用的页面上。例如：

  1. //定义接口Composite，实现add,remove,getChild三种方法  
  2. var Composite = new Interface('Composite',['add','remove','getChild']);  
  3. //定义接口FormItem,实现save方法  
  4. var FormItem = new Interface('FormItem',['save']);  
  5. //判断对象是否实现了上述两个接口  
  6. var object = new Class();  
  7. Interface.ensureImplements(object,Composite,FormItem);  

接口固然是好用，不过有的时候也要判断一下是否有必要用接口。这可是一项很难的工作啊。具体情况具体分析，决定权在你。

标签：

2 条留言  访客：2 条  博主：0 条

  1. 金蝶财务软件免费版 2016年10月13日 下午 3:28  -199楼  回复

    写的很详细，谢谢博主分享！

  2. 真我风采 2016年10月13日 下午 3:15  -198楼  回复

    技术活。

给我留言