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（回调）

advice = function(originalFunc){

 console.log("before function");

 originalFunc();

 console.log("after function");

var obj = {

 foo: function(){

 console.log(foo);

advice(obj.foo)

结果：

before function

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()

输出：

1 before function

3 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

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 ? advised.apply(obj, arguments) : previous.apply(obj, arguments);

 return {

 remove: function(){

 //利用闭包的作用域链，在remove时将advised置空，这样执行过程中不会进入本次around

 //这几个不能删

 //obj[prop] = exist;

 advised = null;

 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.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）的理解