一、设计模式
javascript里面给我们提供了很多种设计模式：
工厂、桥、组合、门面、适配器、装饰者、享元、代理、观察者、命令、责任链
在前面我们实现了工厂模式和桥模式
工厂模式 ：
核心：为了生产对象，实现解耦。
桥接模式 ：
（桥接模式是一种既能把两个对象连接在一起，又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来，同时又允许他们各自独立变化）
主要作用：主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
组合模式 ：
（组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式。使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为。这可以简化粘合性代码，使其更容易维护，而那些复杂行为则被委托给各个对象。）
优点 ：
1 你可以用同样的方法处理对象的集合与其中的特定子对象。
2 它可以用来把一批子对象组织成树形结构，并且使整棵树都可以被遍历。
场景 ：
1 存在一批组织成某种层次体系的对象
2 希望对这批对象或其中的一部分对象实施一个操作。
特点 ：
1 组合模式中只有两种类型对象：组合对象、叶子对象
2 这两种类型都实现同一批接口
3 一般我们会在组合对象中调用其方法并隐式调用"下级对象"的方法（这里我们一般采用递归的形式去做）
门面模式
两个作用：
1、简化类的接口
2、消除类与使用它的客户代码之间的耦合
门面模式常常是开发人员最亲密的朋友。它几乎是所有javascript库的核心原则
门面模式的目的是为了让开发人员用更简单的方法调用一些相对复杂或组合的方法，主要就是简化开发的复杂性，提供一个相对容易的API去调用内部的方法供外界去使用，这样程序员开发会变得轻松些，编写一次组合代码后可以反复的去使用它，有助于节省时间和精力
注意：
不要滥用门面模式，所以使用你心仪的门面之前一定要三思而定，搞不好你就会小题大做
适配器设计
1、适配器模式可用来在现有的接口和不兼容的类之间进行适配。
使用这种模式的对象又叫做包装器（wrapper），因为他们是在用一个新的接口包装另一个对象。
借助适配器可以处理一些类与API不匹配、不能一同使用的情况。
2、注意适配器和门面虽然比较类似，但是门面模式只是为了简化一个接口，
它并不是提供额外的选择，适配器则要把一个接口转换为另一个接口，
它并不会滤除某些能力，也不会简化接口。
装饰者模式
是一种为对象添加新特性的技术,它并不适用创建新子类的这种手段。装饰者模式可以用来透明的把原始对象包装在具有同样接口的另一个对象之中。这样我们就可以为对象添加一个方法或者一些行为，然后将方法调用传递给原始对象
特性：
1、实现同样的接口
2、需要有子类
讲解都在代码中：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>装饰者设计模式</title>
<!--
@theme: javascript高级 装饰者设计模式
@autor：EthanCoco
@date：2015-11-24
@email：lijianlin0204@163.com
-->
</head>
<body>
<script type=text/javascript charset=utf-8>
//这个就不继续说了
var LJL = {};
LJL.Interface = function(name,methods){
if(arguments.length !== 2){
throw new Error("the param must have two");
}
this.name = name;
this.methods = [];
for(var i=0;i<methods.length;i++){
if(typeof methods[i] !=='string'){
throw new Error("the type of param must be string");
}
this.methods.push(methods[i]);
}
};
LJL.Interface.checkMethodsIsPass = function(object){
if(arguments.length < 2){
throw new Error("the checkMethodsIsPass methods must more then 1 param");
}
for(var i=1;i<arguments.length;i++){
var instanceInterface = arguments[i];
if( instanceInterface.constructor !== LJL.Interface){
throw new Error("the param is not a Interface");
}
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 methods not come pass!")
}
}
}
};
LJL.extends = function(sub,sup){
var F = new Function();
F.prototype = sup.prototype;
sub.prototype = new F();
sub.prototype.constructor = sub;
sub.superClass = sup.prototype;
if(sup.prototype.constructor == Object.prototype.constructor){
sup.prototype.constructor = sup ;
}
};
//装饰者设计模式：
/**
简单理解就是：在保证不改变原有对象的基础上，去扩展一些想要的方法或需求
在子类的基础上要实现相同的接口
特性：
1、实现同样的接口
2、需要有子类
*/
//装饰者模式示例
/**装饰者概念：
装饰者：（decorator）[是一种为对象添加新特性的技术],
它并不适用创建新子类的这种手段。
装饰者模式可以用来透明的[把原始对象包装在具有同样接口的另一个对象之中]。
这样我们就可以为对象添加一个方法或者一些行为，
然后将方法调用传递给原始对象。
*/
/**
整体思路讲解
//场景：我要获得电脑的价格和电脑的类型！（裸机）
创建一个接口对象
var ComputerInterface = new LJL.Interface('ComputerInterface',['getPrice','getType']);
创建一个对象
var Computer =function(){
//检验接口
LJL.Interface.checkMethodsIsPass(this,ComputerInterface);
};
//在原型对象上添加方法
Computer.prototype = {
constructor : Computer,//还原构造器
getPrice : function(){//实现接口的getPrice方法
return 4500;
},
getType : function(){//实现接口的getType方法
document.write("this is a assamable");
}
};
//好了，现在我有一个新的需求：这个电脑不满足我的需求，我还要加个内存条，你给我算算一共要多少钱？
//你难道要在开始的对象上加价格么？这样就改变了原始对象，如果一个人就要裸机呢？你难道又要把原始对象改回来么？
//这样做显然是不合理的
//为此我们用装饰者模式来实现这一功能，就是我在原始对象上在套一层，既不影响原始对象性，也不影响后加上的对象
//两者都是独立的，但又是存在关联的
//创建一个新的对象来装饰原始对象
var CpuDecorator = function(computer){//新的对象，装饰谁？我们传一个参数，表示原始对象的实例对象
//借用构造函数继承原始对象
CpuDecorator.superClass.constructor.call(this,computer);
};
//既然有了个参数，这个参数该如何或者说从哪里获得？
////////////////////////////////////////
//我们可以给原始对象一个属性：修改成如下
var Computer =function(computer){
//这个属性就是为了让子类继承的 （让子类 多一个父类的引用）
this.computer = computer;//添加一个属性
//检验接口
LJL.Interface.checkMethodsIsPass(this,ComputerInterface);
};
/////////////////////////////////////////////////
//然后我们用子类继承父类
LJL.extends(CpuDecorator,Computer);//原型继承 (说明：这个继承用来实现同一个接口的方法，这是装饰者模式的特性)
//在原型对象上实现同样的方法
CpuDecorator.prototype = {
constructor : CpuDecorator,
getPrice : function(){
return this.computer.getPrice()+1000;//在原有的对象上的价格加上cpu的价格，得最终价格
},
getType : function(){
document.write("this is a plus a cpu"+"<br/>");
}
};
*/
//以下为完整实例以及测试
var ComputerInterface = new LJL.Interface('ComputerInterface',['getPrice','getType']);
var Computer =function(computer){
this.computer = computer;
LJL.Interface.checkMethodsIsPass(this,ComputerInterface);
};
Computer.prototype = {
constructor : Computer,
getPrice : function(){
return 4500;
},
getType : function(){
document.write("this is a assamable");
}
};
var CpuDecorator = function(computer){
CpuDecorator.superClass.constructor.call(this,computer);
};
LJL.extends(CpuDecorator,Computer);
CpuDecorator.prototype = {
constructor : CpuDecorator,
getPrice : function(){
return this.computer.getPrice()+1000;
},
getType : function(){
document.write("this is a plus a cpu"+"<br/>");
}
};
var com = new Computer();
alert(com.getPrice());
com.getType();
com = new CpuDecorator(com);
document.write(com.getPrice()+"<br/>");
com.getType();
//装饰者 不仅可以用在类上， 还可以用在函数上
//返回一个当前时间的字符串表示形式
function getDate(){
return (new Date()).toString();
};
// 包装函数 (装饰者函数)
function upperCaseDecorator(fn){
return function(){
return fn.apply(this, arguments).toUpperCase();
}
};
alert(getDate());
var getDecoratorDate = upperCaseDecorator(getDate);
alert(getDecoratorDate());
</script>
</body>
</html>
网友评论