Aop又叫面向切面编程，其中“通知”是切面的具体实现，分为before（前置通知）、after（后置通知）、around（环绕通知），用过spring的同学肯定对它非常熟悉，而在js中，AOP是一个被严重忽视的技术点。但是利用aop可以有效的改善js代码逻辑，比如前端框架dojo和yui3中AOP则被提升至自定义事件的一种内在机制，在源码中随处可见。得益于这种抽象使得dojo的自定义事件异常强大和灵活。dojo中aop的实现在dojo/aspect模块中，主要有三个方法：before、after、around，本文会带领大家一步步实现around方法，后续文章将会深入解析dojo/aspect模块的结构体系。
js要实现环绕通知，最简单也最应被想到的就是利用callback（回调）
advice = function(originalFunc){
console.log("before function");
originalFunc();
console.log("after function");
}
var obj = {
foo: function(){
console.log('foo');
}
}
advice(obj.foo)
结果：
before function
foo
after function
哈哈，太简单了，是不是可以回去睡觉了。。。。
可是，是不是有点太粗糙了。。。。说好的环绕呢。。。。至少下次调用obj.foo也应该是这个结果，而不是一个干巴巴的“foo”；为此我我们需要在改动一下，利用一下闭包
advice = function(originalFunc){
return function() {
console.log("before function");
originalFunc();
console.log("after function");
}
}
var obj = {
foo: function(){
console.log(this.name);
},
name: "obj"
}
obj.foo = advice(obj.foo)
obj.foo()
输出：
before function
after function
看起来达到了环绕的效果，but说好的name哪去了。。。。
在advice返回的闭包中我们还要处理作用域问题
advice = function(originalFunc){
return function() {
console.log("before function");
originalFunc();
console.log("after function");
}
}
var obj = {
foo: function(){
console.log(this.name);
},
name: "obj"
}
keepContext = function() {
return obj['foo'].call(obj);
}
obj.foo = advice(keepContext);
看起来是利用call解决了作用域问题，我们运行一下看看：
卧槽，难道这就是传说中的死循环。。。。
看来还是得改变一下，借助一个中间变量消除死循环
advice = function(originalFunc){
return function() {
console.log("before function");
originalFunc();
console.log("after function");
}
}
var obj = {
foo: function(){
console.log(this.name);
},
name: "obj"
}
var exist = obj.foo;
keepContext = function() {
return exist.call(obj);
}
obj.foo = advice(keepContext);
obj.foo();
输出：
before function
obj
after function
哈哈，世界突然变得美好了。。。。
但是这一堆代码看起来是不是太low了，我们是不是要来点高大上的抽象，嗯，我也是这么想的
function around(obj, prop, advice){
var exist = obj[prop];
var advised = advice(function(){
return exist.call(obj, arguments);
});
obj[prop] = advised;
}
advice = function(originalFunc){
return function() {
console.log("before function");
originalFunc();
console.log("after function");
}
}
var obj = {
foo: function(){
console.log(this.name);
},
name: "obj"
}
around(obj, 'foo', advice);
obj.foo();
around方法将处理过程与具体对象解耦；advice只要按照如下格式来书写，就可以达到around的效果
advice = function(originalFunc){
return function() {
//before
originalFunc();
//after
}
}
哈哈，瞬间高大上，狂拽酷炫掉渣天，有木有。。。。
那么问题来了：如果不小心多调用了一次around方法肿么办。。。。 额。。。。这是个问题 我们是不是应该让around返回一个句柄，里面有个remove方法，消除绑定，就像绑定/移除事件一样。
所为remove，就是让函数下次执行时不在执行对应的around方法，而仅仅运行originalFunc方法
function around(obj, prop, advice){
var exist = obj[prop];
var previous = function(){
return exist.call(obj, arguments);
};
var advised = advice(previous);
obj[prop] = advised;
return {
remove: function(){
obj[prop] = exist;
advice = null;
previous = null;
exist = null;
obj = null;
}
}
}
var count = 1;
advice = function(originalFunc){
var current = count++;
return function() {
console.log("before function " + current);
originalFunc(arguments);
console.log("after function " + current);
}
}
var obj = {
foo: function(arg){
console.log(this.name + " and " + arg);
},
name: "obj"
}
h1 = around(obj, 'foo', advice);
h2 = around(obj, 'foo', advice);
obj.foo();
h1.remove();
obj.foo();
h2.remove();
obj.foo();
输出：
before function 2 before function 1 obj and [object Arguments] after function 1 after function 2 obj and undefined before function 1
这个。。不但结果有点乱。。。还报错了。。。。是可忍，叔不可忍，叔可忍，嫂不可忍！
啊，闭包。。。请赐予我力量吧！
function around(obj, prop, advice){
var exist = obj[prop];
var previous = function(){
return exist.apply(obj, arguments);
};
var advised = advice(previous);
obj[prop] = function(){
//当调用remove后，advised为空
//利用闭包的作用域链中可以访问到advised跟previous变量，根据advised是否为空可以来决定调用谁
return advised "before function " + current);
originalFunc.apply(this, arguments);
console.log("after function " + current);
}
}
var obj = {
foo: function(arg){
console.log(this.name + " and " + arg);
},
name: "obj"
}
h1 = around(obj, 'foo', advice);
h2 = around(obj, 'foo', advice);
obj.foo('hello world');
h1.remove();
obj.foo('hello world');
h2.remove();
obj.foo('hello world');
输出：
before function 2 before function 1 obj and hello world after function 1 after function 2 before function 2 obj and hello world after function 2 obj and hello world
打完，收功！
第一次通宵写博客也是醉了，两点钟听到隔壁fuck me，四点钟听到乌鸦啼鸣，还有一种不知道什么鸟，啾啾的叫，五点钟这个时候一堆鸟叫。。。。
参考文章：
使用AOP改善javascript代码
yui3的AOP(面向切面编程)和OOP(面向对象编程)
面向切面编程（AOP）的理解
Javascript,aop
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。