快捷導(dǎo)航

Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞)分析

更新時(shí)間：2015年05月01日 15:39:08 作者：木的樹(shù)

這篇文章主要介紹了Javascript aop(面向切面編程)之a(chǎn)round(環(huán)繞) ,需要的朋友可以參考下

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

js要實(shí)現(xiàn)環(huán)繞通知，最簡(jiǎ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　　
哈哈，太簡(jiǎn)單了，是不是可以回去睡覺(jué)了。。。?！　?/p>

可是，是不是有點(diǎn)太粗糙了。。。。說(shuō)好的環(huán)繞呢。。。。至少下次調(diào)用obj.foo也應(yīng)該是這個(gè)結(jié)果，而不是一個(gè)干巴巴的“foo”；為此我我們需要在改動(dòng)一下，利用一下閉包

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

看起來(lái)達(dá)到了環(huán)繞的效果，but說(shuō)好的name哪去了。。。。

在advice返回的閉包中我們還要處理作用域問(wè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"
}

keepContext = function() {
 return obj['foo'].call(obj);
}

obj.foo = advice(keepContext);

看起來(lái)是利用call解決了作用域問(wèn)題，我們運(yùn)行一下看看：

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

　　看來(lái)還是得改變一下，借助一個(gè)中間變量消除死循環(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　　

哈哈，世界突然變得美好了。。。。
但是這一堆代碼看起來(lái)是不是太low了，我們是不是要來(lái)點(diǎn)高大上的抽象，嗯，我也是這么想的

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方法將處理過(guò)程與具體對(duì)象解耦；advice只要按照如下格式來(lái)書寫，就可以達(dá)到around的效果

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

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

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

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

這個(gè)。。不但結(jié)果有點(diǎn)亂。。。還報(bào)錯(cuò)了。。。。是可忍，叔不可忍，叔可忍，嫂不可忍！

　　啊，閉包。。。請(qǐng)賜予我力量吧！

function around(obj, prop, advice){
 var exist = obj[prop];
 var previous = function(){
 return exist.apply(obj, arguments);
 };
 var advised = advice(previous);
 obj[prop] = function(){
 //當(dāng)調(diào)用remove后，advised為空
 //利用閉包的作用域鏈中可以訪問(wèn)到advised跟previous變量，根據(jù)advised是否為空可以來(lái)決定調(diào)用誰(shuí)
 return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments);
 };
 
 return {
 remove: function(){
 //利用閉包的作用域鏈，在remove時(shí)將advised置空，這樣執(zhí)行過(guò)程中不會(huì)進(jìn)入本次around
 //這幾個(gè)不能刪
 //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

打完，收功！

　　第一次通宵寫博客也是醉了，兩點(diǎn)鐘聽(tīng)到隔壁fuck me，四點(diǎn)鐘聽(tīng)到烏鴉啼鳴，還有一種不知道什么鳥(niǎo)，啾啾的叫，五點(diǎn)鐘這個(gè)時(shí)候一堆鳥(niǎo)叫。。。。

參考文章：

使用AOP改善javascript代碼

yui3的AOP(面向切面編程)和OOP(面向?qū)ο缶幊?

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

您可能感興趣的文章: