JS模式--装饰者模式

• 在Javascript中动态的给对象添加职责的方式称作装饰者模式。
• 下面我们通常遇到的例子：

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();

 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 plan = new Plane();
        plan = new MissileDecorator(plan);
        plan = new AtomDecorator(plan);

        plan.fire();
        /*
        发射普通子弹
        发射导弹
        发射原子弹
        */

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

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();
        /*
       发射普通子弹
       发射导弹
       发射原子弹
       */

• 我们在实际开发过程当中，想给window绑定onload事件，但是又不确定这个事件有没有被其他人已经给绑定过，
• 为了避免覆盖掉原来的window.onload函数中的行为，我们就用装饰者模式，先将原来的函数保存起来，再把它放入新的函数中执行。

window.onload = function () {
            alert(1);
        };
        var _onload = window.onload || function () { };

        window.onload = function () {
            _onload();
            alert(2);
        };