JavaScript设计模式之装饰者模式实例详解


Posted in Javascript onJanuary 17, 2019

本文实例讲述了JavaScript设计模式之装饰者模式。分享给大家供大家参考,具体如下:

这里我们通过需求逐渐引出装饰者模式。

下面是一个关于几代汽车的不同逐渐体现装饰者模式的。

首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下,

//定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name:接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;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<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是Interface类型
    if(inter.constructor!=Interface){
      throw new Error("如果是接口类的话,就必须是Interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合分析
    for(var j=0;j<inter.methods.length;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"]);//规定了实现的方法

(2)实现接口并内部检验

var first=function () {
    //接口实现部分
    this.getPrice=function () {
      document.write(15000+"<br>")
    }
    this.assemble=function () {
     document.write("汽车组装....<br>")
    }
    Interface.ensureImplement(this,ShopInterface);//检验类是否实现接口
}

(3)第一个汽车实例

//第一个汽车实例
var firstShop=new first();
firstShop.getPrice();
firstShop.assemble();
document.write("...............first...............<br>")

现在我们开始有一个新的需求,汽车需要有附属的产品如: 音响(K) ,真皮沙发(M),保险杠(N)。

通过分析我们可以知道,每一个附属的产品会影响到到汽车的组装和其价格,那我们能想到什么办法呢?

第一种方案:通过 修改接口

(1)接口定义为

var SecondInterface=new Interface("SecondInterface",["getPrice","assemble","addK","addM","addN"]);

(2)类实现接口并验证

var second=function () {
     var price=15000;
     //实例接口部分
     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.ensureImplement(this,SecondInterface);//当前对象实例时会被调用
}

(3)第二个汽车实例

//第二个汽车实例
var secondShop=new second();
 secondShop.addK();
 secondShop.addM();
 secondShop.addN();
 secondShop.getPrice();
 secondShop.assemble();
 document.write(".....................second.........................<br>");

咦,我们好像实现啦,但是问题来了,我把接口改了可是我实现本接口的是类不一定全要有K,M,N呀。难道我要修改所有实现本接口的实现类吗?显然是不对的,如果不改变接口那我就增加子类,这样可以吗?

第二种方案,不改变接口,增加子类

(1)接口仍然为

var thirdInterface=new Interface("FirstShop",["getPrice","assemble"]);

(2)汽车原型类--实现接口

var third=function () {
  this.getPrice=function () {
    document.write(15000+"<br>");
  }
  this.assemble=function () {
    document.write("汽车组装.....<br>");
  }
  Interface.ensureImplement(this,thirdInterface);
}

(3)各个子类

var thirdM=function () {
  this.getPrice=function () {
    document.write(15000+"<br>");
  }
  this.assemble=function () {
    document.write("汽车组装.....<br>");
  }
  Interface.ensureImplement(this,thirdInterface);
};

我们不禁会问,难道每个子类都要这样写吗?如果子类非常多的话,那我们还不得写疯,所以这种方式也是不可取的。

第三种方案:使用装饰器模式

装饰者可以为原型对象添加新的特性,透明的把对象包装在具有相同接口的新对象中。

具体代码如下:

(1)接口中不变,代码如下

var comInterface=new Interface("FirstShop",["getPrice","assemble"]);

(2)目标对象(原型)--需要被装饰的原对象(属于包裹在内部的部分)--实现接口并在实例时检验

var targetShop = function(){
    this.getPrice = function(){
      return 15000;
    }
    this.assemble =function(){
      document.write("汽车组装....<br>")
    }
    Interface.ensureImplement(this,comInterface);//接口检验
}

(3)各装饰类,包裹原对象的东西。

M:

var carM = function(carShop) {
    this.getPrice = function () {
      return 1000 + carShop.getPrice();
    }
    this.assemble = function () {
      document.write("M组装....<br>")
    }
    Interface.ensureImplement(this,comInterface);//接口检验
}

N:

var carN = function(carShop){
    this.getPrice = function(){
      return 2000+carShop.getPrice();
    }
    this.assemble =function(){
      document.write("N组装....<br>")
    }
    Interface.ensureImplement(this,comInterface);//接口检验
}

K:

var carK=function (carShop) {
    this.getPrice=function () {
      return 3000+carShop.getPrice();
    }
    this.assemble=function () {
      document.write("K组装....<br>")
    }
    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()+"<br>");
document.write(newCar2.getPrice());

总结一下,装饰者可以用在类上,同样也可以用在类中的函数上。

如果原有的功能不是适合你的项目, 你需要大量的扩充原有功能, 并且不不想改变原有的接口,那你用装饰者模式就对了。

用图理解一下上述模式:

JavaScript设计模式之装饰者模式实例详解

包装的原理图:--包装链

JavaScript设计模式之装饰者模式实例详解

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
jquery常用的12个小功能
Jul 22 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
VUE动态生成word的实现
Jul 26 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
npm 常用命令详解(小结)
Jan 17 #Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 #Javascript
vuex页面刷新后数据丢失的方法
Jan 17 #Javascript
jquery获取img的src值实例介绍
Jan 16 #jQuery
js中int和string数据类型互相转化实例
Jan 16 #Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 #Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 #Javascript
You might like
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
prototype 的说明 js类
2006/09/07 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
js禁止表单重复提交
2017/08/29 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python切片操作深入详解
2018/07/27 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python集合是否可变总结
2019/06/20 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python流程控制 if else实现解析
2019/09/02 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
C# Debug和Testing相关面试题
2015/10/25 面试题
小学班主任寄语大全
2014/04/04 职场文书
班训口号大全
2014/06/18 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
收入证明范本
2015/06/12 职场文书
Python如何配置环境变量详解
2021/05/18 Python