首页 > 代码库 > js设计模式
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的弱类型语言，类型不匹配很常见，使用接口会变得容易一些。
js设计模式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。