通过拓展Function.prototype实现一个AOP
时间:2019-12-12
本文章向大家介绍通过拓展Function.prototype实现一个AOP,主要包括通过拓展Function.prototype实现一个AOP使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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()了。
原文地址:https://www.cnblogs.com/chenzxl/p/12030011.html
- 禁止/移除 WordPress 4.2 中前台自动加载的 emjo 脚本
- 项目管理方面的几个.NET开源项目
- 如何向十岁以下的朋友解释编程?这个说法碉堡了!
- 快速比较和合并文件
- 前端页面中 iOS 版微信长按识别二维码的bug 与解决方案
- .NET Mass Downloader -整体下载.NET源码
- Android中Button
- Pycharm中一些不为人知的技巧
- Silverlight 2.0 beta1 堆栈
- 微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案
- Android中EditText
- 比特币分叉了,这到底是怎么回事?
- Excel导入导出数据库01
- 一些移动 Web 前端开发上的要点记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法