JavaScript设计模式-16.装饰者模式（上）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 高级语法16-装饰者模式</title>
</head>
<body>
<script>
/*通过需求引出装饰者模式
*
*/ //接口
var Interface = function(name,methods){
if(arguments.length != 2){
alert("interface must have two paramters...");
}
this.name = name;//这个是接口的名字
this.methods = [];//定义个空数组来转载函数名
for (var i = 0; i < methods.length; i++) {
if(typeof methods[i] != "string"){
alert("method name must is String ...")
}else{
this.methods.push(methods[i])
}
}
}
//定义接口的一个静态方法来实现接口与实现类的直接检验
//静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的
//我们要把静态的函数直接写到类层次上
Interface.ensureImplements = function(object){
if(arguments.length<2){
alert("必须最少是2个参数");
return false;
}
//遍历
for (var i = 1; i < arguments.length; i++) {
var inter = arguments[i];
//如果你是接口就必须是Interface类型的
if(inter.constructor != Interface){
throw new Error("if is interface class must is Interface type");
}
//遍历函数集合并分析
for (var j = 0; j < inter.methods.length; j++) {
var method = inter.methods[j];
//实现类中必须有方法名字 和 接口中所有的方法名项目
if(!object[method] || typeof object[method] != "function"){
throw new Error("实现类并没有完全实现接口中的所有方法...");
}
}
}
} function demo(){
//汽车店的接口
var CarShop = new Interface("CarShop",["getPrice","assemble"]);
var myCarShop = function(){
this.getPrice = function(){
document.write(15000+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
} var jimCarShop = new myCarShop();
jimCarShop.getPrice();
jimCarShop.assemble();
document.write("--------------------"+"<br>") /*新需求：
* 汽车还会有附属产品 音响 (k),真皮沙发(M),保险杠(N)
* 每一个附属的产品会影响到汽车的组装和其价格
* 你能想到什么办法？
*/ //改写接口
var CarShop2 = new Interface("CarShop2",["getPrice","assemble","addK","addM","addN"]);
var myCarShop2 = function(){
var price = 150000;
this.getPrice = function(){
document.write(price+"<br>")
}
this.assemble = function(){
document.write("汽车组装"+"<br>")
}
this.addK = function(){
price += 1000;
}
this.addM = function(){
price += 2000;
}
this.addN = function(){
price += 3000;
}
Interface.ensureImplements(this,CarShop2);
} var jimCarShop2 = new myCarShop2();
jimCarShop2.addK();
jimCarShop2.addM();
jimCarShop2.addN();
jimCarShop2.getPrice();
jimCarShop2.assemble(); /*好像能成功，但是新的问题来了
* 你把接口全改了，可是我继承本接口的类不一定全要有音响，沙发，保险杠。
* 难道我要改变所有实现本接口的实现类吗？
* 显然是不对的。
*/
//2.如果不改变接口，那我就增加子类
var CarShop = new Interface("CarShop",["getPrice","assemble"]);
var myCarShop = function(){
this.getPrice = function(){
document.write(150000+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
}
var myCarShopM = function(){
this.getPrice = function(){
document.write(150100+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
}
var myCarShopK = function(){
this.getPrice = function(){
document.write(150200+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
}
//这种方式走不通
/*装饰者的概念和用法：
* 装饰者可以为对象添加新的特性
* 透明的把对象包装在具有相同接口的新对象中
*/ }
// demo();
function decorator(){
//装饰者模式来解决需求
var CarShop = new Interface("CarShop",["getPrice","assemble"]);
//目标对象
var myCarShop = function(){
this.getPrice = function(){
return 150000;
}
this.assemble = function(){
document.write("汽车组装...<br>");
}
Interface.ensureImplements(this,CarShop);
}
//装饰类
var M = function(carshop){
this.getPrice = function(){
return 1000 + carshop.getPrice();
}
this.assemble = function(){
document.write("M组装...<br>");
}
Interface.ensureImplements(this,CarShop);
}
var K = function(carshop){
this.getPrice = function(){
return 2000 + carshop.getPrice();
}
this.assemble = function(){
document.write("k组装...<br>");
}
Interface.ensureImplements(this,CarShop);
}
var N = function(carshop){
this.getPrice = function(){
return 3000 + carshop.getPrice();
}
this.assemble = function(){
document.write("N组装...<br>");
}
Interface.ensureImplements(this,CarShop);
} //调用 var car =new K(new M(new myCarShop()));
alert(car.getPrice());
car.assemble();
}
decorator();
</script>
</body>
</html>
JavaScript设计模式-16.装饰者模式（上）的更多相关文章
- 再起航，我的学习笔记之JavaScript设计模式13(装饰者模式)
装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...
- Javascript设计模式之装饰者模式详解篇
一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改 ...
- JavaScript设计模式-17.装饰者模式（下）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript设计模式（装饰者模式）
一.模拟传统面向对象语言的装饰者模式: 假设我们在编写一个飞机大战的游戏,随着经验值的增加,我们操作的飞机对象可以升级成更厉害的飞机,一开始这些飞机只能发射普通的子弹,升到第二级时可以发射导弹,升到第 ...
- JavaScript设计模式(8)-装饰者模式
装饰者模式 1. 作用: 可用来透明地把对象包装在具有同样接口的另一对象之中,这样可以给一个方法添加一些行为,然后将方法调用传递给原始对象. 可用于为对象增加功能,用来代替大量子类. 装饰者对其组件进 ...
- javascript设计模式之装饰者模式
/* * 装饰者模式提供比继承更有弹性的替代方案 * 在不改变原构造函数的情况下,添加新的属性或功能 */ //需要装饰的类(函数) function Macbook() { this.cost = ...
- 学习javascript设计模式之装饰者模式
1.装饰者模式定义:给对象动态添加职责的方式称为装饰者(decorator)模式. js如何实现装饰者模式 通过保存原函数引用方式改写某函数 window.onload = function(){al ...
- 再起航，我的学习笔记之JavaScript设计模式16(享元模式)
### 享元模式 **享元模式(Flyweight):** 运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 上回我们在组合模式中创建了文章列表类,这次我们要向不同的文 ...
- javascript设计模式－－策略模式
javascript策略模式总结 1.什么是策略模式? 策略模式的定义是:定义一系列的算法,把他们独立封装起来,并且可以相互替换. 例如我们需要写一段代码来计算员工的奖金.当绩效为a时,奖金为工资的5 ...
随机推荐
- Spring全局异常处理
最近学习Spring时,认识到Spring异常处理的强大.之前处理工程异常,代码中最常见的就是try-catch-finally,有时一个try,多个catch,覆盖了核心业务逻辑: 1 try{ 2 ...
- web项目开发最佳做法
一个成熟的web项目应该具备以下基础代码或做法 1.前端基础框架: 统一的ajax 通信/表单提交及调用结果弹窗显示 统一的数据验证 统一的数据列表 2.后端基础框架: 统一的异常处理捕获,可针对具体 ...
- 如何将本地数据库迁移至SQL Azure
Windows Azure的SQL Azure和SQL Server 拥有不同的体系结构,可以说是两个不同的产品.SQL Azure不完全支持或者尚不支持SQL Server的某些功能,这使得我们不能 ...
- gvim 全屏 插件
1.这里下载插件zip解压后,将fullscreen.dll放到gvim.exe同目录下 2.执行 :call libcallnr()//切换全屏模式 3.上面的命令非常麻烦,可以在_vimrc中ma ...
- winform 开发中 把耗时操作 封装起来 异步执行（.net 4.0）
.先定义一个 BackgroundTask.cs 代码如下: public class BackgroundTask { private static WaitDialogForm LoadingDl ...
- windows过滤指定IP
通过windows的安全管理策略工具我们可以实现对IP的过滤.整个过程比较复杂.我们以图形演示. 下面我们以windows 8.1作为示例. 1.控制面板=>管理工具=>本地安全策略. 2 ...
- Solr查询query效果对比
q条件 默认分词(org.apache.solr.analysis.TokenizerChain) "parsedquery" IK分词(org.wltea.analyzer.lu ...
- centos 安装vmware 9.02 报 Failed to load module "pk-gtk-module" "canberra-gtk-module"
http://www.linuxidc.com/Linux/2012-01/50944.htm 系统平台:RHEL6.1 X86 32bit 软件版本:VMware-Workstation-Full- ...
- 【OCP-12c】CUUG 071题库考试原题及答案解析（20）
20.choose two Examine the description of the EMP_DETAILS table given below: Which two statements are ...
- set 集合数据类型
set 数据类型 set 与列表类似,区别在于 set 不能包含重复的值. In [1]: a_list = ['a', 'b', 'c', 'b', 'd', 'm', 'n', 'n'] In [ ...