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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
PHP无限分类的类
2007/01/02 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
公司请假条范文
2014/04/11 职场文书
大学生找工作求职信
2014/07/09 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
Python List remove()实例用法详解
2021/08/02 Python