码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript aop(面向切面编程)之around(环绕)

时间:2015-05-01 07:08:04      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:

  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 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)

  结果:

before function
foo
after function

  哈哈,太简单了,是不是可以回去睡觉了。。。。

  

  可是,是不是有点太粗糙了。。。。说好的环绕呢。。。。至少下次调用obj.foo也应该是这个结果,而不是一个干巴巴的“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

  看起来达到了环绕的效果,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解决了作用域问题,我们运行一下看看:

  技术分享

  卧槽,难道这就是传说中的死循环。。。。

 

  看来还是得改变一下,借助一个中间变量消除死循环

 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只要按照如下格式来书写,就可以达到around的效果

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

  哈哈,瞬间高大上,狂拽酷炫掉渣天,有木有。。。。

  

  那么问题来了:如果不小心多调用了一次around方法肿么办。。。。  额。。。。这是个问题  我们是不是应该让around返回一个句柄,里面有个remove方法,消除绑定,就像绑定/移除事件一样。

  所为remove,就是让函数下次执行时不在执行对应的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

技术分享

  这个。。不但结果有点乱。。。还报错了。。。。是可忍,叔不可忍,叔可忍,嫂不可忍!

 

  啊,闭包。。。请赐予我力量吧!

 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    //当调用remove后,advised为空
 9     //利用闭包的作用域链中可以访问到advised跟previous变量,根据advised是否为空可以来决定调用谁
10   return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments);
11  };
12  
13  return {
14   remove: function(){
15     //利用闭包的作用域链,在remove时将advised置空,这样执行过程中不会进入本次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(面向对象编程)

  面向切面编程(AOP)的理解

Javascript aop(面向切面编程)之around(环绕)

标签:

原文地址:http://www.cnblogs.com/dojo-lzz/p/4470278.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!