JavaScript实现AOP详解(面向切面编程,装饰者模式)


Posted in Javascript onDecember 19, 2017

什么是AOP?

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后, 再通过“动态织入”的方式掺入业务逻辑模块中。

AOP能给我们带来什么好处?

AOP的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块。

JavaScript实现AOP的思路?

通常,在 JavaScript 中实现 AOP,都是指把一个函数“动态织入”到另外一个函数之中,具体的实现技术有很多,下面我用扩展 Function.prototype 来做到这一点。请看下面代码:

Function.prototype.before = function (beforefn) {
  var _self = this; //保存原函数引用
  return function () { //返回包含了原函数和新函数的"代理函数"
   beforefn.apply(this, arguments); //执行新函数,修正this
   return _self.apply(this, arguments); //执行原函数
  }
 };
 Function.prototype.after = function (afterfn) {
  var _self = this;
  return function () {
   var ret = _self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 var func = function () {
  console.log("2")
 }
 func = func.before(function () {
  console.log("1");
 }).after(function () {
  console.log("3");
 } )
 func();

执行结果如下:

JavaScript实现AOP详解(面向切面编程,装饰者模式)

我把负责打印数字1和打印数字3的两个函数通过AOP的方式动态植入func函数。通过执行上面的代码,我们看到控制台顺利地返回了执行结果1、2、3。

这种使用AOP的方式来给函数添加职责,也是JavaScript语言中的一种非常特别的巧妙的装饰者模式实现,下面我们来试试Function.prototype.before的威力,请看下面代码:

Function.prototype.before = function (beforefn) {
  var __self = this; // 保存原函数的引用
  return function () { // 返回包含了原函数和新函数的"代理"函数
   beforefn.apply(this, arguments); // 执行新函数,且保证 this 不被劫持,新函数接受的参数 // 也会被原封不动地传入原函数,新函数在原函数之前执行
   return __self.apply(this, arguments); // 执行原函数并返回原函数的执行结果, 2 // 并且保证 this 不被劫持
  }
 }
 Function.prototype.after = function (afterfn) {
  var __self = this;
  return function () {
   var ret = __self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 document.getElementById = document.getElementById.before(function(){ alert (1);
 });
 var button = document.getElementById( 'button' );

执行结果:

JavaScript实现AOP详解(面向切面编程,装饰者模式)

我们给document.getElementById()做了一些装饰,以后我们每次调用这个方法之前都会先执行alert("1")这条语句,但是请注意我们这条语句并不是写在了document.getElementById()这个方法的源码中,而只是在他的外部给他加了装饰,这样带来好处就是我们可以在不改变原方法的源码的情况下为他添加一些新的行为。国际惯例,举个栗子:

我的同事写了一个函数可以输出当前时间,而我现在的需求是输出当前天气之后再输出当前时间,下面有两种解决思路:

(1)传统解决办法: 拿同事的函数过来,找到他输出时间的代码,在这些代码之前加入输出当前天气的代码

(2)装饰者模式解决办法:拿同事的函数过来,不用看他的源码,直接给他的函数装饰一下,装饰的东西也就是输出当前天气的代码。

两种方法都解决了问题,但是他们的出发点是完全不同的:

(1)方法是改造原函数的内部,我们就需要去理解源代码,然后做修改。

(2)方法是给原函数添加了一层外套,我们根本不用管原本函数的内部实现。

现在又有了新的需求:在输出当前时间之前,先输出当前温度

(1)方法,我们在第一个需求已经把同事的代码改的面目全非了,现在又要重新理解函数内部,并加以修改(删除输出当前天气的代码,然后加入输出当前温度的代码)。

(2)方法,同事原本的函数是没有变的,我们现在给同事的函数换一件套(输出当前温度)就可以了。

以上这篇JavaScript实现AOP详解(面向切面编程,装饰者模式)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
利用nginx + node在阿里云部署https的步骤详解
Dec 19 #Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 #Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 #Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 #Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 #Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
基于node.js实现微信支付退款功能
Dec 19 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP编写简单的App接口
2016/08/28 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
工作会议欢迎词
2014/01/16 职场文书
会计助理岗位职责
2014/02/17 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
经费申请报告范文
2015/05/18 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
pytorch 6 batch_train 批训练操作
2021/05/28 Python