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的比较器,数据排序从多维数组的第一维开始排序可以自己定义排序方法 ...
随机推荐
- iOS定位 - 普通定位(没有地图) - 反地理编码(得到具体位置)
#import <CoreLocation/CoreLocation.h> 使用到的头文件 要引入CoreLocation这个包 <CLLocationManagerDelegate ...
- 跟着上一个tcpServer 一起来的
具体功能就是通过反射为实体类赋值 public class httpParse<T> where T : new() { /// <summary> ...
- 推荐一些C#相关的网站、资源和书籍
一.网站 1.http://msdn.microsoft.com/zh-CN/ 微软的官方网站,C#程序员必去的地方.那里有API开发文档,还有各种代码.资源下载. 2.http://social.m ...
- js实现checkbox的全选/取消
所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...
- jquery.min.map详见
温故而知新,翻出来阮前辈的文章记录一下 日期:2013年1月23日 上周,jQuery 1.9发布. 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map. 访问 ht ...
- Ubuntu14.04忘记root密码的解决方法
电脑20多天没用忘记密码了,下面是在网上找到的一个解决办法,其它的和这个也大概相同.因为其中有些缺漏,没能给我解决问题.通过分析最终问题还是解决了,现解决方案的关键点记录一下.希望能方便到其它人. 1 ...
- 分享：perl 文件操作总结
发布:thebaby 来源:net [大 中 小] perl 文件操作,包括打开.关闭文件,读取.定入文件等.原文链接:http://www.jbxue.com/article/3153.html 打 ...
- PHP获取Cookie模拟登录CURL
要提取google搜索的部分数据,发现google对于软件抓取它的数据屏蔽的厉害,以前伪造下 USER-AGENT 就可以抓数据,但是现在却不行了.利用抓包数据发现,Google 判断了 cookie ...
- c++ 进程权限的提升
//提升权限 void CManageProcessDlg::DebugPrivilege() { HANDLE hToken = NULL; //打开当前进程的访问令牌 int hRet = ...
- Sublime Text 前端开发常用扩展插件推荐
Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...