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

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

场景

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

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

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

关注点分离

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

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

 装饰器（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;}