通过拓展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()了。
通过拓展Function.prototype实现一个AOP的更多相关文章
- JS魔法堂:再次认识Function.prototype.call
一.前言 大家先预计一下以下四个函数调用的结果吧! var test = function(){ console.log('hello w ...
- 认识Function.prototype.call
一.前言 大家先预计一下以下四个函数调用的结果吧! var test = function(){ console.log('hello w ...
- 为什么Object.prototype在Function的原型链上与Function.prototype在Object的原型链上都为true
关于javascript的原型链有一个问题我一直很疑惑:为什么 Function instanceof Object 与 Object instanceof Function都为true呢? Func ...
- 一个简易版的Function.prototype.bind实现
重新看<JavaScript设计模式与开发实践>一书,第32页发现个简易版的Function.prototype.bind实现,非常容易理解,记录在这了. Function.prototy ...
- Function.prototype.toString 的使用技巧
Function.prototype.toString这个原型方法可以帮助你获得函数的源代码, 比如: function hello ( msg ){ console.log("hello& ...
- Object.prototype和Function.prototype一些常用方法
Object.prototype 方法: hasOwnProperty 概念:用来判断一个对象中的某一个属性是否是自己提供的(主要是判断属性是原型继承还是自己提供的) 语法:对象.hasOwnProp ...
- Object.prototype 与 Function.prototype 与 instanceof 运算符
方法: hasOwnProperty isPrototypeOf propertyIsEnumerable hasOwnProperty 该方法用来判断一个对象中的某一个属性是否是自己提供的( 住要用 ...
- 一起Polyfill系列:Function.prototype.bind的四个阶段
昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧. 一.Function.prototype.bind的作用 其实 ...
- Function.prototype.bind接口浅析
本文大部分内容翻译自 MDN内容, 翻译内容经过自己的理解. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Glo ...
随机推荐
- git 学习汇总
生成gitignore 文件: https://gitignore.io/ git 版本回退 git reset --hard HEAD^ 上一个版本就是HEAD^,上上一个版本就是HEAD^^,当然 ...
- 读高性能JavaScript编程 第三章
第三章 DOM Scripting 最小化 DOM 访问,在 JavaScript 端做尽可能多的事情. 在反复访问的地方使用局部变量存放 DOM 引用. 小心地处理 HTML 集合,因为他们表现 ...
- 很不错的关于依赖注入和AOP的系列文章
http://blog.csdn.net/tittop/article/details/6716033
- PyQt5--MainWindow
# -*- coding:utf-8 -*- ''' Created on Sep 14, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...
- 邮局加强版:四边形不等式优化DP
题目描述 一些村庄建在一条笔直的高速公路边上,我们用一条坐标轴来描述这条公路,每个村庄的坐标都是整数,没有两个村庄的坐标相同.两个村庄的距离定义为坐标之差的绝对值.我们需要在某些村庄建立邮局.使每个村 ...
- python第三十九课——面向对象(二)之初始化属性
设计Car类,初始化属性speed,提供一个run函数 import time class Car: def __init__(self,speed): self.speed=speed #将Road ...
- 「2017 山东一轮集训 Day5」字符串
题目 比较神仙的操作啊 首先先考虑一个串的做法,我们有两种:SA或SAM,其中SAM又有两种,拓扑图上的\(dp\)和\(parent\)上随便统计一下 显然这道题\(SA\)和\(parent\)树 ...
- Winfrom 使用WCF 实现双工通讯
实现双工通讯主要分三步. 通信接口的定义: 被调用接口的实现 双工通道的建立 请先引用DLL(CSDN的代码编辑器真尼玛蛋疼) 整个解决方案的结构 1.通信接口的定义: 服务端调用客户端接口IServ ...
- 数据同步canal客户端
1.增量订阅.消费设计 get/ack/rollback协议介绍: ① Message getWithoutAck(int batchSize),允许指定batchSize,一次可以获取多条,每次返回 ...
- Vue登录方式的切换
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...