继承的缺点

“白箱复用”

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

给对象动态增加职责,并没有真正地改动对象自身,而是将对象放入另一个对象之中,这些对象以一条链的方式进行引用,形成一个聚合对象。

  1. const plane = new Plane();
  2. plane = new MissileDecorator(plane);
  3. plane = new AtomDecorator(plane);
  4. plane.fire();

JavaScript的装饰者

较差方式

重写函数,引用一份原来的,新函数执行原来的和现在的。

  1. window.onload = function () {
  2. alert(1);
  3. }
  4. var _onload = window.onload; // 增加了维护
  5. window.onload = function () {
  6. _onload();
  7. alert(2);
  8. }

AOP

before和after函数
不污染Function原型,把原函数和新函数都作为参数传入。

这和框架中“关注点分离”书写方法类似,主函数中调用其它多个函数。

  1. class AOP {
  2. handler() {
  3. this.A();
  4. this.B();
  5. this.C();
  6. }
  7. A() {}
  8. B() {}
  9. C() {}
  10. }

案例-数据统计上报

点击按钮+数据上报

动态改变函数参数

ajax请求提前改变params

  1. var ajax = function () {}
  2. ajax = ajax.before(function (type, url, params) { // 这些就是原函数的参数
  3. param.token = getToten();
  4. });

插件式的表单验证

改写before函数,validator作为before函数,返回false直接return,不在执行后面的原函数(提交)
validator写成配置问加你的形式,配合策略模式

装饰者模式和代理模式

  • 装饰着模式:实实在在地为对象增加新的职责和行为
  • 代理模式:加入一些“聪明”的功能,在访问本体之前做一些额外的事情:提供或拒绝对本体的访问。