1. 简介
AOP (Aspect Oriented Programming) ,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续,是函数式编程的一种衍生,利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率。
2. 基础实现
使用过java spring的同学一定知道,其内分为三种通知,before(前置通知)、after(后置通知)、around(环绕通知)。
下面我们分别在js调用方法时实现这三种通知:
before(前置通知)
顾名思义,就是在函数调用前执行
Function.prototype.before = function (beforefun) { var _orgin = this; // 保存原函数引用 return function () { // 返回包含了原函数和新函数的"代理函数" beforefun.apply(this, arguments); // 执行新函数,修正this return _orgin.apply(this, arguments); // 执行原函数 } }; var originFun = function(val){ console.log('原型函数: '+val); } var newFun = originFun.before(function(){ // 传入函数调用前处理方法 console.log('before: ' + new Date().getTime()) }) newFun("测试前置通知"); // 调用结果 // before: 1557047939699 // 原型函数: 测试前置通知
after(后置通知)
与before正相反,在函数调用后执行
Function.prototype.after = function (afterfun) { var _orgin = this; // 保存原函数引用 return function () { // 返回包含了原函数和新函数的"代理函数" var ret = _orgin.apply(this, arguments); // 执行原函数 afterfun.apply(this, arguments); // 执行新函数,修正this return ret; } }; var originFun = function(val){ console.log('原型函数: '+val); } var newFun = originFun.after(function(){ // 传入函数调用前处理方法 console.log('after: ' + new Date().getTime()) }) newFun("测试后置通知"); // 调用结果 // 原型函数: 测试前置通知 // after: 1557047997647
around(环绕通知)
在方法执行前后分别执行
// 利用前面的before、after方法实现 Function.prototype.around = function(beforeFun, afterFun) { var _orgin = this; return function() { return _orgin.before(beforeFun).after(afterFun).apply(this, arguments); } }
3. AOP遇到修饰器
JS在ES7的提案中终于增加了修饰器(Decorator)函数,它是用来修改类的行为,但是现在浏览器都不支持,需要使用Babel进行转换,当AOP与修饰器结合后,又会给我们带来什么呢?
日志记录
通过AOP与修饰器的结合会很方便的进行日志的记录或者函数执行时间的记录
class Person { @log say(nick) { return `hi ${nick}`; } } function log(target, name, decriptor){ var _origin = descriptor.value; descriptor.value = function(){ console.log(`Calling ${name} with `, argumants); return _origin.apply(null, arguments); }; return descriptor; } var person = new Person(); person.say('小明');
判断用户登录状态
class User { @checkLogin getUserInfo() { console.log('获取用户信息') } } // 检查用户是否登录 function checkLogin(target, name, descriptor) { let method = descriptor.value descriptor.value = function (...args) { // 校验方法,假设这里可以获取到用户名/密码 if (validate(args)) { method.apply(this, args) } else { console.log('没有登录,即将跳转到登录页面...') } } } let user = new User() user.getUserInfo()
4. React中的AOP
在react中使用AOP思想的典型就是高阶组件(HOC),请看下面的例子
function HOCComp(WrappedComponent){ return class HOC extends Component { render(){ const newProps = {param: 'HOC'}; return <div> <WrappedComponent {...this.props} {...newProps}/> </div> } } } @HOCComp class OriginComponent extends Component { render(){ return <div>这是原始组件{this.props.param}</div> } }
上面例子中在HOCComp中定义新的props,并传入子组件中。我们也可以对OriginComponent组件中的一些props进行加工,或对OriginComponent外层进行再次包装。从而不必去修改内部组件,保持了功能上的解耦。
5. 总结
AOP思想在框架及项目中使用的很多,包括React高阶组件、日志记录、登录验证、redux中间件等。在开发中应该与OOP相辅相成,共同提高软件的健壮性及可维护性。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
参考资料
- https://www.jb51.net/article/160748.htm
- https://www.jb51.net/article/160753.htm
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 2019明达发烧碟MasterSuperiorAudiophile[WAV+CUE]
- 蔡幸娟.1993-相爱容易相处难【飞碟】【WAV+CUE】
- 陆虎.2024-是否愿意成为我的全世界【Hikoon】【FLAC分轨】
- 关淑怡.2009-ERA【星娱乐】【WAV+CUE】
- 林忆莲《关于她的爱情故事》2022新世纪MQA 24K金碟限量版[WAV+CUE]
- 张雨生1993《一天到晚游泳的鱼》台湾G字首版[WAV+CUE][1G]
- 群星《试音五大女声》[WAV+CUE][1G]
- 魔兽世界wlk武器战一键输出宏是什么 wlk武器战一键输出宏介绍
- 魔兽世界wlk狂暴战一键输出宏是什么 wlk狂暴战一键输出宏介绍
- 魔兽世界wlk恶魔术士一键输出宏是什么 wlk恶魔术士一键输出宏介绍
- 医学爱好者狂喜:UP主把医学史做成了格斗游戏!
- PS5 Pro评分解禁!准备升级入手吗?
- 我们盘点了近期火热的国产单机游戏!《琉隐神渡》等 你期待哪款?
- 2019年第12届广州影音展双碟纪念版ADMS2CD[MP3/WAV]
- 黄安《救姻缘》台首版[WAV+CUE]