How is JavaScript implemented in AOP?

The concept of AOP should be familiar to anyone who has used spring. In Dojo, AOP is also supported. I don't know if there is AOP support for other JavaScript frameworks and libraries. AOP is also called face-to-face programming. Students who have used spring must be very familiar with AOP. In js, AOP is a technology point that has been seriously ignored. This time, let's talk about AOP's wonderful use in js

The thinking of AOP is to add code before and after the target method:

var result=null;

try{

before();

result = targetMethod(params);

}(catch e){

error();

}finlly{

    after();

}

return result;  

To achieve the AOP effect in JavaScript, you can use apply(ctx,arguments) to achieve the goal. See the following demo:

This is an original code:

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

Now, if you want to embed code into the show method, use apply to write Ojbk as follows:

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//Welcome to join the full stack development exchange circle to learn and exchange: 864305860  
            });//For front-end personnel for 1-3 years  
            p.show();//Help to break through technical bottleneck and improve thinking ability  

If you want to implant various methods, it's not convenient to write like this. So, the process of weaving this code into a common tool:

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{//Welcome to join the full stack development exchange circle to learn and exchange: 864305860  
                             result= targetFunc.apply(ctx, arguments);  
                        }catch(e){  
                            interceptor.error(ctx, arguments);  
                        }finally{  
                            interceptor.after(ctx, arguments);  
                        }  
                        return result;  
                    };  
                    return proxyFunc;  
                };  
                  
                return {  
                    inject:inject  
                }  
            })();  

Test:

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

epilogue
>Thank you for watching. If you have any shortcomings, please correct them.

Keywords: Front-end Spring Javascript Programming

Added by steveangelis on Mon, 09 Dec 2019 01:12:40 +0200