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，四點鐘聽到烏鴉啼鳴，還有一種不知道什麼鳥，啾啾的叫，五點鐘這個時候一堆鳥叫。。。。

　　參考文章：

　　用AOP改善javascript代碼

　　yui3的AOP(面向切面編程)和OOP(面向對象編程)

　　面向切面編程（AOP）的理解