这篇文章主要介绍了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