JavaScript装饰者模式原理与用法实例详解
本文实例讲述了JavaScript装饰者模式原理与用法。分享给大家供大家参考，具体如下：
这里我们通过需求逐渐引出装饰者模式。
下面是一个关于几代汽车的不同逐渐体现装饰者模式的。
首先，我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法，代码如下，
//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
varInterface=function(name,methods){//name：接口名字
if(arguments.length<2){
alert("必须是两个参数")
}
this.name=name;
this.methods=[];//定义一个空数组装载函数名
for(vari=0;i
（1）统一接口
varShopInterface=newInterface("FirstShop",["getPrice","assemble"]);//规定了实现的方法
（2）实现接口并内部检验
varfirst=function(){
//接口实现部分
this.getPrice=function(){
document.write(15000+"
")
}
this.assemble=function(){
document.write("汽车组装....
")
}
Interface.ensureImplement(this,ShopInterface);//检验类是否实现接口
}
（3）第一个汽车实例
//第一个汽车实例
varfirstShop=newfirst();
firstShop.getPrice();
firstShop.assemble();
document.write("...............first...............
")
现在我们开始有一个新的需求，汽车需要有附属的产品如：音响(K),真皮沙发(M),保险杠(N)。
通过分析我们可以知道，每一个附属的产品会影响到到汽车的组装和其价格，那我们能想到什么办法呢？
第一种方案：通过修改接口
（1）接口定义为
varSecondInterface=newInterface("SecondInterface",["getPrice","assemble","addK","addM","addN"]);
（2）类实现接口并验证
varsecond=function(){
varprice=15000;
//实例接口部分
this.getPrice=function(){
document.write(price+"
")
}
this.assemble=function(){
document.write("汽车组装.....
");
}
this.addK=function(){
price+=1000;
}
this.addM=function(){
price+=2000;
}
this.addN=function(){
price+=3000;
}
Interface.ensureImplement(this,SecondInterface);//当前对象实例时会被调用
}
（3）第二个汽车实例
//第二个汽车实例
varsecondShop=newsecond();
secondShop.addK();
secondShop.addM();
secondShop.addN();
secondShop.getPrice();
secondShop.assemble();
document.write(".....................second.........................
");
咦，我们好像实现啦，但是问题来了，我把接口改了可是我实现本接口的是类不一定全要有K,M,N呀。难道我要修改所有实现本接口的实现类吗?显然是不对的,如果不改变接口那我就增加子类，这样可以吗？
第二种方案，不改变接口，增加子类
（1）接口仍然为
varthirdInterface=newInterface("FirstShop",["getPrice","assemble"]);
（2）汽车原型类--实现接口
varthird=function(){
this.getPrice=function(){
document.write(15000+"
");
}
this.assemble=function(){
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
}
（3）各个子类
varthirdM=function(){
this.getPrice=function(){
document.write(15000+"
");
}
this.assemble=function(){
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
};
我们不禁会问，难道每个子类都要这样写吗？如果子类非常多的话，那我们还不得写疯，所以这种方式也是不可取的。
第三种方案：使用装饰器模式
装饰者可以为原型对象添加新的特性，透明的把对象包装在具有相同接口的新对象中。
具体代码如下：
（1）接口中不变，代码如下
varcomInterface=newInterface("FirstShop",["getPrice","assemble"]);
（2）目标对象（原型）--需要被装饰的原对象(属于包裹在内部的部分)--实现接口并在实例时检验
vartargetShop=function(){
this.getPrice=function(){
return15000;
}
this.assemble=function(){
document.write("汽车组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
（3）各装饰类，包裹原对象的东西。
#M:
varcarM=function(carShop){
this.getPrice=function(){
return1000+carShop.getPrice();
}
this.assemble=function(){
document.write("M组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
#N:
varcarN=function(carShop){
this.getPrice=function(){
return2000+carShop.getPrice();
}
this.assemble=function(){
document.write("N组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
#K:
varcarK=function(carShop){
this.getPrice=function(){
return3000+carShop.getPrice();
}
this.assemble=function(){
document.write("K组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
};
（4）使用各种装饰来包装我们的车吧
//包装车
varnewCar=newcarK(newcarM(newtargetShop));//有K和M的车
varnewCar2=newcarK(newcarM(newcarN(newtargetShop)));
document.write(newCar.getPrice()+"
");
document.write(newCar2.getPrice());
总结一下，装饰者可以用在类上，同样也可以用在类中的函数上。
如果原有的功能不是适合你的项目，你需要大量的扩充原有功能，并且不不想改变原有的接口,那你用装饰者模式就对了。
用图理解一下上述模式：
包装的原理图：--包装链
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。