Javascript aop(面向切面编程)之around(环绕)
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（回调）
1 advice = function(originalFunc){ 2 console.log("before function"); 3 originalFunc(); 4 console.log("after function"); 5 } 6 var obj = { 7 foo: function(){ 8 console.log('foo'); 9 } 10 } 11 advice(obj.foo)
结果：
before function foo after function
哈哈，太简单了，是不是可以回去睡觉了。。。。
可是，是不是有点太粗糙了。。。。说好的环绕呢。。。。至少下次调用obj.foo也应该是这个结果，而不是一个干巴巴的“foo”；为此我我们需要在改动一下，利用一下闭包
1 advice = function(originalFunc){ 2 return function() { 3 console.log("before function"); 4 originalFunc(); 5 console.log("after function"); 6 } 7 } 8 var obj = { 9 foo: function(){ 10 console.log(this.name); 11 }, 12 name: "obj" 13 } 14 obj.foo = advice(obj.foo) 15 obj.foo()
输出：
1 before function 2 3 after function
看起来达到了环绕的效果，but说好的name哪去了。。。。
在advice返回的闭包中我们还要处理作用域问题
1 advice = function(originalFunc){ 2 return function() { 3 console.log("before function"); 4 originalFunc(); 5 console.log("after function"); 6 } 7 } 8 var obj = { 9 foo: function(){ 10 console.log(this.name); 11 }, 12 name: "obj" 13 } 14 15 keepContext = function() { 16 return obj['foo'].call(obj); 17 } 18 19 obj.foo = advice(keepContext);
看起来是利用call解决了作用域问题，我们运行一下看看：
卧槽，难道这就是传说中的死循环。。。。
看来还是得改变一下，借助一个中间变量消除死循环
1 advice = function(originalFunc){ 2 return function() { 3 console.log("before function"); 4 originalFunc(); 5 console.log("after function"); 6 } 7 } 8 var obj = { 9 foo: function(){ 10 console.log(this.name); 11 }, 12 name: "obj" 13 } 14 15 var exist = obj.foo; 16 17 keepContext = function() { 18 return exist.call(obj); 19 } 20 21 obj.foo = advice(keepContext); 22 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
这个。。不但结果有点乱。。。还报错了。。。。是可忍，叔不可忍，叔可忍，嫂不可忍！
啊，闭包。。。请赐予我力量吧！
1 function around(obj, prop, advice){ 2 var exist = obj[prop]; 3 var previous = function(){ 4 return exist.apply(obj, arguments); 5 }; 6 var advised = advice(previous); 7 obj[prop] = function(){ 8 //当调用remove后，advised为空 9 //利用闭包的作用域链中可以访问到advised跟previous变量，根据advised是否为空可以来决定调用谁 10 return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments); 11 }; 12 13 return { 14 remove: function(){ 15 //利用闭包的作用域链，在remove时将advised置空，这样执行过程中不会进入本次around 16 //这几个不能删 17 //obj[prop] = exist; 18 advised = null; 19 advice = null; 20 //previous = null; 21 //exist = null; 22 //obj = null; 23 } 24 } 25 } 26 var count = 1; 27 advice = function(originalFunc){ 28 var current = count++; 29 return function() { 30 console.log("before function " + current); 31 originalFunc.apply(this, arguments); 32 console.log("after function " + current); 33 } 34 } 35 var obj = { 36 foo: function(arg){ 37 console.log(this.name + " and " + arg); 38 }, 39 name: "obj" 40 } 41 42 h1 = around(obj, 'foo', advice); 43 h2 = around(obj, 'foo', advice); 44 obj.foo('hello world'); 45 h1.remove(); 46 obj.foo('hello world'); 47 h2.remove(); 48 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，四点钟听到乌鸦啼鸣，还有一种不知道什么鸟，啾啾的叫，五点钟这个时候一堆鸟叫。。。。
参考文章：