JavaScript高级---装饰者模式设计
一、设计模式
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>
JavaScript高级---装饰者模式设计的更多相关文章
- javascript的装饰者模式Decorator
刚开始看这段代码有点绕,现在回过头来看,so easy! Function.prototype.before = function(beforefn){ var _self = this; retur ...
- javascript设计模式——装饰者模式
前面的话 在程序开发中,许多时候都并不希望某个类天生就非常庞大,一次性包含许多职责.那么可以使用装饰者模式.装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.本文将 ...
- JavaScript设计模式----装饰者模式
装饰者模式的定义: 装饰者(decorator)模式能够在不改变对象自身的基础上,在程序运行期间给对像动态的添加职责.与继承相比,装饰者是一种更轻便灵活的做法. 装饰者模式的特点: 可以动态的给某个对 ...
- JavaScript设计模式—装饰器模式
装饰器模式介绍 为对象添加新的功能,不改变其原有的结构和功能,原有的功能还是可以使用,跟适配器模式不一样,适配器模式原有的已经不能使用了,装饰器示例比如手机壳 UML类图和代码示例 Circle示原来 ...
- 从ES6重新认识JavaScript设计模式: 装饰器模式
1 什么是装饰器模式 向一个现有的对象添加新的功能,同时又不改变其结构的设计模式被称为装饰器模式(Decorator Pattern),它是作为现有的类的一个包装(Wrapper). 可以将装饰器理解 ...
- [设计模式] javascript 之 装饰者模式
装饰者模式说明 说明:通一个类来动态的对另一个类的功能对象进行前或后的修饰,给它辅加一些额外的功能; 这是对一个类对象功能的装饰,装饰的类跟被装饰的类,要求拥有相同的访问接口方法(功能),这在动态面向 ...
- 读书笔记之 - javascript 设计模式 - 装饰者模式
本章讨论的是一种为对象增添特性的技术,它并不使用创建新子类这种手段. 装饰者模式可以透明地把对象包装在具有同样接口的另一对象之中,这样一来,你可以给一些方法添加一些行为,然后将方法调用传递给原始对象. ...
- java基础47 装饰着模式设计
1.装饰者模式 增强一个类的功能,而且还可以让这些装饰类相互装饰 2.装饰者设计模式的步骤 1.在装饰类的内部维护一个被装饰类的引用 2.让装饰者有一个共同的父类或者父接口 3.实例 packa ...
- Javascript高级程序设计-问答模式
1.谈谈javascript数组排序方法sort()的使用,重点介绍sort()参数的使用及其内部机制 sort的实现的功能类似JAVA的比较器,数据排序从多维数组的第一维开始排序可以自己定义排序方法 ...
随机推荐
- SSH项目中，解决中文请求参数乱码，Filter过滤器不起作用的问题
1.web.xml配置如下(必须放在Struts2配置之前) <!-- 字符编码过滤器配置--> <filter> <filter-name>CharEncodin ...
- .NET使用QRCodeEncoder生成二维码
ThoughtWorks.QRCode.dll版本 1.0.2774.19990 代码如下: /// <summary> /// 生成二维码图片 /// </summary> ...
- C++四种不同的对象生存方式
在C++中,有四种方法产生一个对象. 第一种方法是在堆栈(stack)之中产生: void MyFunc() { CFoo foo;//在堆栈(stack)中产生foo对象 } 第二种方法是在堆(he ...
- 4月12日学习笔记——jQuery管理包装集
创建新的元素 (1)使用 HTML DOM 创建元素 //使用 Dom 标准创建元素 var select = document.createElement("select"); ...
- band
#include<iostream> #include<math.h> using namespace std; int calculate(double amount[],i ...
- 【Newtonsoft.Json】Window Phone Json解析开发包
WP从服务器.API交换数据一般都是用JSON格式字符串. 下面介绍用Newtonsoft.Json来处理JSON. 准备 1.到 http://json.codeplex.com/ 下载Newton ...
- 三角函数计算，Cordic 算法入门
[-] 三角函数计算Cordic 算法入门 从二分查找法说起 减少乘法运算 消除乘法运算 三角函数计算,Cordic 算法入门 三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来 ...
- netstat监控大量ESTABLISHED连接与Time_Wait连接问题（转载）
问题描述: 在不考虑系统负载.CPU.内存等情况下,netstat监控大量ESTABLISHED连接与Time_Wait连接. # netstat -n | awk '/^tcp/ {++y[$NF] ...
- Java操作MongoDB
上一篇文章: http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html 介绍到了在MongoDB的控制台完成MongoDB的数据操作,通 ...
- HTTP传递数据的几种方法
Http请求的时候,需要传递参数给后端,一般都是key-value的形式,传递的方法有很多种 例如需要传递的数据是 dict(key1=value1,key2=value2) 1. URL参数 把参数 ...