JavaScript接口实现代码 (Interfaces In JavaScript)


Posted in Javascript onJune 11, 2010

在实际中,我们可以在注释中定义好接口,在实际的代码中予以实现
比如:

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

实现接口的程序员是否将这些接口都实现了呢?我们没办法保证!因为这里没有任何办法去检查是否都实现了
我们需要一个检查是否实现了接口的机制,可以这样:
/* 
interface Composite { 
function add(child); 
function remove(child); 
function getChild(index); 
} 
interface FormItem { 
function save(); 
} 
*/ 
var CompositeForm = function(id, method, action) { 
this.implementsInterfaces = ['Composite', 'FormItem']; 
... 
}; 
... 
function addForm(formInstance) { 
if(!implements(formInstance, 'Composite', 'FormItem')) { 
throw new Error("Object does not implement a required interface."); 
} 
... 
} 
// The implements function, which checks to see if an object declares that it 
// implements the required interfaces. 
function implements(object) { 
for(var i = 1; i < arguments.length; i++) { // Looping through all arguments 
// after the first one. 
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; // An interface was not found. 
} 
} 
return true; // All interfaces were found. 
}

这种方法让程序员在写的时候注明实现了哪些接口: this.implementsInterfaces = ['Composite', 'FormItem']; 在调用的时候使用implements方法来判断是否实现了,理论上可行,很有可能写上了实现了'Composite'接口,但是代码里却并没有add方法!因此,我们需要检验实现接口的类是否包含了接口里的方法!所以,接口必须从注释中解放出来:
// Interfaces. 
var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); 
var FormItem = new Interface('FormItem', ['save']); 
// CompositeForm class 
var CompositeForm = function(id, method, action) { // implements Composite, FormItem 
... 
}; 
... 
function addForm(formInstance) { 
Interface.ensureImplements(formInstance, Composite, FormItem); 
// This function will throw an error if a required method is not implemented, 
// halting execution of the function. 
// All code beneath this line will be executed only if the checks pass. 
... 
}

定义接口Composite,FormItem,并且CompositeForm实现这两个接口,在使用的时候,用Interface.ensureImplements来检验formInstance是否实现了这两个接口中的所有方法。
来看看Interface的定义:两个参数,第一个参数是接口名称,第二个参数是接口包含的方法数组
// 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 添加建议接口是否实现的静态方法
// Constructor. 
Interface.ensureImplements = function(object) { 
if(arguments.length < 2) { 
throw new Error("Function Interface.ensureImplements called with " + 
arguments.length + "arguments, but expected at least 2."); 
} 
for(var i = 1, len = arguments.length; i < len; i++) { 
var interface = arguments[i]; 
if(interface.constructor !== Interface) { 
throw new Error("Function Interface.ensureImplements expects arguments" 
+ "two and above to be instances of Interface."); 
} 
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 implement the " + interface.name 
+ " interface. Method " + method + " was not found."); 
} 
} 
} 
};
Javascript 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
详解js的六大数据类型
Dec 27 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 #Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 #Javascript
基于jQuery的js分页代码
Jun 10 #Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 #Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 #Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 #Javascript
jQuery-ui中自动完成实现方法
Jun 10 #Javascript
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python爬取内容存入Excel实例
2019/02/20 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
岗位职责的构建方法
2014/02/01 职场文书
减负增效提质方案
2014/05/23 职场文书
环卫个人总结
2015/03/03 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS