js设计模式：装饰者模式

[AngusLius]

ES6装饰器

类的修饰

例如：
React 和 Redux库结合

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

可以修改为：

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

方法的修饰

修饰器第一个参数是类的原型对象，修饰器的本意是要“修饰”类的实例，但是这个时候实例还没生成，所以只能去修饰原型；第二个参数是所要修饰的属性名，第三个参数是该属性的描述对象。

如果同一个方法有多个修饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。

除了注释，修饰器还能用来类型检查。所以，对于类来说，这项功能相当有用。从长期来看，它将是 JavaScript 代码静态分析的重要工具。

装饰者模式

定义

能够在不改变对象自身的基础上，在程序运行期间给对象动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

装饰者模式的特点：

可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象；

继承的一些缺点：

继承会导致超类和子类之间存在强耦合性，当超类改变时，子类也会随之改变；
超类的内部细节对于子类是可见的，继承常常被认为破坏了封装性

装饰函数

1.使用装饰者模式例子

window.onload=function () {
    console.log('test');
};
var  _onload= window.onload || function () {};
window.onload=function () {
    _onload();
    console.log('自己的处理函数');
};

2、使用AOP（面向切面编程）装饰函数
封装before函数

//是新添加的函数在旧函数之前执行
Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存旧函数的引用
    return function () {                           //返回包含旧函数和新函数的“代理”函数
        beforefn.apply(this,arguments);            //执行新函数,且保证this不被劫持,新函数接受的参数
                                                    // 也会被原封不动的传入旧函数,新函数在旧函数之前执行
        return _this.apply(this,arguments);
    };
};

封装after函数

//新添加的函数在旧函数之后执行
Function.prototype.after=function (afterfn) {
    var _this=this;
    return function () {
        var ret=_this.apply(this,arguments);
        afterfn.apply(this,arguments);
        return ret;
    };
};

// 注解：执行过程中after原型函数中的self为
   function () {
   		beforefn.apply(this, arguments)
   		return func.appy(this, arguments)
   }

应用场景

1、分离业务代码和数据统计代码
2、用AOP动态改变函数的参数
3、分离表单请求和校验

装饰者模式和代理模式

代理模式的目的是，当直接访问本体不方便或者不符合需要时，为这个本体提供一个替代者。本体定义了关键功能，而代理提供或拒绝对它的访问，或者在访问本体之前做一些额外的事情。

装饰者模式的作用就是为对象动态加入行为。换句话说，代理模式强调一种关系，这种关系可以静态的表达，也就是说，这种关系在一开始就可以被确定。而装饰者模式用于一开始不能确定对象的全部功能时。
参考：
zhiqiang21/blog#17
http://es6.ruanyifeng.com/#docs/decorator