0%

装饰者模式


装饰者模式:给对象动态地增加职责。跟继承相比,装饰者是一种更轻便灵活的做法,是一种“即用即付”的方式。

js的装饰者

假设我们在编写一个飞机大战游戏,这个飞机可以升级,发射导弹,发射原子弹


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

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

需求:
页面中有个按钮,点击会弹出登录浮层,与此同时要进行数据上报, 这时候我们最好去分离业务代码和数据统计代码,以便维护。


var showLogin