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