《JavaScript设计模式与开发实践》——第十五章（装饰者模式）学习记录

于 2022-08-29 22:55:32 发布
阅读量181 收藏
点赞数
分类专栏： javascript设计模式 文章标签： javascript 设计模式 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37365539/article/details/125697855
版权

给对象动态地增加职责的方式称为装饰者模式。装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。跟继承相比，装饰者是一种更轻便灵活的做法，这是一种“即用即付”的方式。

模拟传统面向对象语言的装饰者模式

假设我们在编写一个飞机大战的游戏，随着经验值的增加，飞机对象可以升级成更厉害的飞机，一开始这些飞机只能发射普通的子弹，升到第二级时可以发射导弹，升到第三级时可以发射原子弹。

// 首先是原始的飞机类
var Plane = function(){}
Plane.prototype.fire = function(){
  console.log("发射普通子弹");
}
// 增加两个装饰类，分别是导弹和原子弹
var MissileDecorator = function(plane){
  this.plane = plane;
}
MissileDecorator.prototype.fire = function(){
  this.plane.fire();
  console.log("发射导弹");

}
var AtomDecorator = function(plane){
  this.plane = plane;
}
AtomDecorator.prototype.fire = function(){
  this.plane.fire();
  console.log("发射原子弹");
}
// 测试一下：
var plane = new Plane();
plane = new MissileDecorator(plane);
plane = new AtomDecorator(plane);
plane.fire();

导弹类和原子弹类的构造函数都接受参数plane对象，并且保存好这个参数，在它们的fire方法中，除了执行自身的操作之外，还调用plane对象的fire方法。
这种给对象动态增加职责的方式，并没有真正地改动对象自身，而是将对象放入另一个对象之中，这些对象以一条链的方式进行引用，形成一个聚合对象。这些对象都拥有相同的接口（fire方法），当请求达到链中的某个对象时，这个对象会执行自身的操作，随后把请求转发给链中的下一个对象。

JavaScript的装饰者

我们可以直接改写对象或者对象的某个方法，并不需要使用“类”来实现装饰者模式：

var plane = {
  fire:function(){
    console.log("发射普通子弹");
  }
}
var missileDecorator = function(){
  console.log("发射导弹");
}
var atomDecorator = function(){
  console.log("发射原子弹");
}

var fire1 = plane.fire;
plane.fire = function(){
  fire1();
  missileDecorator();
}

var fire2 = plane.fire;
plane.fire = function(){
  fire2();
  atomDecorator();
}
plane.fire();

要想为函数添加一些功能，最简单粗暴的方式就是直接改写该函数，但这是最差的办法，直接违反了开放-封闭原则。
比如:

//将
var a = function(){
  alert(1);
}
//改成：
var a = function(){
  alert(1);
  alert(2);
}

很多时候我们不想去修改原函数，所以可以通过保存原引用的方式改写某个函数：

var a = function(){
  alert(1);
}
var _a = a;
a = function(){
  _a();
  alert(2)
}
a();

这是实际开发中很常见的一种做法，比如我们想给window绑定onload事件，但是又步确定这个事件是不是已经被其他人绑定过，为了避免覆盖掉之前的window.onload函数中的行为，我们一般都会先保存好原先的

window.onload，把它放入新的window.onload里执行：
window.onload = function(){
  alert(1)
}
var _onload = window.onload || function(){};
window.onload = function(){
  _onload();
  alert(2)
}

上面的代码符合开闭原则，但是存在两个问题：

  1. 必须维护_onload这个中间变量，如果函数的装饰链较长，或者需要装饰的函数变多，这些中间变量的数量会越来越多。
  2. 还会遇到this被劫持的问题，如：
var _getElementById = document.getElementById;
document.getElementById = function(id){
  alert(1);
  return _getElementById(id);
}
var button = document.getElementById('button');

可以看到抛出异常：
在这里插入图片描述
此时_getElementById是一个全局函数，当调用一个全局函数时，this是指向window的，而document.getElementById方法的内部实现需要使用this引用，this在这个方法内预期是指向document，而不是window，这是错误发生的原因。
改进一下代码，我们要手动把document当作上下文this传入_getElementById：

var _getElementById = document.getElementById;
document.getElementById = function(){
  alert(1);
  return _getElementById.apply(document,arguments);
}
var button = document.getElementById('button');

这种形式还不太方便，接下来看一下AOP装饰函数。

使用AOP装饰函数

首先了解Function.prototype.before和Function.prototype.after方法：

Function.prototype.before = function(beforefn){
  var _self = this;//保存原函数的引用
  return function(){//返回包含了原函数和新函数的“代理”函数
    //执行新函数，且保证this不被劫持，新函数接受的参数
    // 也会被原封不动地传入原函数，新函数在原函数之前执行
    beforefn.apply(this,arguments);
    //执行原函数并返回原函数的执行结果，并且保证this不被劫持
    return _self.apply(this,arguments);
  }
}
Function.prototype.after = function(afterfn){
  var _self = this;
  return function(){
    var ret = _self.apply(this,arguments);
    afterfn.apply(this,arguments);
    return ret;
  }
}

Function.prototype.before接受一个函数当作参数，这个函数即为新添加的函数，它装载了新添加的功能代码。
接下来把当前的this保存起来，这个this指向原函数，然后返回一个“代理”函数，这个“代理”函数只是结构上像代理，并不承担代理的职责，它的工作是把请求分别转发给新添加的函数和原函数，且负责保证它们的执行顺序，让新添加的函数在原函数之前执行（前置装饰），这样就实现了动态装饰的效果。
接下来试一下：

<button id="button"></button>
document.getElementById = document.getElementById.before(function(){
  alert(111);
});
var button = document.getElementById('button');
console.log(button)

在window.onload的例子基础上使用after函数：

window.onload = function(){
  alert(1)
};
window.onload = (window.onload || function(){}).after(function(){
  alert(2);
}).after(function(){
  alert(3)
}).after(function(){
  alert(4)
})

有些人不喜欢这种污染原型的方式，我们可以把原函数和新函数都作为参数传入before或者after的方法：

var before = function(fn,beforefn){
  return function(){
    beforefn.apply(this,arguments);
    return fn.apply(this,arguments)
  }
}
var a = before(
  function(){alert(2)},
  function(){alert(3)}
);
a = before(a,function(){alert(1);});
a();

AOP的应用实例

1.数据统计上报
分离业务代码和数据统计代码，无论在什么语言中，都是AOP的经典应用之一。
比如页面中有一个登录button，点击这个button会弹出登录浮层，与此同时要进行数据上报，来统计有多少用户点击了这个登录button：

<button tag="login" id="button">点击打开登录浮层</button>
var showLogin = function(){
  console.log('打开登录浮层');
  log(this.getAttribute('tag'));
}
var log = function(tag){
  console.log('上报标签为：'+tag);
}
document.getElementById('button').onclick = showLogin;

打开登录浮层和数据上报被耦合在一个函数里，使用AOP分离之后：

Function.prototype.after = function(afterfn){
  var _self = this;
  return function(){
    var ret = _self.apply(this,arguments);
    afterfn.apply(this,arguments);
    return ret;
  }
}
var showLogin = function(){
  console.log('打开登录浮层');
}
var log = function(){
  console.log('上报标签为：'+this.getAttribute('tag'));
}
showLogin = showLogin.after(log);//打开登录浮层之后上报数据
document.getElementById('button').onclick = showLogin;

2.用AOP动态改变函数的参数

Function.prototype.before = function(beforefn){
  var _self = this;//保存原函数的引用
  return function(){//返回包含了原函数和新函数的“代理”函数
    //执行新函数，且保证this不被劫持，新函数接受的参数
    // 也会被原封不动地传入原函数，新函数在原函数之前执行
    beforefn.apply(this,arguments);
    //执行原函数并返回原函数的执行结果，并且保证this不被劫持
    return _self.apply(this,arguments);
  }
}
var func = function(param){
  console.log(param);
  
}
func = func.before(function(param){
  console.log("111",this)
    param.b = 'b'
  })
func({'a':'a'})//{a: 'a', b: 'b'}

现在有一个用于发起ajax请求的函数，这个函数负责项目中所有的ajax异步请求：

var ajax = function(type,url,param){
  console.dir(param);
  // 发送ajax请求的代码
}
ajax('get','http://xxx.com/userinfo',{name:'sven'});

现在需要在HTTP请求中带一个Token参数：

var getToken = function(){
  return 'Token';
}
// 现在的任务是给每一个ajax请求都加上Token参数：
var ajax = function(type,url,param){
  param = param || {};
  param.Token = getToken();
  console.dir(param);
}
ajax('get','http://xxx.com/userinfo',{name:'sven'});

虽然解决了问题，但我们的ajax函数相对变得僵硬了，如果另一个项目不需要验证Token，或者是Token的生成方式不同，都必须重新修改ajax函数。
为了解决这个问题，先把ajax函数还原成一个干净的函数：

var ajax = function(type,url,param){
  console.dir(param);//{Token: "Token",name: "sven"}
  // 发送ajax请求的代码
}
// 把Token参数通过before装饰到ajax函数的参数param对象中：
var getToken = function(){
  return 'Token';
}
// 现在的任务是给每一个ajax请求都加上Token参数：
ajax = ajax.before(function(type,url,param){
  param.Token = getToken();
})
ajax('get','http://xxx.com/userinfo',{name:'sven'});

明显可以看到，用AOP的方式给ajax函数动态装饰上Token参数，保证了ajax函数是一个相对纯净的函数，提高了ajax函数的可复用性，它在被迁往其他项目的时候，不需要做任何修改。
3.插件式的表单验证
表单验证对我们来说并不陌生，我们经常要在表单数据提交之前做一下校验，比如登录的时候需要验证用户名和密码是否为空：

var username = document.getElementById('username'),
    password = document.getElementById('password'),
    submitBtn = document.getElementById('submitBtn');

var formSubmit = function(){
  if(username.value === ''){
    return alert('用户名不能为空');
  }
  if(password.value === ''){
    return alert('密码不能为空');
  }
  var param = {
    username:username.value,
    password:password.value
  }
  // 提交代码略
  console.log("代码提交");
}
submitBtn.onclick = function(){
  formSubmit();
}

此时的formSubmit有两个职责，提交和验证，这样的代码比较臃肿，职责混乱。
接下来分离校验输入和提交：

var validata = function(){
  if(username.value === ''){
    alert('用户名不能为空');
    return false;
  }
  if(password.value === ''){
    alert('密码不能为空');
    return false;
  }
}
var formSubmit = function(){
  if(validata() === false){//校验未通过
    return;
  }
  var param = {
    username:username.value,
    password:password.value
  }
   // 提交代码略
   console.log("代码提交");
}
submitBtn.onclick = function(){
  formSubmit();
}

接下来进一步优化这段代码，使validata和formSubmit完全分离开来。先改写Function.prototype.before，如果beforefn的执行结果返回false，表示不再执行后面的原函数：

Function.prototype.before = function(beforefn){
  var _self = this;
  return function(){
    if(beforefn.apply(this,arguments) === false){
      //beforefn返回false的情况直接return
      return;
    };
    return _self.apply(this,arguments);
  }
}
var validata = function(){
  if(username.value === ''){
    alert('用户名不能为空');
    return false;
  }
  if(password.value === ''){
    alert('密码不能为空');
    return false;
  }
}
var formSubmit = function(){
  var param = {
    username:username.value,
    password:password.value
  }
   // 提交代码略
   console.log("代码提交");
}
formSubmit = formSubmit.before(validata);
submitBtn.onclick = function(){
  formSubmit();
}

这段代码中，校验输入和提交表单的代码完全分离开来。

刘大爷_17
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值