文档章节

JavaScript是怎样AOP实现?

 前端攻城老湿
发布于 2018/11/09 10:09
字数 558
阅读 627
收藏 8

AOP的概念,使用过Spring的人应该都不陌生了。Dojo中,也是支持AOP的。对于JavaScript的其他框架、库不知道有没有AOP的支持。而Aop又叫面向切面编程,用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被严重忽视的技术点,这次就来说说AOP在js中的妙用

AOP的思维就是在目标方法前后加入代码:

var result=null;

try{

before();

result = targetMethod(params);

}(catch e){

error();

}finlly{

    after();

}

return result;  

在JavaScript中要达到AOP的效果可以利用apply(ctx,arguments)来达到目的,请看下面demo:

这是一个原始的代码:

function Person(options){  
                options = options ? options : {};  
                this.id = options.id;  
                this.age = options.age>0 ? options.age:0;  
            }  
            Person.prototype.show=function(){  
                console.log("id: "+this.id + " age: "+ this.age);  
            };  
            var p = new Person({  
                id:'test1',  
                age:1  
            });  
            p.show();  

现在想要对show方法植入代码,利用apply这样写就Ojbk了:

var targetFunc = Person.prototype.show;  
            var proxyFunc  = function(){  
                var ctx = this;  
                console.log("before ...");  
                targetFunc.apply(ctx, arguments);  
                console.log("after ...");  
            }  
            Person.prototype.show = proxyFunc;  
            p = new Person({  
                id:"test2",  
                age:2//欢迎加入全栈开发交流圈一起学习交流:864305860  
            });//面向1-3年前端人员  
            p.show();//帮助突破技术瓶颈,提升思维能力  

如果要对各种方法植入,这样写肯定是不方便了,所以呢,将这个代码织入的过程提成一个通用的工具:

function Interceptor(){  
            }  
            Interceptor.prototype.before = function(callContext, params){  
                console.log("before... ", callContext, params);  
            }  
            Interceptor.prototype.after = function(callContext, params){  
                console.log("after... ", callContext, params);  
            }  
            Interceptor.prototype.error = function(callContext, params){  
                console.log("error... ", callContext, params);  
            }  
              
            var InjectUtil = (function(){  
                function inject(obj, methodName, interceptor){  
                    var targetFun = obj\[methodName\];  
                    if(typeof targetFun == "function"){  
                        var proxyFun = genProxyFun(targetFun, interceptor);  
                        obj\[methodName\] = proxyFun;  
                    }  
                }  
                  
                function genProxyFun(targetFun, interceptor){  
                    var proxyFunc = function(){  
                        var ctx = this;  
                        var result = null;  
                        interceptor.before(ctx, arguments);  
                        try{//欢迎加入全栈开发交流圈一起学习交流:864305860  
                             result= targetFunc.apply(ctx, arguments);  
                        }catch(e){  
                            interceptor.error(ctx, arguments);  
                        }finally{  
                            interceptor.after(ctx, arguments);  
                        }  
                        return result;  
                    };  
                    return proxyFunc;  
                };  
                  
                return {  
                    inject:inject  
                }  
            })();  

测试:

Person.prototype.show=function(){  
                console.log("id: "+this.id + " age: "+ this.age);  
            };  
            InjectUtil.inject(Person.prototype,"show",new Interceptor());  
              
            var p = new Person({  
                id:"test3",  
                age:3  
            });  
            p.show();  

结语
> 感谢您的观看,如有不足之处,欢迎批评指正。

© 著作权归作者所有

共有 人打赏支持
粉丝 21
博文 32
码字总数 49632
作品 0
西城
私信 提问
加载中

评论(7)

a
a1178013314
vue 的 mixin 应该算个AOP
左华栋
左华栋

引用来自“曾建凯”的评论

10年前就这么写了,早都麻木了,这年头应该用promise。

引用来自“KevinBlandy”的评论

aop应该是Proxy吧、、、Promise用异步身上的。
前端看 angular , 后端看 nest.js 。 AOP 实现更优雅
曾建凯
曾建凯

引用来自“曾建凯”的评论

10年前就这么写了,早都麻木了,这年头应该用promise。

引用来自“KevinBlandy”的评论

aop应该是Proxy吧、、、Promise用异步身上的。
to young, aop 难倒没有异步?
zhuliu
zhuliu

引用来自“银杏果果”的评论

动态语言几乎都能轻易的实现aop,特别是给对象动态添加属性和函数。
动态语言也正因为想怎么搞就怎么搞,所以在大项目上就会显得非常恶心
KevinBlandy
KevinBlandy

引用来自“曾建凯”的评论

10年前就这么写了,早都麻木了,这年头应该用promise。
aop应该是Proxy吧、、、Promise用异步身上的。
曾建凯
曾建凯
10年前就这么写了,早都麻木了,这年头应该用promise。
银杏卡卡
银杏卡卡
动态语言几乎都能轻易的实现aop,特别是给对象动态添加属性和函数。
《JavaScript设计模式与开发实践》模式篇(12)—— 装饰者模式

在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之 改变;另一方...

嗨呀豆豆呢
2018/12/25
0
0
通过AOP解耦Javascript中的紧耦合代码

AOP大家都知道,Javascript对于AOP的使用也有一些很好的地方.这几天正好在改别人代码他在javascript用了AOP进行编程,正好仔细说说怎么玩的这个. AOP 单独AOP的概念最早接触是在Java中,面向切片...

顽Shi
2014/10/16
0
1
30、最简单的mvc框架tiny,增加Aop

最简单的mvc框架tiny,增加Aop功能。 增加Aop接口,使用是实现即可。 然后设置路由(访问的action)和aop的绑定信息,类似如下: 下面的意思是把路由"/TinyTest/hello/"和TestAop.class做绑定...

青青小树
2014/04/04
0
5
dojo1.7功能介绍:面向方面编程(AOP)功能与原理

日前发布的dojo 1.7版本对其源码进行了很大的变更。在迈向2.0版本之际,dojo提供了许多新的功能,也对许多已有的功能进行了修改,具体来说新版本更好地支持AMD规范、提供了新的事件处理系统(...

bigYuan
2012/04/13
0
0
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12

没有更多内容

加载失败,请刷新页面

加载更多

MySQL查询执行

当我们希望MySQL能够以更高的性能运行查询时,最好的办法就是弄清楚MySQL是如何优化和执行查询的。一旦理解了这一点,很多查询优化工作实际上就是遵循一些原则让优化器能够按照预想的合理方式...

问题终结者
49分钟前
1
0
CDH5动静态资源池配置与回滚

关于动态 静态资源池的配置以前都有提过,可以从以下几篇了解: YARN动态资源池配置案例 https://yq.aliyun.com/ziliao/346856# Hadoop YARN配置参数剖析(4)—Fair Scheduler相关参数 Hadoop...

hblt-j
54分钟前
3
0
WordPress仿站实战教程

有一个月没有写blog了,一直在学习wordpress的知识,现在能够进行简单的政府企业门户网站的仿制,wordpress的主题订制,一般是对前端要求比较高,wordpress学会了,建站还是非常的快的。下面...

临江仙卜算子
56分钟前
3
0
图像库stb_image

https://github.com/nothings/stb 目前一般主流的图像格式也就是bmp,jpg,png,tga,dds,除了DDS一般是给DX用的,虽然一堆OpenGL程序也有用的,但是我一般只用png和tga, png不用说了,带a...

robslove
今天
1
0
Spring 事务提交回滚源码解析

前言 在上篇文章 Spring 事务初始化源码分析 中分析了 Spring 事务初始化的一个过程,当初始化完成后,Spring 是如何去获取事务,当目标方法异常后,又是如何进行回滚的,又或是目标方法执行...

TSMYK
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部