Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞)分析
Aop又叫面向切面編程，其中“通知”是切面的具體實現(xiàn)，分為before（前置通知）、after（后置通知）、around（環(huán)繞通知），用過spring的同學(xué)肯定對它非常熟悉，而在js中，AOP是一個被嚴重忽視的技術(shù)點。但是利用aop可以有效的改善js代碼邏輯，比如前端框架dojo和yui3中AOP則被提升至自定義事件的一種內(nèi)在機制，在源碼中隨處可見。得益于這種抽象使得dojo的自定義事件異常強大和靈活。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)）
advice = function(originalFunc){
console.log("before function");
originalFunc();
console.log("after function");
}
var obj = {
foo: function(){
console.log('foo');
}
}
advice(obj.foo)
結(jié)果：
before function
foo
after function
哈哈，太簡單了，是不是可以回去睡覺了。。。?！ ?/p>
可是，是不是有點太粗糙了。。。。說好的環(huán)繞呢。。。。至少下次調(diào)用obj.foo也應(yīng)該是這個結(jié)果，而不是一個干巴巴的“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()
輸出：
before function
after function
看起來達到了環(huán)繞的效果，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解決了作用域問題，我們運行一下看看：
臥槽，難道這就是傳說中的死循環(huán)。。。。
看來還是得改變一下，借助一個中間變量消除死循環(huán)
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了，我們是不是要來點高大上的抽象，嗯，我也是這么想的
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
}
}
哈哈，瞬間高大上，狂拽酷炫掉渣天，有木有。。。。
那么問題來了：如果不小心多調(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é)果有點亂。。。還報錯了。。。。是可忍，叔不可忍，叔可忍，嫂不可忍！
啊，閉包。。。請賜予我力量吧！
function around(obj, prop, advice){
var exist = obj[prop];
var previous = function(){
return exist.apply(obj, arguments);
};
var advised = advice(previous);
obj[prop] = function(){
//當調(diào)用remove后，advised為空
//利用閉包的作用域鏈中可以訪問到advised跟previous變量，根據(jù)advised是否為空可以來決定調(diào)用誰
return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments);
};
return {
remove: function(){
//利用閉包的作用域鏈，在remove時將advised置空，這樣執(zhí)行過程中不會進入本次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，四點鐘聽到烏鴉啼鳴，還有一種不知道什么鳥，啾啾的叫，五點鐘這個時候一堆鳥叫。。。。
參考文章：
相關(guān)文章
復(fù)制到剪貼板的js代碼（兼容ie、firefox、chorme、safari...什么都兼容?。?2011-10-10
最近開發(fā)了繁體版本的網(wǎng)站，在網(wǎng)上找了一段比較流行的繁簡切換的JS實現(xiàn)了，不過后來卻發(fā)現(xiàn)，有些頁面會卡死，針對這個問題，下面有個不錯的解決方法2014-03-03
JavaScript強制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作示例
這篇文章主要介紹了JavaScript強制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換操作,結(jié)合實例形式分析了javascript字符串、數(shù)字等顯示類型轉(zhuǎn)換,以及運算、判斷等情況下的隱式類型轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
在 JavaScript 中,變量的類型是動態(tài)的,這幾天我在做項目時,遇到了一個從方法返回的值問題,為了避免這種問題,我需要先判斷一下返回值的類型,那么,你知道哪些判斷變量類型的方法呢,本文給大家介紹了使用 JavaScript 如何判斷變量類型,需要的朋友可以參考下2024-06-06
這篇文章主要給大家介紹了關(guān)于利用Javascript如何開發(fā)一個二維周視圖日歷的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
解析JavaScript中的不可見數(shù)據(jù)類型
這篇文章主要是對JavaScript中的不可見數(shù)據(jù)類型進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
詳解layui?laydate選擇時間的回調(diào)方法
這篇文章主要介紹了layui?laydate選擇時間的回調(diào)方法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
SeaJS是一個遵循CommonJS規(guī)范的JavaScript模塊加載框架。本文給大家分享sea.js知識總結(jié)，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
JS?requestVideoFrameCallback()?簡單案例
這篇文章主要介紹了JS?requestVideoFrameCallback()簡單案例，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
本文主要介紹了Js中數(shù)據(jù)類型判斷的幾種方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01