详解在Javascript中进行面向切面编程


Posted in Javascript onApril 28, 2019

面向切面编程(Aspect-oriented programming,AOP)是一种编程范式。做后端 Java web 的同学,特别是用过 Spring 的同学肯定对它非常熟悉。AOP 是 Spring 框架里面其中一个重要概念。可是在 Javascript 中,AOP 是一个经常被忽视的技术点。

场景

假设你现在有一个牛逼的日历弹窗,有一天,老板让你统计一下每天这个弹窗里面某个按钮的点击数,于是你在弹窗里做了埋点;

过了一个星期,老板说用户反馈这个弹窗好慢,各种卡顿。你想看一下某个函数的平均执行时间,于是你又在弹窗里加上了性能统计代码。

时间久了,你会发现你的业务逻辑里包含了大量的和业务无关的东西,即使是一些你已经封装过的函数。
那么 AOP 就是为了解决这类问题而存在的。

关注点分离

分离业务代码和数据统计代码(非业务代码),无论在什么语言中,都是AOP的经典应用之一。从核心关注点中分离出横切关注点,是 AOP 的核心概念。
在前端的常见需求中,有以下一些业务可以使用 AOP 将其从核心关注点中分离出来

  1. Node.js 日志log
  2. 埋点、数据上报
  3. 性能分析、统计函数执行时间
  4. 给ajax请求动态添加参数、动态改变函数参数
  5. 分离表单请求和验证
  6. 防抖与节流

 装饰器(Decorator)

提到 AOP 就要说到装饰器模式,AOP 经常会和装饰器模式混为一谈。

在ES6之前,要使用装饰器模式,通常通过Function.prototype.before做前置装饰,和Function.prototype.after做后置装饰(见《Javascript设计模式和开发实践》)。

Javascript 引入的 Decorator ,和 Java 的注解在语法上很类似,不过在语义上没有一丁点关系。Decorator 提案提供了对 Javascript 的类和类里的方法进行装饰的能力。(尽管只是在编译时运行的函数语法糖)

埋点数据上报

因为在使用 React 的实际开发中有大量基于 Class 的 Component,所以我这里用 React 来举例。
比如现在页面中有一个button,点击这个button会弹出一个弹窗,与此同时要进行数据上报,来统计有多少用户点击了这个登录button。

import React, { Component } from 'react';
import send from './send';

class Dialog extends Component {

  constructor(props) {
    super(props);
  }

  @send
  showDialog(content) {
    // do things
  }

  render() {
    return (
      <button onClick={() => this.showDialog('show dialog')}>showDialog</button>
    )
  }
}

export default Dialog;

上面代码引用了@send装饰器,他会修改这个 Class 上的原型方法,下面是@send装饰器的实现

export default function send(target, name, descriptor) {
  let oldValue = descriptor.value;

  descriptor.value = function () {
    console.log(`before calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };

  return descriptor;
}

在按钮点击后执行showDialog前,可以执行我们想要的切面操作,我们可以将埋点,数据上报相关代码封装在这个装饰器里面来实现 AOP。

前置装饰和后置装饰

上面的send这个装饰器其实是一个前置装饰器,我们可以将它再封装一下使它可以前置执行任意函数。

function before(beforeFn = function () { }) {
  return function (target, name, descriptor) {
    let oldValue = descriptor.value;

    descriptor.value = function () {
      beforeFn.apply(this, arguments);
      return oldValue.apply(this, arguments);
    };

    return descriptor;
  }
}

这样我们就可以使用@before装饰器在一个原型方法前切入任意的非业务代码。

function beforeLog() {
  console.log(`before calling ${name} with`, arguments);
}
class Dialog {
  ...
  @before(beforeLog)
  showDialog(content) {
    // do things
  }
  ...
}

和@before装饰器类似,可以实现一个@after后置装饰器,只是函数的执行顺序不一样。

function after(afterFn = function () { }) {
  return function (target, name, descriptor) {
    let oldValue = descriptor.value;

    descriptor.value = function () {
      let ret = oldValue.apply(this, arguments);
      afterFn.apply(this, arguments);
      return ret;
    };

    return descriptor;
  }
}

性能分析

有时候我们想统计一段代码在用户侧的执行时间,但是又不想将打点代码嵌入到业务代码中,同样可以利用装饰器来做 AOP。

function measure(target, name, descriptor) {
  let oldValue = descriptor.value;

  descriptor.value = function () {
    let ret = oldValue.apply(this, arguments);
    performance.mark("startWork");
    afterFn.apply(this, arguments);
    performance.mark("endWork");
    performance.measure("work", "startWork", "endWork");
    performance
     .getEntries()
     .map(entry => JSON.stringify(entry, null, 2))
     .forEach(json => console.log(json));
    return ret;
  };

  return descriptor;
}

在要统计执行时间的类方法前面加上@measure就行了,这样做性能统计的代码就不会侵入到业务代码中。

class Dialog {
  ...
  @measure
  showDialog(content) {
    // do things
  }
  ...
}

小结

面向切面编程的重点就是将核心关注面分离出横切关注面,前端可以用 AOP 优雅的来组织数据上报、性能分析、统计函数的执行时间、动态改变函数参数、插件式的表单验证等代码。

以上所述是小编给大家介绍的Javascript面向切面编程详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
jQuery 创建Dom元素
May 07 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
javascript常用函数(1)
Nov 04 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 #Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 #Javascript
vue操作动画的记录animate.css实例代码
Apr 26 #Javascript
JS原生瀑布流效果实现
Apr 26 #Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 #Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 #Javascript
vue组件间的参数传递实例详解
Apr 26 #Javascript
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
js密码强度检测
2016/01/07 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python交互环境下实现输入代码
2018/06/22 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python爬取微博评论的实例讲解
2021/01/15 Python
餐饮加盟计划书
2014/01/10 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
员工年终考核评语
2014/12/31 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
golang语言指针操作
2022/04/14 Golang