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 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）的理解

转载于:https://www.cnblogs.com/dojo-lzz/p/4470278.html

Javascript aop(面向切面编程)之around(环绕)相关推荐

切面是异步还是同步操作‘_Autofac的AOP面向切面编程研究
什么是AOP: 我的理解是把系统性的编程工作封装起来 =>我给这个取个名字叫 "Aspect",然后通过AOP技术把它切进我们的业务逻辑代码 => "业务& ...
大数据WEB阶段Spring框架 AOP面向切面编程（一）
Spring - AOP面向切面编程(一) 一.代理模式概述代理的特点:(目标对象即被代理者) 实现和目标对象相同的接口具备和目标对象的方法代理者不仅要做目标对象的方法 , 还要做一些额外的操作 ...
大数据WEB阶段Spring框架 AOP面向切面编程（二）
Spring AOP面向切面编程(二) 一.切入点的execution表达式 execution的表达形式: execution(修饰符? 返回值类型所在包类? 方法名(参数列表) 异常?) ?表示 ...
Autofac的AOP面向切面编程研究
我的理解是把系统性的编程工作封装起来 =>我给这个取个名字叫 "Aspect",然后通过AOP技术把它切进我们的业务逻辑代码 => "业务" 这样 ...
python aop编程_学习笔记: AOP面向切面编程和C#多种实现
AOP:面向切面编程编程思想 OOP:一切皆对象,对象交互组成功能,功能叠加组成模块,模块叠加组成系统类--砖头系统--房子类--细胞系统--人面向对象是非常适合做大型 ...
spring中AOP(面向切面编程)
spring中AOP(面向切面编程) 面向切面编程,通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点,也是spring框架中的一个重要内容 ...
Springboot 一文搞懂AOP面向切面编程
Springboot AOP面向切面编程 AOP简介 AOP(Aspect Oriented Programming)面向切面编程,一种编程范式,指导开发者如何组织程序结构. 作用:在不惊动原始设计的 ...
【SSM】Spring系列——AOP面向切面编程
文章目录 03 AOP面向切面编程 3.1 AOP概述 3.2 面向切面编程对有什么好处 3.3 模拟AOP框架实现 3.3.1 代码实现版本一 3.3.2 代码实现版本二 3.3.3 代码实现版本三 ...
Java绝地求生—Spring AOP面向切面编程
Java绝地求生-Spring AOP面向切面编程背景动态代理构建被代理对象自动生成代理调用动态代理 Spring方法方式一:使用Spring的API接口方式二:使用自定义类方式三:使 ...

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

Javascript aop(面向切面编程)之around(环绕)相关推荐

最新文章

热门文章