博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
通过拓展Function.prototype实现一个AOP
阅读量:7210 次
发布时间:2019-06-29

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

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()了。

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

你可能感兴趣的文章
leetcode 479. Largest Palindrome Product
查看>>
Zsh 开发指南(第十六篇 alias 和 eval 的用法)
查看>>
[LeetCode] Repeated Substring Pattern
查看>>
工厂方法模式
查看>>
CSS基础篇--CSS3 Filter详解(改变模糊度 亮度 透明度等方法)
查看>>
d3.js v4日期坐标轴转换为中文格式
查看>>
[LeetCode] Search in Rotated Sorted Array
查看>>
HTML的复用
查看>>
线程池,这一篇或许就够了
查看>>
angular 指令详解(一)compile与link
查看>>
Avalonia Beta 1对WPF做了很多改进
查看>>
我与前端 | 视野的重要性
查看>>
亚马逊发布用于Amazon Lightsail的托管数据库
查看>>
Uber:大规模系统下如何构建可伸缩的告警生态系统\n
查看>>
Instana发布微服务应用程序样例
查看>>
EOS和MATRIX共识机制对比
查看>>
苹果将iOS应用带入macOS
查看>>
官宣!微软宣布桌面版 Edge将基于Chromium进行开发\n
查看>>
如何学JavaScript
查看>>
挖财架构师:不能从会计角度设计记账App
查看>>