文档章节

JavaScript是怎样AOP实现?

 前端攻城老湿
发布于 11/09 10:09
字数 558
阅读 569
收藏 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();  

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

© 著作权归作者所有

共有 人打赏支持
粉丝 4
博文 12
码字总数 17346
作品 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,特别是给对象动态添加属性和函数。
通过AOP解耦Javascript中的紧耦合代码

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

顽Shi
2014/10/16
0
1
dojo1.7功能介绍:面向方面编程(AOP)功能与原理

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

bigYuan
2012/04/13
0
0
30、最简单的mvc框架tiny,增加Aop

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

青青小树
2014/04/04
0
5
Js-$.extend方法使方法参数更灵活

在做JS开发时,我们将第三方复杂的插件进行封装,然后对外公开一个很简单的方法接口,这是开发时常用的方法,在JS里,我们的方法参数通常使用JQ的$.extend 扩展方法来实现 function ext...

BearCatYN
2015/04/21
0
0
用JavaScript实现JavaScript文件的版本管理和加载

受《大公司怎样开发和部署前端代码?》这篇文章的启发,结合自己的项目实践,创建了一套JavaScript文件的版本管理和加载的机制,虽然比较粗糙,但是解决了不少实际的问题。 使用到的主要工具...

zero2hero
2015/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

利用cefSharp实现网页自动注册登录的需要注册的一些事项

最近朋友有个需要自动注册登录点击的事,我帮着写了写,好久没写过这东西了,在写的过程中总结了需要注意的一些事项。 一、换IP之后要测试一下速度,我目前用的最简单的测试方法就是20-30秒加...

我退而结网
17分钟前
1
0
Go语言中使用 BoltDB数据库

boltdb 是使用Go语言编写的开源的键值对数据库,Github的地址如下: https://github.com/boltdb/bolt boltdb 存储数据时 key 和 value 都要求是字节数据,此处需要使用到 序列化和反序列化。...

Oo若离oO
17分钟前
1
0
zookeeper分布式锁

//lock 锁 定义分布式锁public interface Lock {//获取锁public void getLock();//释放锁public void unLock();} public abstract class ZookeeperAbstractLock implements Loc......

熊猫你好
24分钟前
0
0
mysql_事务隔离机制

事务隔离机制 事务就是要保证一组数据库操作,要么全部成功,要么全部失败。在mysql中,事务支持是在引擎层实现的。mysql是一个支持多引擎的系统,但并不是所有引擎都支持事务,比如mysql...

grace_233
27分钟前
0
0
不学无数——Java中IO和NIO

JAVA中的I/O和NIO I/O 问题是任何编程语言都无法回避的问题,可以说 I/O 问题是整个人机交互的核心问题,因为 I/O 是机器获取和交换信息的主要渠道。在当今这个数据大爆炸时代,I/O 问题尤其...

不学无数的程序员
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部