Aop又叫面向切面編程，其中“通知”是切面的具體實現(xiàn)，分為before（前置通知）、after（后置通知）、around（環(huán)繞通知），用過spring的同學(xué)肯定對它非常熟悉，而在js中，AOP是一個被嚴(yán)重忽視的技術(shù)點。但是利用aop可以有效的改善js代碼邏輯，比如前端框架dojo和yui3中AOP則被提升至自定義事件的一種內(nèi)在機(jī)制，在源碼中隨處可見。得益于這種抽象使得dojo的自定義事件異常強(qiáng)大和靈活。dojo中aop的實現(xiàn)在dojo/aspect模塊中，主要有三個方法：before、after、around，本文會帶領(lǐng)大家一步步實現(xiàn)around方法，后續(xù)文章將會深入解析dojo/aspect模塊的結(jié)構(gòu)體系。

　　js要實現(xiàn)環(huán)繞通知，最簡單也最應(yīng)被想到的就是利用callback（回調(diào)）

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)

　　結(jié)果：

before function foo after function

　　哈哈，太簡單了，是不是可以回去睡覺了。。。。

　　

　　可是，是不是有點太粗糙了。。。。說好的環(huán)繞呢。。。。至少下次調(diào)用obj.foo也應(yīng)該是這個結(jié)果，而不是一個干巴巴的“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

　　看起來達(dá)到了環(huán)繞的效果，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解決了作用域問題，我們運行一下看看：

　　

　　臥槽，難道這就是傳說中的死循環(huán)。。。。

?

　　看來還是得改變一下，借助一個中間變量消除死循環(huán)

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只要按照如下格式來書寫，就可以達(dá)到around的效果

advice = function(originalFunc){return function() {//before originalFunc();//after } }

　　哈哈，瞬間高大上，狂拽酷炫掉渣天，有木有。。。。

　　

　　那么問題來了：如果不小心多調(diào)用了一次around方法腫么辦。。。。 ?額。。。。這是個問題 ?我們是不是應(yīng)該讓around返回一個句柄，里面有個remove方法，消除綁定，就像綁定/移除事件一樣。

　　所為remove，就是讓函數(shù)下次執(zhí)行時不在執(zhí)行對應(yīng)的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

　　這個。。不但結(jié)果有點亂。。。還報錯了。。。。是可忍，叔不可忍，叔可忍，嫂不可忍！

?

　　啊，閉包。。。請賜予我力量吧！

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 //當(dāng)調(diào)用remove后，advised為空 9 //利用閉包的作用域鏈中可以訪問到advised跟previous變量，根據(jù)advised是否為空可以來決定調(diào)用誰 10 return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments); 11 }; 12 13 return { 14 remove: function(){ 15 //利用閉包的作用域鏈，在remove時將advised置空，這樣執(zhí)行過程中不會進(jìn)入本次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(面向?qū)ο缶幊?

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

轉(zhuǎn)載于:https://www.cnblogs.com/dojo-lzz/p/4470278.html

總結(jié)

以上是生活随笔為你收集整理的Javascript aop(面向切面编程)之around(环绕)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。