JavaScript是怎样AOP实现?


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

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

本文发表于2018年11月09日 11:00
(c)注:本文转载自https://my.oschina.net/u/4018697/blog/2873969,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 20 讨论 0 喜欢 0

讨论

周娱

君子和而不同
按照自己的方式,去度过人生

4601 1243942
抢先体验

扫码体验
趣味小程序
文字表情生成器

加入组织

扫码添加周娱微信
备注“加入组织”
邀请进开发群

闪念胶囊

不积跬步无以至千里,越焦虑越要扎实干。

不要试图鹤立鸡群,趁早离开那群鸡!

程序员过节需要的不是美女、不是美食、不是不加班!他们需要的是写代码,一群人写、往死里写、通宵写!!那种暗流涌动的狂欢,远比虚无庸俗的食色更让他们振奋!! by芋头

面试的时候,常常会问数组和链表的区别,很多人都回答说,“链表适合插入、删除,时间复杂度 O(1);数组适合查找,查找时间复杂度为 O(1)”。 实际上,这种表述是不准确的。数组是适合查找操作,但是查找的时间复杂度并不为 O(1)。即便是排好序的数组,你用二分查找,时间复杂度也是 O(logn)。 所以,正确的表述应该是,数组支持随机访问,根据下标随机访问的时间复杂度为 O(1)。

找一个bug就好比从一泡烂泥里找一条泥鳅,写一个bug就好比往一泡烂泥里丢一条泥鳅进去

数据结构在某种程度上和设计模式类似,都是前辈的武功套路。不同的是,设计模式是近几十年的卓越程序员的智慧结晶,而数据结构是几百上千年的无数科学家、数学家的智慧沉淀,更加具有深厚的背景。

18年元旦立下的flag要集中突击一下了.....

人生是一场马拉松,起跑的优劣对于整段路途而言并没有那么重要,笑到最后的都是一直在跑的人,也就是一辈子都在学习的人。

角色是谁并不重要,重要的是会不会抢戏~

Copyright © 2016 - 2018 Cion.
All Rights Reserved.
备案:鲁ICP备16007319号.