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

        };

巴特西

JS模式--装饰者模式

最新文章

热门文章