什么是接口

接口提供了一种用以说明一个对象应该具有哪些方法的手段。

接口之利

1.接口具有自我描述性从而促进代码的重用

2.接口有助于稳定不同中的类之间的通信方式

3.测试和调试也变得更轻松

接口之弊

1.在一定程度上强化了类型的作用

2.js中没有内置的interface,实现它会增加复杂度

3.实现接口会对性能造成一定的影响

4.无法强迫其他程序员遵守你定义的接口

三种方法在JS中模仿接口

注释法(这只是一种文档规范)

  1. /*
  2. interface Composite{
  3. function add(child);
  4. function remove(child);
  5. function getChild(index);
  6. }
  7. interface fromItem{
  8. function save();
  9. }
  10. */
  11. var CompositeForm = function(id, method, action){
  12. ...
  13. };
  14. CompositeForm.prototype.add = function(){
  15. ...
  16. };
  17. CompositeForm.prototype.remove = function(){
  18. ...
  19. };
  20. CompositeForm.prototype.getChild = function(){
  21. ...
  22. };
  23. CompositeForm.prototype.save = function(){
  24. ...
  25. };

这种方法没有确保对象真正实现了正确的方法集而进行检查,也不会抛出错误以告知程序中有问题。

用属性检查模仿接口

  1. /*
  2. interface Composite{
  3. function add(child);
  4. function remove(child);
  5. function getChild(index);
  6. }
  7. interface fromItem{
  8. function save();
  9. }
  10. */
  11. var CompositeForm = function(id, method, action){
  12. this.implementsInterfaces = ['Composite', 'FormItem']; //声明自己继承的接口
  13. ...
  14. };
  15. ...
  16. function addForm(formInstance){
  17. if(!implements(formInstance, 'Composite', 'FormItem')){ //检查实例formInstance是否实现了接口
  18. throw new Error('Object does not implement a required interface');
  19. }
  20. }
  21. function implements(object){ //检查算法,双重循环
  22. for(var i=1; i<arguments.length; i++){
  23. var interfaceName = arguments[i];
  24. var interfaceFound = false;
  25. for(var j=0; j<object.implementsInterfaces.length; j++){
  26. if(object.implementsInterfaces[j] == interfaceName){
  27. interfaceFound = true;
  28. break;
  29. }
  30. }
  31. if(!interfaceFound){
  32. return false;
  33. }
  34. }
  35. return true;
  36. }

这种做法是只知其表不知其里。

用鸭式辨型模仿接口

类是否声明自己支持哪些接口并不重要,只要它具有这些接口中的方法就行。

  1. var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); //声明接口拥有的方法
  2. var FormItem = new Interface('FormItem', ['save']); //声明接口拥有的方法
  3.  
  4. var compositeForm = function(id, method, action){//implements Composite, FormItem
  5. ...
  6. };
  7. ...
  8. function addForm(formInstance){
  9. ensureImplements(formInstance, Composite, formItem);
  10. ...
  11. }
  12.  
  13. //Constructor
  14. var Interface = function(name, methods){ //将接口的方法保存在this.methods中用以将来的检测
  15. if(arguments.length != 2){
  16. throw new Error('Interface constructor called with '+arguments.legth+
  17. " arguments, but exected exactly 2.");
  18. }
  19.  
  20. this.name = name;
  21. this.methods = [];
  22. for(var i=0, len = methods.length; i<len; i++){
  23. if(typeof methods[i] !== 'string'){
  24. throw new Error('Interface constructor expects method names to be passed in as a string.');
  25. }
  26. this.methods.push(methods[i]);
  27. }
  28. };
  29. Interface.ensureImplements = function(object){
  30. if(arguments.length < 2){
  31. throw new Error('Function Interface.ensureImplements called with'+arguments.length+
  32. "arugments, but expected at least 2.");
  33. }
  34. for (var i=0, len=arugments.length; i<len; i++){
  35. var intf = arguments[i];
  36. if(intf.constructor !== Interface){
  37. throw new Error('Function Interface.ensureImplements expects arguments'+
  38. "two and above to be instances of Interface.");
  39. }
  40. for(var j=0; methodsLen = intf.methods.length; j<methodsLen; j++){ //通过methods检查实例是否实现了接口
  41. if(!object[method] || typeof object[method]!=='function'){
  42. throw new Error('Function Interface.ensureImplements:object'+
  43. " doesnot implement the"+intf.name+
  44. " interface. Method"+method+" was not found!");
  45. }
  46. }
  47. }
  48. };

嗯,这个方法还正规一点。但是要借助其它两个类,也没有声明自己实现哪了些接口,降低了重用性。

一个例子

这个例子确保我们在调用对象的方法时,它已经实现了相应的接口的方法。

  1. var DynamicMap = new Interface('DynamicMap', ['centerOnPoint', 'zoom', 'draw']);
  2. function displayRoute(mapInstance){
  3. Interface.ensureImplements(mapInstance, DynamicMap);
  4. mapInstance.centerOnPoint(12,34);
  5. mapInstance.zoom(5);
  6. mapInstance.draw();
  7. ...
  8. }

JS设计模式——2.初识接口的更多相关文章

  1. js 设计模式-接口

    js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...

  2. 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

    一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...

  3. 读书笔记:js设计模式

    面向过程编程,面向对象编程和函数式编程> 定义一个类方法1:function Anim(){ } Anim.prototype.start = function(){ .. };Anim.pro ...

  4. js设计模式总结1

    js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...

  5. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

  6. JS设计模式(一)

    刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...

  7. js设计模式(12)---职责链模式

    0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...

  8. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  9. js设计模式系列之(一)请节约你的请求-代理模式

    What’s the proxy pattern? 代理模式其实就是将违反单一性原则的类给抽离出来,尽量满足开放和封闭的原则. 相当于一个类的行为只是一种,但是你可以给这个类添加额外的行为.比如: 一 ...

随机推荐

  1. vue+postcss报错: variable '--primary-color' is undefined and used without a fallback

    之前vue-cli3引入postcss的配置: https://www.cnblogs.com/XHappyness/p/7676680.html 发现这么一个问题,我再全局global.css中定义 ...

  2. javascript之容易出错的地方

    1: 不是所有的非空对象都有toString()方法的 var obj = Object.create(null); console.log(obj.toString());   // false; ...

  3. jenkins 配置git 学习

    由于Jenkins没有默认安装Git插件,需要Git库同步时候,需要手动选择安装git插件 在“系统管理”->“管理插件”中找到,“可选插件”选项卡.“过滤“(一个名为过滤的搜素窗口)中可以用键 ...

  4. 【bzoj2600】[Ioi2011]ricehub 双指针法

    题目描述 给出数轴上坐标从小到大的 $R$ 个点,坐标范围在 $1\sim L$ 之间.选出一段连续的点,满足:存在一个点,使得所有选出的点到其距离和不超过 $B$ .求最多能够选出多少点. $R\l ...

  5. HttpHelper类及调用

    首先列出HttpHelper类 /// <summary> /// Http操作类 /// </summary> public class HttpHelper { priva ...

  6. C++解析(4):引用的本质

    0.目录 1.引用的意义 2.特殊的引用 3.引用的本质 4.函数返回引用 5.小结 1.引用的意义 引用作为变量別名而存在,因此在一些场合可以代替指针 引用相对于指针来说具有更好的可读性和实用性 注 ...

  7. redis的sort排序

    Redis排序命令是sort,完整的命令格式如下:SORT key [BY pattern] [LIMIT start count] [GET pattern] [ASC|DESC] [ALPHA] ...

  8. winform登录代码

    Program.cs文件中 static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [STAThr ...

  9. Hdu5226 Tom and matrix

    Tom and matrix Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  10. ios 逆向

    Theos https://www.jianshu.com/p/307243ea40e4 Dumpsdecrypted https://www.cnblogs.com/wangyaoguo/p/908 ...