天津做网站的费用,西安到北京西火车时刻表,网站建设如何来选择空间,网页加速器怎么用JavaScript装饰者模式 1 什么是装饰者模式2 模拟装饰者模式3 JavaScript的装饰者4 装饰函数5 AOP装饰函数6 示例#xff1a;数据统计上报 1 什么是装饰者模式
在程序开发中#xff0c;许多时候都我们并不希望某个类天生就非常庞大#xff0c;一次性包含许多职责。那么我们就… JavaScript装饰者模式 1 什么是装饰者模式2 模拟装饰者模式3 JavaScript的装饰者4 装饰函数5 AOP装饰函数6 示例数据统计上报 1 什么是装饰者模式
在程序开发中许多时候都我们并不希望某个类天生就非常庞大一次性包含许多职责。那么我们就可以使用装饰者模式。
装饰者模式可以动态地给某个对象添加一些额外的职责而不会影响从这个类中派生的其他对象它能够在不改变对象自身的基础上在程序运行期间给对象动态地添加职责。
2 模拟装饰者模式
假设我们在编写一个飞机大战的游戏随着经验值的增加我们操作的飞机对象可以升级成更厉害的飞机一开始这些飞机只能发射普通的子弹升到第二级时可以发射导弹升到第三级时可以发射原子弹接下来用代码实现这个过程首先定义一个飞机类
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(发射原子弹);
};导弹类和原子弹类的构造函数都接受参数plane对象并且保存好这个参数在它们的fire方法中除了执行自身的操作之外还调用plane对象的fire方法。这种给对象动态增加职责的方式并没有真正地改动对象自身而是将对象放入另一个对象之中这些对象以一条链的方式进行引用形成一个聚合对象。这些对象都拥有相同的接口fire方法当请求达到链中的某个对象时这个对象会执行自身的操作随后把请求转发给链中的下一个对象。
接下来测试一下
var plane new Plane();
plane new MissileDecorator(plane);
plane new AtomDecorator(plane);
plane.fire();// 发射普通子弹
// 发射导弹
// 发射原子弹3 JavaScript的装饰者
JavaScript可以直接改写对象或者对象的某个方法并不需要使用“类”来实现装饰者模式代码如下
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();
// 分别输出 发射普通子弹、发射导弹、发射原子弹4 装饰函数
在JavaScript中可以很方便地给某个对象扩展属性和方法但却很难在不改动某个函数源代码的情况下给该函数添加一些额外的功能。在代码的运行期间我们很难切入某个函数的执行环境。要想为函数添加一些功能最简单粗暴的方式就是直接改写该函数但这是最差的办法直接违反了开放封闭原则。
现在需要一个办法在不改变函数源代码的情况下能给函数增加功能通过保存原引用的方式就可以改写某个函数
var a function () {alert(1);
};
var _a a;
a function () {_a();alert(2);
};
a();这是实际开发中很常见的一种做法比如我们想给window绑定onload事件但是又不确定这个事件是不是已经被其他人绑定过为了避免覆盖掉之前的window.onload函数中的行为我们一般都会先保存好原先的window.onload把它放入新的window.onload里执行
window.onload function () {alert(1);
};
var _onload window.onload || function () {};
window.onload function () {_onload();alert(2);
};这种方式存在以下两个问题
必须维护_onload这个中间变量虽然看起来并不起眼但如果函数的装饰链较长或者需要装饰的函数变多这些中间变量的数量也会越来越多this被劫持
接下来通过AOP来提供一种完美的方法给函数动态增加功能。
5 AOP装饰函数
首先给出Function.prototype.before方法和Function.prototype.after方法
Function.prototype.before function (beforefn) {var __self this; // 保存原函数的引用return function () {// 返回包含了原函数和新函数的代理函数beforefn.apply(this, arguments); // 执行新函数且保证 this 不被劫持新函数接受的参数// 也会被原封不动地传入原函数新函数在原函数之前执行return __self.apply(this, arguments); // 执行原函数并返回原函数的执行结果并且保证 this 不被劫持};
};
Function.prototype.after function (afterfn) {var __self this;return function () {var ret __self.apply(this, arguments);afterfn.apply(this, arguments);return ret;};
};Function.prototype.before接受一个函数当作参数这个函数即为新添加的函数它装载了新添加的功能代码。接下来把当前的this保存起来这个this指向原函数保证了this不会被劫持然后返回一个函数。它的工作是把请求分别转发给新添加的函数和原函数且负责保证它们的执行顺序让新添加的函数在原函数之前执行前置装饰这样就实现了动态装饰的效果。
Function.prototype.after的原理跟Function.prototype.before一模一样唯一不同的地方在于让新添加的函数在原函数执行之后再执行。
button idbutton/button
scriptFunction.prototype.before function (beforefn) {var __self this;return function () {beforefn.apply(this, arguments);return __self.apply(this, arguments);}}document.getElementById document.getElementById.before(function () {alert(1);});var button document.getElementById(button);console.log(button);
/script再回到window.onload的例子用Function.prototype.before来增加新的window.onload事件简单了很多
window.onload function () {alert(1);
};
window.onload (window.onload || function () {}).after(function () {alert(2);}).after(function () {alert(3);}).after(function () {alert(4);});6 示例数据统计上报
比如页面中有一个登录button点击这个button会弹出登录浮层与此同时要进行数据上报来统计有多少用户点击了这个登录button
button taglogin idbutton点击打开登录浮层/button
scriptvar showLogin function () {console.log(打开登录浮层);log(this.getAttribute(tag));}var log function (tag) {console.log(上报标签为: tag);// (new Image).src http:// xxx.com/report?tag tag; // 真正的上报代码略}document.getElementById(button).onclick showLogin;
/script我们看到在showLogin函数里既要负责打开登录浮层又要负责数据上报这是两个层面的功能在此处却被耦合在一个函数里。使用 AOP 分离之后代码如下
button taglogin idbutton点击打开登录浮层/button
scriptFunction.prototype.after function (afterfn) {var __self this;return function () {var ret __self.apply(this, arguments);afterfn.apply(this, arguments);return ret;}};var showLogin function () {console.log(打开登录浮层);}var log function () {console.log(上报标签为: this.getAttribute(tag));}showLogin showLogin.after(log); // 打开登录浮层之后上报数据document.getElementById(button).onclick showLogin;
/script
