JavaScript装饰者模式原理与用法实例详解


Posted in Javascript onMarch 09, 2020

本文实例讲述了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装饰者模式原理与用法实例详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
js滚动条回到顶部的代码
Dec 06 Javascript
js post提交调用方法
Feb 12 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
React Fragment介绍与使用详解
Nov 11 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
JavaScript适配器模式原理与用法实例详解
Mar 09 #Javascript
JavaScript中的this基本问题实例小结
Mar 09 #Javascript
Nuxt页面级缓存的实现
Mar 09 #Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
You might like
PHP重定向的3种方式
2013/03/07 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python脚本实现查找webshell的方法
2014/07/31 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
django批量导入xml数据
2016/10/16 Python
Python学习思维导图(必看篇)
2017/06/26 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python中使用np.delete()的实例方法
2021/02/01 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
java程序员面试交流
2012/11/29 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
假期安全教育广播稿
2014/10/04 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
工程部主管岗位职责
2015/02/12 职场文书
违纪开除通知书
2015/04/25 职场文书
2015大一新生军训感言
2015/08/01 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript