zoukankan      html  css  js  c++  java
  • JavaScript:AOP实现

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

      

     

     

     

  • 相关阅读:
    解决VMwave下卡死的办法
    深度探索C++对象模型第四章:函数语义学
    cc
    tbb库的使用
    10内核同步方法
    哈希
    django 和restful framework 初始配置轻松搞定
    linux有趣动画--代码雨
    linux有趣开机图标--佛祖保佑
    Socket是什么,通俗易懂点说
  • 原文地址:https://www.cnblogs.com/f1194361820/p/8144558.html
Copyright © 2011-2022 走看看