Javascript aop(面向切面編程)之around(環繞)分析

 　　這篇文章主要介紹了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 2 3 4 5 6 7 8 9 10 11 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”;為此我我們需要在改動一下，利用一下閉包

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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返回的閉包中我們還要處理作用域問題

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 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解決了作用域問題，我們運行一下看看：

　　臥槽，難道這就是傳說中的死循環。。。。

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

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 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了，我們是不是要來點高大上的抽象，嗯，我也是這麼想的

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 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的效果

　　?

1 2 3 4 5 6 7 advice = function(originalFunc){ return function() { //before originalFunc(); //after } }

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

　　那麼問題來了：如果不小心多調用了一次around方法腫麼辦。。。。 額。。。。這是個問題 我們是不是應該讓around返回一個句柄，裡面有個remove方法，消除綁定，就像綁定/移除事件一樣。

　　所為remove，就是讓函數下次執行時不在執行對應的around方法，而僅僅運行originalFunc方法

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26