aop - 切面编程，主要用于执行一些与业务不相关的操作。
比如上报数据、日志输出等与业务不强相关的操作，把这些非业务操作与业务流程解耦。
还有其它使用情况，比如有一个通用弹层，打开弹层和关闭弹层都有一些操作，比如打开弹层需要把body的颜色变成灰色，然后关闭弹层需要把颜色还原等这样的操作。正常的解决方法是
需要增加beforeOpen，beforeClose这样的回调函数，需要接口提供对应的参数接口，如果需要在打开弹层之后还需要提供 afterOpen等这样的方法。但是如果弹层支持aop就可以直接对open方法进行修改了。
一般情况下，aop是用在同步函数中使用的，但是有时候异步函数也需要用到，比如：请求列表的数据，需要把数据列表的盒展示成loading状态，数据请求回来之后，再去掉loading状态。所以我写了个工具函数，也支持
返回Promise的函数、async函数、Generator函数。
aop通用方法完整案例如下：
export function isFunction(arg) { return typeof arg === "function"; } export function isGeneratorFunction(obj) { return obj && obj.constructor && "GeneratorFunction" === obj.constructor.name; } export function isAsyncFunction(obj) { return obj && obj.constructor && "AsyncFunction" === obj.constructor.name; } export function isPromise(obj) { return obj && "function" === typeof obj.then; } /** * 切面编程 * @param {Function | GeneratorFunction | AsyncFunction} fn - 方法 * @param {*} beforeFn - 前置方法 * @param {*} afterFn - 后置方法 */ export function aop(fn, beforeFn, afterFn) { if (isGeneratorFunction(fn)) { const newFn = function(...args) { const me = this; if (isFunction(beforeFn)) { beforeFn.apply(me, args); } let ret = fn.apply(me, args); let next = ret.next; ret.next = function(...arg) { const done = next.apply(ret, arg); if (done.done) { if (isFunction(afterFn)) { afterFn.apply(me, args); } } return done; }; return ret; }; for (let key in fn) { if (fn.hasOwnProperty(key)) { newFn[key] = fn[key]; } } return newFn; } if (isAsyncFunction(fn)) { const newFn = async function(...args) { const me = this; if (isFunction(beforeFn)) { beforeFn.apply(me, args); } return await fn .apply(me, args) .then((...data) => { if (isFunction(afterFn)) { afterFn.apply(me, data); } return data; }) .catch((...err) => { if (isFunction(afterFn)) { afterFn.apply(me, err); } throw err; }); }; for (let key in fn) { if (fn.hasOwnProperty(key)) { newFn[key] = fn[key]; } } return newFn; } if (isFunction(fn)) { const newFn = function(...args) { const me = this; if (isFunction(beforeFn)) { beforeFn.apply(me, args); } const ret = fn.apply(me, args); if (isFunction(afterFn)) { if (isPromise(ret)) { ret .then((...data) => { afterFn.apply(me, data); }) .catch((...err) => { afterFn.apply(me, err); }); } else { afterFn.apply(me, args); } } return ret; }; for (let key in fn) { if (fn.hasOwnProperty(key)) { newFn[key] = fn[key]; } } return newFn; } } export function before(fn, callback) { return aop(fn, callback, null); } export function after(fn, callback) { return aop(fn, null, callback); } export function wrap(fn, beforeFn, afterFn) { return aop(fn, beforeFn, afterFn); } export function aopFactory(fn) { //非函数或者已有aop方法原样输出 if (typeof fn !== "function" || fn.before || fn.after || fn.wrap) { return fn; } fn.before = function(callback) { const me = this; return before(me, callback); }; fn.after = function(callback) { const me = this; return after(me, callback); }; fn.wrap = function(beforeFn, afterFn) { const me = this; return wrap(me, beforeFn, afterFn); }; return fn; }
使用案例 - 普通方法调用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>普通函数</title> </head> <body> <script src="./aop.js"></script> <script> function pureFn() { console.log('我是一个普通的函数'); } const aopFn = aopFactory(pureFn); const fn = aopFn.before(function () { console.log('我是前置方法') }) .after(function () { console.log('我是后置方法') }); fn(); </script> </body> </html>
使用案例 - async方法调用 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>普通函数</title> </head> <body> <script src="./aop.js"></script> <script> async function asyncFn() { const ret = await new Promise((resolve) => { setTimeout(() => { console.log('异步函数内部操作') resolve('我是async方法，返回值。') }, 1000); }) console.log(`ret: ${ret}`) return ret; } const aopFn = aopFactory(asyncFn); const fn = aopFn.before(function () { console.log('我是前置方法') }) .after(function () { console.log('我是后置方法') }); fn() .then((data) => { console.log(data); }) .finally(() => { console.log('finally'); }) </script> </body> </html>
结果:
使用案例 - promise方法 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>普通函数</title> </head> <body> <script src="./aop.js"></script> <script> function promiseFn() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('返回内容') }, 1000) }) } const aopFn = aopFactory(promiseFn); const fn = aopFn.before(function () { console.log('前置方法') }) .after(function () { console.log('后置方法') }); fn().then((data) => { console.log(data); }); </script> </body> </html>
注意这里有个小问题是，这个after的方法是在异步之后执行的，但是是在其它then之前执行的。