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(回调)

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”;为此我我们需要在改动一下,利用一下闭包

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返回的闭包中我们还要处理作用域问题

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解决了作用域问题,我们运行一下看看:

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

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

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

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

  

  那么问题来了:如果不小心多调用了一次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

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

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

function around(obj, prop, advice){
 var exist = obj[prop];
 var previous = function(){
 return exist.apply(obj, arguments);
 };
 var advised = advice(previous);
 obj[prop] = function(){
 //当调用remove后,advised为空
 //利用闭包的作用域链中可以访问到advised跟previous变量,根据advised是否为空可以来决定调用谁
 return advised ? advised.apply(obj, arguments) : previous.apply(obj, arguments);
 };

 return {
 remove: function(){
 //利用闭包的作用域链,在remove时将advised置空,这样执行过程中不会进入本次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,四点钟听到乌鸦啼鸣,还有一种不知道什么鸟,啾啾的叫,五点钟这个时候一堆鸟叫。。。。

参考文章:

使用AOP改善javascript代码

yui3的AOP(面向切面编程)和OOP(面向对象编程)

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

(0)

相关推荐

  • javascript AOP 实现ajax回调函数使用比较方便

    复制代码 代码如下: function actsAsDecorator(object) { object.setupDecoratorFor = function(method) { if (! ('original_' + method in object) ) { object['original_' + method] = object[method]; object['before_' + method] = [ ]; object['after_' + method] = [ ]; o

  • 使用AOP改善javascript代码

    Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这篇就通过下面这几个小例子,来说说AOP在js中的妙用. 1, 防止window.onload被二次覆盖. 2,无侵入的统计代码. 3, 分离表单请求和校验. 4,给ajax请求动态添加参数. 5,职责链模式. 6, 组合代替继承. 先给出before和after这2个"切面"函数. 顾名思义,就是让一个函数在另一个函数之前或者之后执行,巧妙的是,before或者after都可以

  • JavaScript AOP编程实例

    本文实例讲述了JavaScript AOP编程.分享给大家供大家参考.具体如下: /* // aop({options}); // By: adamchow2326@yahoo.com.au // Version: 1.0 // Simple aspect oriented programming module // support Aspect before, after and around // usage: aop({ context: myObject, // scope contex

  • JavaScript之AOP编程实例

    本文实例讲述了JavaScript之AOP编程.分享给大家供大家参考.具体如下: /* // aop({options}); // By: adamchow2326@yahoo.com.au // Version: 1.0 // Simple aspect oriented programming module // support Aspect before, after and around // usage: aop({ context: myObject, // scope contex

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

    Aop又叫面向切面编程,其中"通知"是切面的具体实现,分为before(前置通知).after(后置通知).around(环绕通知),用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点.但是利用aop可以有效的改善js代码逻辑,比如前端框架dojo和yui3中AOP则被提升至自定义事件的一种内在机制,在源码中随处可见.得益于这种抽象使得dojo的自定义事件异常强大和灵活.dojo中aop的实现在dojo/aspect模块中,主要有三个方法:before.

  • Spring使用AspectJ的注解式实现AOP面向切面编程

    1.认识Spring AOP 1.1 AOP的简介 AOP:面向切面编程,相对于OOP面向对象编程. Spring的AOP的存在目的是为了解耦.AOP可以让一组类共享相同的行为.在OOP中只能通过继承类和实现接口,来使代码的耦合度增强,而且类的继承只能为单继承,阻碍更多行为添加到一组类上,AOP弥补了OOP的不足. 1.2 AOP中的概念 切入点(pointcut): 切入点(pointcut):在哪些类.哪些方法上切入. 通知(advice):在方法前.方法后.方法前后做什么. 切面(aspe

  • java开发AOP面向切面编程入门

    目录 引言 不好的解决方案 面向过程的解决方案 使用继承解决方案 使用聚合的解决方案 面向切面的编程基本概念 基于Spring面向切面程序实现 小结 引言 在实际应用场景中,我们封装一个学生的类,这个类用于封装学生的日常行为,如:上学.吃饭.上课等.然而,在疫情期间,学生上学时入校.吃饭时进入餐厅,需要测温查验证件等行为,拿到这样的需求我们怎么办? 不好的解决方案 面向过程的解决方案 遇到问题解决问题,在上学.吃饭方法中加上测温.查验证件方法,或者在学生类中提炼一个测温查验证件私有的方法,在需要

  • MVC AOP面向切面编程简单介绍及实例

    MVC AOP面向切面编程 AOP这个词相信大家都没有接触太多过,但是实际上你们已经有所接触了,就在设计模式中.AOP所用的思想其实和设计模式是一样的,即在不修改原代码的情况下统一增加或者修改功能.还有,AOP大多用在spring里面,但是本文所写的只是在MVC中的应用,要注意. 一.简介 所谓AOP(Aspect Oriented Programming的缩写)意为面向切面的编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点,也是

  • SpringBoot整合aop面向切面编程过程解析

    这篇文章主要介绍了SpringBoot整合aop面向切面编程过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是Spring框架中的一个重要内容,它通过对既有程序定义一个切入点,然后在其前后切入不同的执行内容,比如常见的有:打开数据库连接/关闭数据库连接.打开事务/关闭事务.记录日

  • Java aop面向切面编程(aspectJweaver)案例详解

    面向切面编程的目的就是:在不改变别人的代码的前提下,在别人代码方法执行前或后,执行(切入自己的逻辑) 准备:idea+maven+aspectjweaver-1.8.9.jar 结构图: pom.xml内容 <dependencies> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjrt</artifactId> <version>1.8.9&

  • Spring框架AOP面向切面编程原理全面分析

    目录 1.什么是AOP AOP面向切面的优势 AOP需要添加的依赖 2.简述AOP工作运行原理 动态创建的总结: 3.使用Spring创建AOP 测试类 Spring.xml 1.什么是AOP AOP:Aspect Oriented Programming ⾯向切⾯编程. AOP面向切面的优势 降低模块之间的耦合度. 使系统更容易扩展. 更好的代码复⽤. ⾮业务代码更加集中,不分散,便于统⼀管理. 业务代码更加简洁存粹,不参杂其他代码的影响. AOP 是对⾯向对象编程的⼀个补充,在运⾏时,动态地

  • .NET Core利用动态代理实现AOP(面向切面编程)

    目录 1.介绍 1.1 动态代理作用 1.2 原生DispatchProxy类介绍 1.3简单介绍一下:IL代码 2.实现 2.1 继承DispatchProxy 2.2 定义handle接口 2.3 定义AOP特性 2.4 定义创建代理类的工厂 2.5 定义ServiceHelp 3.测试 3.1 定义handle实现 3.2 定义Service接口 3.3实现Service接口 3.4 大功告成 3.5 效果 4.Demo 1.介绍 1.1 动态代理作用 用动态代理可以做AOP(面向切面编程

  • Spring AOP面向切面编程实现原理方法详解

    1. 什么是AOP AOP (Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现在不修改源代码的情况下,给程序动态统一添加功能的一种技术,可以理解成动态代理.是Spring框架中的一个重要内容.利用 AOP 可以对业务逻辑的各个部分进行隔离,使业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高开发的效率 2. Spring AOP ①. AOP 在Spring中的作用 提供声明式事务:允许用户自定义切面 ②. AOP 的基本概

  • Springboot如何使用Aspectj实现AOP面向切面编程

    目录 要在 Springboot中声明 AspectJ 切面 引入jar包 网上也有说要在application.properties中添加 最后补充一点小知识 AspectJ 支持 5 种类型的通知注解 下面是我写的一些通知的实例 大家可以参考一下 要在 Springboot中声明 AspectJ 切面 需在 IOC 容器中将切面声明为 Bean 实例 即加入@Component 注解;当在 Spring IOC 容器中初始化 AspectJ 切面之后, Spring IOC 容器就会为那些与

随机推荐