首页 >> js开发 >> js代码JavaScript装饰者模式原理与用法实例详解
js代码JavaScript装饰者模式原理与用法实例详解
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了JavaScript装饰者模式原理与用法。分享给大家供大家参考，具体如下：这里我们通过需求逐渐引出装饰者模式。下面是一个关于几代汽车的不同逐渐体现装饰者模式的。首先，我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法，代码如下，
//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name：接口名字
if(arguments.length<2){
alert("必须是两个参数")
}
this.name=name;
this.methods=[];//定义一个空数组装载函数名
for(var i=0;i
if(typeof methods[i]!="string"){
alert("函数名必须是字符串类型");
}else {
this.methods.push( methods[i]);
}
}
};
Interface.ensureImplement=function (object) {
if(arguments.length<2){
throw new Error("参数必须不少于2个")
return false;
}
for(var i=1;i
var inter=arguments[i];
//如果是接口就必须是Interface类型
if(inter.constructor!=Interface){
throw new Error("如果是接口类的话，就必须是Interface类型");
}
//判断接口中的方法是否全部实现
//遍历函数集合分析
for(var j=0;j
var method=inter.methods[j];//接口中所有函数
//object[method]传入的函数
//最终是判断传入的函数是否与接口中所用函数匹配
if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
throw new Error("实现类中没有完全实现接口中的所有方法")
}
}
}
}
//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name：接口名字
if(arguments.length<2){
alert("必须是两个参数")
}
this.name=name;
this.methods=[];//定义一个空数组装载函数名
for(var i=0;i
if(typeof methods[i]!="string"){
alert("函数名必须是字符串类型");
}else {
this.methods.push( methods[i]);
}
}
};
Interface.ensureImplement=function (object) {
if(arguments.length<2){
throw new Error("参数必须不少于2个")
return false;
}
for(var i=1;i
var inter=arguments[i];
//如果是接口就必须是Interface类型
if(inter.constructor!=Interface){
throw new Error("如果是接口类的话，就必须是Interface类型");
}
//判断接口中的方法是否全部实现
//遍历函数集合分析
for(var j=0;j
var method=inter.methods[j];//接口中所有函数
//object[method]传入的函数
//最终是判断传入的函数是否与接口中所用函数匹配
if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
throw new Error("实现类中没有完全实现接口中的所有方法")
}
}
}
}（1）统一接口
var ShopInterface=new Interface("FirstShop",["getPrice","assemble"]);//规定了实现的方法
var ShopInterface=new Interface("FirstShop",["getPrice","assemble"]);//规定了实现的方法（2）实现接口并内部检验
var first=function () {
//接口实现部分
this.getPrice=function () {
document.write(15000+"
")
}
this.assemble=function () {
document.write("汽车组装....
")
}
Interface.ensureImplement(this,ShopInterface);//检验类是否实现接口
}
var first=function () {
//接口实现部分
this.getPrice=function () {
document.write(15000+"
")
}
this.assemble=function () {
document.write("汽车组装....
")
}
Interface.ensureImplement(this,ShopInterface);//检验类是否实现接口
}（3）第一个汽车实例
//第一个汽车实例
var firstShop=new first();
firstShop.getPrice();
firstShop.assemble();
document.write("...............first...............
")
//第一个汽车实例
var firstShop=new first();
firstShop.getPrice();
firstShop.assemble();
document.write("...............first...............
") 现在我们开始有一个新的需求，汽车需要有附属的产品如： 音响(K) ,真皮沙发(M),保险杠(N)。通过分析我们可以知道，每一个附属的产品会影响到到汽车的组装和其价格，那我们能想到什么办法呢？第一种方案：通过 修改接口第一种方案：通过 修改接口（1）接口定义为
var SecondInterface=new Interface("SecondInterface",["getPrice","assemble","addK","addM","addN"]);
var SecondInterface=new Interface("SecondInterface",["getPrice","assemble","addK","addM","addN"]);（2）类实现接口并验证
var second=function () {
var price=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);//当前对象实例时会被调用
}
var second=function () {
var price=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）第二个汽车实例
//第二个汽车实例
var secondShop=new second();
secondShop.addK();
secondShop.addM();
secondShop.addN();
secondShop.getPrice();
secondShop.assemble();
document.write(".....................second.........................
");
//第二个汽车实例
var secondShop=new second();
secondShop.addK();
secondShop.addM();
secondShop.addN();
secondShop.getPrice();
secondShop.assemble();
document.write(".....................second.........................
");咦，我们好像实现啦，但是问题来了，我把接口改了可是我实现本接口的是类不一定全要有K,M,N呀。难道我要修改所有实现本接口的实现类吗?显然是不对的,如果不改变接口那我就增加子类，这样可以吗？第二种方案，不改变接口，增加子类第二种方案，不改变接口，增加子类（1）接口仍然为
var thirdInterface=new Interface("FirstShop",["getPrice","assemble"]);
var thirdInterface=new Interface("FirstShop",["getPrice","assemble"]);（2）汽车原型类--实现接口
var third=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
}
var third=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
}（3）各个子类
var thirdM=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
};
var thirdM=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
};我们不禁会问，难道每个子类都要这样写吗？如果子类非常多的话，那我们还不得写疯，所以这种方式也是不可取的。第三种方案：使用装饰器模式第三种方案：使用装饰器模式装饰者可以为原型对象添加新的特性，透明的把对象包装在具有相同接口的新对象中。具体代码如下：（1）接口中不变，代码如下
var comInterface=new Interface("FirstShop",["getPrice","assemble"]);
var comInterface=new Interface("FirstShop",["getPrice","assemble"]);（2）目标对象（原型）--需要被装饰的原对象(属于包裹在内部的部分)--实现接口并在实例时检验
var targetShop = function(){
this.getPrice = function(){
return 15000;
}
this.assemble =function(){
document.write("汽车组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
var targetShop = function(){
this.getPrice = function(){
return 15000;
}
this.assemble =function(){
document.write("汽车组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}（3）各装饰类，包裹原对象的东西。#M:
var carM = function(carShop) {
this.getPrice = function () {
return 1000 + carShop.getPrice();
}
this.assemble = function () {
document.write("M组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
var carM = function(carShop) {
this.getPrice = function () {
return 1000 + carShop.getPrice();
}
this.assemble = function () {
document.write("M组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}#N:
var carN = function(carShop){
this.getPrice = function(){
return 2000+carShop.getPrice();
}
this.assemble =function(){
document.write("N组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
var carN = function(carShop){
this.getPrice = function(){
return 2000+carShop.getPrice();
}
this.assemble =function(){
document.write("N组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}#K:
var carK=function (carShop) {
this.getPrice=function () {
return 3000+carShop.getPrice();
}
this.assemble=function () {
document.write("K组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
};
var carK=function (carShop) {
this.getPrice=function () {
return 3000+carShop.getPrice();
}
this.assemble=function () {
document.write("K组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
};（4）使用各种装饰来包装我们的车吧
//包装车
var newCar=new carK(new carM(new targetShop));//有K和M的车
var newCar2=new carK(new carM(new carN(new targetShop)));
document.write(newCar.getPrice()+"
");
document.write(newCar2.getPrice());
//包装车
var newCar=new carK(new carM(new targetShop));//有K和M的车
var newCar2=new carK(new carM(new carN(new targetShop)));
document.write(newCar.getPrice()+"
");
document.write(newCar2.getPrice()); 总结一下，装饰者可以用在类上，同样也可以用在类中的函数上。如果原有的功能不是适合你的项目， 你需要大量的扩充原有功能， 并且不不想改变原有的接口,那你用装饰者模式就对了。用图理解一下上述模式：包装的原理图：--包装链感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools./code/WebCodeRun测试上述代码运行效果。在线HTML/CSS/JavaScript前端代码调试运行工具在线HTML/CSS/JavaScript前端代码调试运行工具http://tools./code/WebCodeRun关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name：接口名字
if(arguments.length<2){
alert("必须是两个参数")
}
this.name=name;
this.methods=[];//定义一个空数组装载函数名
for(var i=0;i
if(typeof methods[i]!="string"){
alert("函数名必须是字符串类型");
}else {
this.methods.push( methods[i]);
}
}
};
Interface.ensureImplement=function (object) {
if(arguments.length<2){
throw new Error("参数必须不少于2个")
return false;
}
for(var i=1;i
var inter=arguments[i];
//如果是接口就必须是Interface类型
if(inter.constructor!=Interface){
throw new Error("如果是接口类的话，就必须是Interface类型");
}
//判断接口中的方法是否全部实现
//遍历函数集合分析
for(var j=0;j
var method=inter.methods[j];//接口中所有函数
//object[method]传入的函数
//最终是判断传入的函数是否与接口中所用函数匹配
if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
throw new Error("实现类中没有完全实现接口中的所有方法")
}
}
}
}
//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name：接口名字
if(arguments.length<2){
alert("必须是两个参数")
}
this.name=name;
this.methods=[];//定义一个空数组装载函数名
for(var i=0;i
if(typeof methods[i]!="string"){
alert("函数名必须是字符串类型");
}else {
this.methods.push( methods[i]);
}
}
};
Interface.ensureImplement=function (object) {
if(arguments.length<2){
throw new Error("参数必须不少于2个")
return false;
}
for(var i=1;i
var inter=arguments[i];
//如果是接口就必须是Interface类型
if(inter.constructor!=Interface){
throw new Error("如果是接口类的话，就必须是Interface类型");
}
//判断接口中的方法是否全部实现
//遍历函数集合分析
for(var j=0;j
var method=inter.methods[j];//接口中所有函数
//object[method]传入的函数
//最终是判断传入的函数是否与接口中所用函数匹配
if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
throw new Error("实现类中没有完全实现接口中的所有方法")
}
}
}
}（1）统一接口
var ShopInterface=new Interface("FirstShop",["getPrice","assemble"]);//规定了实现的方法
var ShopInterface=new Interface("FirstShop",["getPrice","assemble"]);//规定了实现的方法（2）实现接口并内部检验
var first=function () {
//接口实现部分
this.getPrice=function () {
document.write(15000+"
")
}
this.assemble=function () {
document.write("汽车组装....
")
}
Interface.ensureImplement(this,ShopInterface);//检验类是否实现接口
}
var first=function () {
//接口实现部分
this.getPrice=function () {
document.write(15000+"
")
}
this.assemble=function () {
document.write("汽车组装....
")
}
Interface.ensureImplement(this,ShopInterface);//检验类是否实现接口
}（3）第一个汽车实例
//第一个汽车实例
var firstShop=new first();
firstShop.getPrice();
firstShop.assemble();
document.write("...............first...............
")
//第一个汽车实例
var firstShop=new first();
firstShop.getPrice();
firstShop.assemble();
document.write("...............first...............
") 现在我们开始有一个新的需求，汽车需要有附属的产品如： 音响(K) ,真皮沙发(M),保险杠(N)。通过分析我们可以知道，每一个附属的产品会影响到到汽车的组装和其价格，那我们能想到什么办法呢？第一种方案：通过 修改接口第一种方案：通过 修改接口（1）接口定义为
var SecondInterface=new Interface("SecondInterface",["getPrice","assemble","addK","addM","addN"]);
var SecondInterface=new Interface("SecondInterface",["getPrice","assemble","addK","addM","addN"]);（2）类实现接口并验证
var second=function () {
var price=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);//当前对象实例时会被调用
}
var second=function () {
var price=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）第二个汽车实例
//第二个汽车实例
var secondShop=new second();
secondShop.addK();
secondShop.addM();
secondShop.addN();
secondShop.getPrice();
secondShop.assemble();
document.write(".....................second.........................
");
//第二个汽车实例
var secondShop=new second();
secondShop.addK();
secondShop.addM();
secondShop.addN();
secondShop.getPrice();
secondShop.assemble();
document.write(".....................second.........................
");咦，我们好像实现啦，但是问题来了，我把接口改了可是我实现本接口的是类不一定全要有K,M,N呀。难道我要修改所有实现本接口的实现类吗?显然是不对的,如果不改变接口那我就增加子类，这样可以吗？第二种方案，不改变接口，增加子类第二种方案，不改变接口，增加子类（1）接口仍然为
var thirdInterface=new Interface("FirstShop",["getPrice","assemble"]);
var thirdInterface=new Interface("FirstShop",["getPrice","assemble"]);（2）汽车原型类--实现接口
var third=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
}
var third=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
}（3）各个子类
var thirdM=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
};
var thirdM=function () {
this.getPrice=function () {
document.write(15000+"
");
}
this.assemble=function () {
document.write("汽车组装.....
");
}
Interface.ensureImplement(this,thirdInterface);
};我们不禁会问，难道每个子类都要这样写吗？如果子类非常多的话，那我们还不得写疯，所以这种方式也是不可取的。第三种方案：使用装饰器模式第三种方案：使用装饰器模式装饰者可以为原型对象添加新的特性，透明的把对象包装在具有相同接口的新对象中。具体代码如下：（1）接口中不变，代码如下
var comInterface=new Interface("FirstShop",["getPrice","assemble"]);
var comInterface=new Interface("FirstShop",["getPrice","assemble"]);（2）目标对象（原型）--需要被装饰的原对象(属于包裹在内部的部分)--实现接口并在实例时检验
var targetShop = function(){
this.getPrice = function(){
return 15000;
}
this.assemble =function(){
document.write("汽车组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
var targetShop = function(){
this.getPrice = function(){
return 15000;
}
this.assemble =function(){
document.write("汽车组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}（3）各装饰类，包裹原对象的东西。#M:
var carM = function(carShop) {
this.getPrice = function () {
return 1000 + carShop.getPrice();
}
this.assemble = function () {
document.write("M组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
var carM = function(carShop) {
this.getPrice = function () {
return 1000 + carShop.getPrice();
}
this.assemble = function () {
document.write("M组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}#N:
var carN = function(carShop){
this.getPrice = function(){
return 2000+carShop.getPrice();
}
this.assemble =function(){
document.write("N组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}
var carN = function(carShop){
this.getPrice = function(){
return 2000+carShop.getPrice();
}
this.assemble =function(){
document.write("N组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
}#K:
var carK=function (carShop) {
this.getPrice=function () {
return 3000+carShop.getPrice();
}
this.assemble=function () {
document.write("K组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
};
var carK=function (carShop) {
this.getPrice=function () {
return 3000+carShop.getPrice();
}
this.assemble=function () {
document.write("K组装....
")
}
Interface.ensureImplement(this,comInterface);//接口检验
};（4）使用各种装饰来包装我们的车吧
//包装车
var newCar=new carK(new carM(new targetShop));//有K和M的车
var newCar2=new carK(new carM(new carN(new targetShop)));
document.write(newCar.getPrice()+"
");
document.write(newCar2.getPrice());
//包装车
var newCar=new carK(new carM(new targetShop));//有K和M的车
var newCar2=new carK(new carM(new carN(new targetShop)));
document.write(newCar.getPrice()+"
");
document.write(newCar2.getPrice()); 总结一下，装饰者可以用在类上，同样也可以用在类中的函数上。如果原有的功能不是适合你的项目， 你需要大量的扩充原有功能， 并且不不想改变原有的接口,那你用装饰者模式就对了。用图理解一下上述模式：包装的原理图：--包装链感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools./code/WebCodeRun测试上述代码运行效果。在线HTML/CSS/JavaScript前端代码调试运行工具在线HTML/CSS/JavaScript前端代码调试运行工具http://tools./code/WebCodeRun关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
刚刚发布热门点击发布时间
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
