js接口
1.接口
-接口是面向对象javaScript程序员工具箱中最有用的工具之一,那么对于javaScript没有定义接口的概念,
我们通过模拟高级程序语言的方式来创建javaScript中的接口。
-接口的概念:提供一种以说明一个对象应该有哪些方法的手段。
-通常建立javaScript接口的三种方式:
-1.注释描述接口
<script type="text/javascript" charset="utf-8">
// javaScript中,定义接口有三种方式
// 1.注解描述(特点,1.程序员可以有一个参考,2缺点是还是属于文档范畴,3如果程序员忘记了定义方法,不会出错。)
// 缺点,方式太过松散,并没有检查接口方式是否被完全实现。
/**
* interface Composite {
*
* function add();
* function remove();
* function update();
* }
*/
// CompositImpl implements Composite
var CompositImpl = function () {
};
// 用原型对象做,直接写在类里,会多次创建方法。
CompositeImpl.prototype.add = function(obj) {
// do something
};
CompositeImpl.prototype.remove = function(obj) {
// do something
};
CompositeImpl.prototype.update = function(obj) {
// do something
};
</script>
-2.属性检测接口
<script type="text/javascript" charset="utf-8">
// 2.属性检测
/**
* interface Composite {
*
* function add();
* function remove();
* function update();
* }
*
* interface FormItem {
* function select(obj);
* }
*/
// CompositImpl implements Coposite 和 FormItem
var CompositImpl = function (){
// 显示的在类的内部接受所实现的接口
// 一般来讲 在类的内部定义一个变量,名字要固定。这是一个规范
this.implemtnsInterface = ['Comosite','FormItem'];
};
CompositeImpl.prototype.add = function(obj) {
// do something
alert('add');
};
CompositeImpl.prototype.remove = function(obj) {
// do something
alert('remove');
};
CompositeImpl.prototype.update = function(obj) {
// do something
alert('update');
};
CompositeImpl.prototype.select = function(obj) {
// do something
alert('select');
};
// 定义一个方法去检测 类是否实现了所有的接口
function checkCompositImpl() {
// 判断当前对象是否实现了所有接口
if(!IsImplments(instance, 'Composite', 'FormItem')) {
throw new Error('Object does not implement a required interface');
}
}
// 判断当前对象是否实现了所有接口
// 这个方法的主要目的就是判断 实例对象有没有实现相关的接口
function IsImplments(Object) {
//arguments 获得实际参数
for (var i = 1; i < arguments.length; i++) {
// 接受所实现的每一个接口的名字
var interfaceNmae = arguments[i];
var interfaceFound = false;
for (var g = 0; g < Object.implemtnsInterface.length; g++) {
if (Object.implemtnsInterface[g] == interfaceName) {
interfaceFound = true;
break;
}
}
if (!iterfaceName) {
return false;
}
}
return true;
}
</script>
-3.鸭式辨型接口
<script type="text/javascript" charset="utf-8">
// 3.鸭式辨型(最完美的实现接口的方式)
// 核心:一个类实现接口的主要目的就是将接口中的方法全部实现。(检测方法)
// 优点:完全面向对象,代码也实现统一,也实现了解耦
// 1.接口类 Class Interface ==> 实例化N多个接口
/*
* 接口类需要两个参数
* 1.接口的名字
* 2.接受方法名称的数组
*/
var Interface = function(name, methods) {
// 1.判断接口的参数个数
if(arguments.length != 2) {
throw new Error('this instance interface constructor must be 2 length');
}
this.name = name;
// 定义一个内置空数组,等待接受methods里面的元素
this.methods = [];
for (var i = 0, len = methods.length; i < len; i++) {
if(typeof methods[i] !== 'string') {
throw new Error('the interface method name is error!');
}
this.methods.push(methods[i]);
}
};
// 2.准备工作:具体的实现类
// 实例化接口对象
var CompositeInterFace = new Interface('CompositeInterFace', ['add', 'remove']);
var FormItemInterFace = new Interface('FormItemInterFace', 'update', 'select');
// CompositImpl 实现了CompositeInterFace和FormItemInterFace
var CompositImpl = function() {
};
CompositeImpl.prototype.add = function(obj) {
// do something
alert('add');
};
CompositeImpl.prototype.remove = function(obj) {
// do something
alert('remove');
};
CompositeImpl.prototype.update = function(obj) {
// do something
alert('update');
};
CompositeImpl.prototype.select = function(obj) {
// do something
alert('select');
};
// 3.检验接口里的方法
// 如果检验通过,不做任何处理。如果没有通过,则浏览器抛出异常
// 这个方法的目的就是检测方法的
Interface.ensureImplments = function(Object) {
if(arguments.length < 2) {
throw new Error('Interface.ensureImplments method constructor arguments must be >= 2');
}
// 获得接口实例对象
for (var i = 1; i < arguments.length; i++) {
var instanceInterface = arguments[i];
// 判断参数是否是接口类的类型
if (instanceInterface.constructor !== interface) {
throw new Error('the arguments constructor not be Interface class!');
}
// 循环接口实例对象中的每一个方法
for (var j = 0; j < instanceInterface.methods.length; j++) {
// 用一个临时变量接受每一个方法的名字(字符串)
var methodName = instanceInterface.methods[j];
if(!Object[methodName] || typeof Object[methodName] != 'function') {
throw new Error('the method is not found');
}
}
}
};
var c1 = new ComopsitImpl();
Interface.ensureImplments(c1, CompositeInterFace, FormItemInterFace);
</script>
-接口的利弊:
-对于一些中小程序来说,使用接口显然是不明智的,对于项目来说接口的好处不明显,只是徒增复杂度。
-对于接口的好处,首先增进了代码的重用,对于开发来讲,还可以告诉程序员哪些类都使用了哪些方法,
如果你事先知道接口,那么就减少了你在编码的时候对类与类之间冲突,实现解耦。对于测试和调试也变得轻松。
对于javaScript的弱类型语言,类型不匹配很常见,使用接口会变得容易一些。

浙公网安备 33010602011771号