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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
js脚本实现数据去重
Nov 27 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
js实现图片局部放大效果详解
Mar 18 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
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实现多级树型菜单
2006/10/09 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
PHP关联链接常用代码
2012/11/05 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
解放web程序员的输入验证
2006/10/06 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
Vue3.x源码调试的实现方法
2019/10/13 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python网络应用开发知识点浅析
2019/05/28 Python
python实现图片上添加图片
2019/11/26 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python中有函数重载吗
2020/05/28 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
财务会计求职信范文
2015/03/20 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
医院病假条范文
2015/08/17 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers