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的比较器,数据排序从多维数组的第一维开始排序可以自己定义排序方法 ...
随机推荐
- 【学习笔记】【C语言】算术运算
C语言一共有34种运算符,包括了常见的加减乘除运算 1. 加法运算+ 除开能做加法运算,还能表示正号:+5.+90 2. 减法运算- 除开能做减法运算,还能表示符号:-10.-29 3. 乘法运算* ...
- Window下配置NodeJs环境详解
今年打算学习Web这块,所以就买了本Node.js+MongoDb+AngularJS这本书,这周天也比较忙,想着录视频(拍小片,不是AV,不要误会,是在线课程)的事情,这周又将Asp.Net ...
- AMQ学习笔记 - 12. Spring-JmsTemplate特性设置
概述 这是关于JmsTemplate的最后一篇总结,且只会介绍几个比较重要的特性. 消息的递送模式 在发送消息给时,可以告知这是持久化的消息,还是非持久化的消息.如果是非持久化的消息,broker会将 ...
- MiZ702学习笔记12——封装一个普通的VGA IP
还记得<MiZ702学习笔记(番外篇)--纯PL VGA驱动>这篇文章中,用verilog写了一个VGA驱动.我们今天要介绍的就是将这个工程打包成一个普通的IP,目的是为后面的一篇文章做个 ...
- IE Problem : inetcpl.cpl
从windows8升级windows8.1后每次关闭ie11浏览器总是跳出出现一个问题导致关闭,我都快疯了,以前windows8一点问题都没有.这是怎么回事?还有能回到ie10吗?(张浩228) 小昕 ...
- The breakpoint will not currently be hit. No symbols have been loaded for this document."
C# exe calls function from a native C++ DLL, and breakpoints set inside C++ source code cannot be hi ...
- GCD Block
GCD (Grand Central Dispatch) 是Apple公司开发的一种技术,它旨在优化多核环境中的并发操作并取代传统多线程的编程模式. 在Mac OS X 10.6和IOS 4.0之后开 ...
- html5圆角
以下是代码片段:#roundCornerI{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius-tople ...
- LR通过SiteScope监控mysql
SiteScope下载,安装 要想使用LoadRunner监测MySQL数据库的性能,LoadRunner没有提供直接监测 MySQL的功能,所以,我们需要借助sitescope监控,然后在LoadR ...
- EasyUI_Datagrid学习总结
EasyUI_Datagrid学习总结 2016年7月25日星期一 一.简介 Easyui中的datagrid从总的作用上讲,就是在列表上显示数据,类似于table,但是在table的基础上,此控件更 ...