博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript:AOP实现
阅读量:7063 次
发布时间:2019-06-28

本文共 3240 字,大约阅读时间需要 10 分钟。

AOP的概念,使用过Spring的人应该都不陌生了。Dojo中,也是支持AOP的。对于JavaScript的其他框架、库不知道有没有AOP的支持。相信即便没有支持,也不会太远了。下面就介绍一下使用JavaScript实现AOP

 

       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这样写就OK了:

        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            });            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{                             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();

 

  

 

 

 

 

转载地址:http://vlnll.baihongyu.com/

你可能感兴趣的文章
Vue.js 2.0实战精华梳理
查看>>
技术的成长曲线
查看>>
DOM常用操作
查看>>
【译】Cloudera Manager(CDH)入门系列之四 (管理员控制台)
查看>>
编程常用动词细微差别
查看>>
如何通过Dataworks禁止MaxCompute 子账号跨Project访问
查看>>
聊聊reactive streams的backpressure
查看>>
android studio 2 3 的maven坑
查看>>
来分享一个我自己写的HTML模板引擎,Leopard
查看>>
基于阿里云数加构建企业级数据分析平台
查看>>
React Native安卓模拟器调出Dev Setting菜单
查看>>
Laravel整合Bootstrap 4的完整方案
查看>>
Swift枚举相关值
查看>>
少走弯路,给Java 1~5 年程序员的建议
查看>>
08.Android之View事件问题
查看>>
[ JavaScript ] 数据结构与算法 —— 链表
查看>>
Java程序员幽默爆笑锦集
查看>>
小程序button引导用户授权
查看>>
机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
查看>>
我是如何设计 Upload 上传组件的
查看>>