AOP(面向切面的编程)主要是将一些与核心业务逻辑模块无关的功能抽离出来,这些功能通常包括日志统计,安全控制,或者是异常处理等等。

我们要做的就是拓展Function.prototype来“动态植入”到业务的逻辑模块儿中,保持业务逻辑的纯净和高内聚。

现在我们有一个函数

var myFunc = function(){ console.log(1); } myFunc(); //1 

那我们如何植入一个函数,让他在这个函数执行之前执行呢?

现在我们来拓展一个before函数。

        var myFunc = function(){ 
            console.log(1); } Function.prototype.before = function(fn){ var _this = this; //用来保存调用这个函数的引用,如myFunc调用此函数,则_this指向myFunc return function(){ //返回一个函数,相当于一个代理函数,也就是说,这里包含了原函数和新函数,原函数指的是myFunc,新函数指的是fn fn.apply(this,arguments); //修正this的指向,将this指针指向fn,将myFunc接收的参数传给fn处理。 return _this.apply(this,arguments); //执行原函数 } } myFunc = myFunc.before(function(){ console.log(2); }); myFunc([3,2,1]); //先输出2,再输出1 

此时,我们会发现在执行myFunc这个函数之前,我们会先执行before函数里得代码。

现在我们就可以开森得用它来复用日志统计等功能模块。

当然,我们也可以把他当作一个过滤器来使用。

比如在传入得时候,传入得参数先用sort函数排序(注意:sort排序并不稳定):

        var myFunc = function(arr){ 
            console.log(1); console.log(arr); //输出 [1, 2, 2, 3, 4, 6, 7] } Function.prototype.before = function(fn){ var _this = this; //用来保存调用这个函数的引用,如myFunc调用此函数,则_this指向myFunc return function(){ //返回一个函数,相当于一个代理函数,也就是说,这里包含了原函数和新函数,原函数指的是myFunc,新函数指的是fn fn.apply(this,arguments); //修正this的指向,将this指针指向fn,将myFunc接收的参数传给fn处理。 return _this.apply(this,arguments); //执行原函数 } } myFunc = myFunc.before(function(arr){ console.log(2); console.log(arr); //输出 [3, 2, 1, 6, 2, 7, 4] arr.sort(); }); myFunc([3,2,1,6,2,7,4]); //先输出2,再输出1 

写出了一个before了,那么after也简单了:

var myFunc = function(arr){ 
    console.log(1); console.log(arr); //输出 [1, 2, 2, 3, 4, 6, 7] } Function.prototype.before = function(fn){ var _this = this; //用来保存调用这个函数的引用,如myFunc调用此函数,则_this指向myFunc return function(){ //返回一个函数,相当于一个代理函数,也就是说,这里包含了原函数和新函数,原函数指的是myFunc,新函数指的是fn fn.apply(this,arguments); //修正this的指向,将this指针指向fn,将myFunc接收的参数传给fn处理。 return _this.apply(this,arguments); //执行原函数 } } Function.prototype.after = function(fn){ var _this = this; return function(){ var r = _this.apply(this,arguments); //先执行原函数,也就是myFunc fn.apply(this,arguments); //再执行新函数 return r; } } myFunc = myFunc.before(function(arr){ console.log(2); console.log(arr); //输出 [3, 2, 1, 6, 2, 7, 4] arr.sort(); }).after(function(arr){ console.log(3); }); myFunc([3,2,1,6,2,7,4]); //先输出2,再输出1,最后输出3 

好了,我们在全局植入了这两个函数之后,以后都可以开心的直接在别的函数后面.before().after()了。

 


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

js中文汉字按拼音排序知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。