什么是接口

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

接口之利

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

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

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

接口之弊

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

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

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

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

三种方法在JS中模仿接口

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

/*
interface Composite{
function add(child);
function remove(child);
function getChild(index);
}
interface fromItem{
function save();
}
*/
var CompositeForm = function(id, method, action){
...
};
CompositeForm.prototype.add = function(){
...
};
CompositeForm.prototype.remove = function(){
...
};
CompositeForm.prototype.getChild = function(){
...
};
CompositeForm.prototype.save = function(){
...
};

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

用属性检查模仿接口

/*
interface Composite{
function add(child);
function remove(child);
function getChild(index);
}
interface fromItem{
function save();
}
*/
var CompositeForm = function(id, method, action){
this.implementsInterfaces = ['Composite', 'FormItem']; //声明自己继承的接口
...
};
...
function addForm(formInstance){
if(!implements(formInstance, 'Composite', 'FormItem')){ //检查实例formInstance是否实现了接口
throw new Error('Object does not implement a required interface');
}
}
function implements(object){ //检查算法,双重循环
for(var i=1; i<arguments.length; i++){
var interfaceName = arguments[i];
var interfaceFound = false;
for(var j=0; j<object.implementsInterfaces.length; j++){
if(object.implementsInterfaces[j] == interfaceName){
interfaceFound = true;
break;
}
}
if(!interfaceFound){
return false;
}
}
return true;
}

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

用鸭式辨型模仿接口

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

var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); //声明接口拥有的方法
var FormItem = new Interface('FormItem', ['save']); //声明接口拥有的方法 var compositeForm = function(id, method, action){//implements Composite, FormItem
...
};
...
function addForm(formInstance){
ensureImplements(formInstance, Composite, formItem);
...
} //Constructor
var Interface = function(name, methods){ //将接口的方法保存在this.methods中用以将来的检测
if(arguments.length != 2){
throw new Error('Interface constructor called with '+arguments.legth+
" arguments, but exected 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 = function(object){
if(arguments.length < 2){
throw new Error('Function Interface.ensureImplements called with'+arguments.length+
"arugments, but expected at least 2.");
}
for (var i=0, len=arugments.length; i<len; i++){
var intf = arguments[i];
if(intf.constructor !== Interface){
throw new Error('Function Interface.ensureImplements expects arguments'+
"two and above to be instances of Interface.");
}
for(var j=0; methodsLen = intf.methods.length; j<methodsLen; j++){ //通过methods检查实例是否实现了接口
if(!object[method] || typeof object[method]!=='function'){
throw new Error('Function Interface.ensureImplements:object'+
" doesnot implement the"+intf.name+
" interface. Method"+method+" was not found!");
}
}
}
};

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

一个例子

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

var DynamicMap = new Interface('DynamicMap', ['centerOnPoint', 'zoom', 'draw']);
function displayRoute(mapInstance){
Interface.ensureImplements(mapInstance, DynamicMap);
mapInstance.centerOnPoint(12,34);
mapInstance.zoom(5);
mapInstance.draw();
...
}

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. C# 委托和事件高级进阶

    本篇文章主要采用理论和代码实例相结合方式来论述委托和事件,涉及到一些边界技术,如软件架构的OCP原则(开-闭原则), 软件架构解耦,设计模式(Sender-Order)和事件驱动模型,有一定难度和深度 ...

  2. web三大组件的加载顺序

    Web三大组件:过滤器组件  监听器组件  Servlet组件 过滤器的顶级接口:javax.servlet.Filter 监听器的顶级接口:javax.servlet.ServletContextL ...

  3. app耗电量测试工具--PowerTutor

    PowerTutor是一款用来测试手机功耗的小工具,它可以只管地展示手机系统主要的组件和各种用户app产生的功耗数据.它可以统计app的屏幕功耗(LCD).CPU功耗以及WiFi和3G网络功耗,我们可 ...

  4. LoadRunner脚本增强技巧之自动关联

    为什么要做关联,原理很简单,录制脚本的时候,服务器会给用户一个唯一的认证码来进行操作,当再次回放脚本的时候服务器又会给一个全新的认证码,而录制好的脚本是写死的,还是拿老的认证码提交,肯定会导致脚本执行 ...

  5. 【bzoj3064】Tyvj 1518 CPU监控 线段树维护历史最值

    题目描述 给你一个序列,支持4种操作:1.查询区间最大值:2.查询区间历史最大值:3.区间加:4.区间赋值. 输入 第一行一个正整数T,表示Bob需要监视CPU的总时间. 然后第二行给出T个数表示在你 ...

  6. 【数据库_Postgresql】sql查询结果添加序号列

    ROW_NUMBER () OVER (ORDER BY A .ordernumber ASC) AS 序号

  7. Qt 事件处理机制

    Qt 事件处理机制 因为这篇文章写得特别好,将Qt的事件处理机制能够阐述的清晰有条理,并且便于学习.于是就装载过来了(本文做了排版,并删减了一些冗余的东西,希望原主勿怪),以供学习之用. 简介 在Qt ...

  8. [TJOI2008]彩灯 线性基

    题面 题面 题解 题意:给定n个01串,求互相异或能凑出多少不同的01串. 线性基的基础应用. 对于线性基中的01串,如果我们取其中一些凑成一个新的01串,有一个重要的性质:任意2个不同方案凑出的01 ...

  9. CF765F Souvenirs 解题报告

    CF765F Souvenirs 题意翻译 给出\(n(2 \le n \le 10^5 )\) ,一个长为\(n\)的序列\(a(0 \le a_i \le 10^9 )\). 给出\(m(1\le ...

  10. 《剑指offer》— JavaScript(2)替换空格

    替换空格 题目描述 请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 实现 ...