位置：首页-资讯-前端开发

JavaScript中的AOP编程的基本实现

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

AOP 简介

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

面向切面编程给我们提供了一个方法，让我们可以在不修改目标逻辑的情况下，将代码注入到现有的函数或对象中。

虽然不是必须的，但注入的代码意味着具有横切关注点，比如添加日志功能、调试元数据或其它不太通用的但可以注入额外的行为，而不影响原始代码的内容。

给你举一个合适的例子，假设你已经写好了业务逻辑，但是现在你意识到没有添加日志代码。通常的方法是将日志逻辑集中到一个新的模块中，然后逐个函数添加日志信息。

然而，如果你可以获取同一个日志程序，在你想要记录的每个方法执行过程中的特定节点，只需一行代码就可将程序注入，那么这肯定会给你带来很多便利。难道不是吗？

切面、通知和切点（是什么、在何时、在何地）

为了使上面的定义更形式化一点，让我们以日志程序为例，介绍有关 AOP 的三个概念。如果你决定进一步研究这个范式，这些将对你有所帮助：

切面 (是什么)：这是你想要注入到你的目标代码的 “切面” 或者行为。在我们的上下文环境（JavaScript）中，这指的是封装了你想要添加的行为的函数。
通知 (在何时)：你希望这个切面什么时候执行？“通知” 指定了你想要执行切面代码的一些常见的时刻，比如 “before”、“after”、“around”、“whenThrowing” 等等。反过来，它们指的是与代码执行相关的时间点。对于在代码执行后引用的部分，这个切面将拦截返回值，并可能在需要时覆盖它。
切点 (在何地)：他们引用了你想要注入的切面在你的目标代码中的位置。理论上，你可以明确指定在目标代码中的任何位置去执行切面代码。实际上这并不现实，但你可以潜在地指定，比如：“我的对象中的所有方法”，或者“仅仅是这一个特定方法”，或者我们甚至可以使用“所有以 get_ 开头的方法”之类的内容。

有了这些解释，你会发现创建一个基于 AOP 的库来向现有的基于 OOP 的业务逻辑（举个例子）添加日志逻辑是相对容易的。你所要做的就是用一个自定义函数替换目标对象现有的匹配方法，该自定义函数会在适当的时间点添加切面逻辑，然后再调用原有的方法。

基本实现

因为我是一个视觉学习者，所以我认为，展示一个基本的例子说明如何实现一种 切面 方法来添加基于 AOP 的行为将是个漫长的过程。

下面的示例将阐明实现它有多容易以及它给你的代码带来的好处。


` const getMethods = (obj) => Object.getOwnPropertyNames(Object.getPrototypeOf(obj)).filter(item => typeof obj[item] === 'function')

 function replaceMethod(target, methodName, aspect, advice) { const originalCode = target[methodName] target[methodName] = (...args) => { if(["before", "around"].includes(advice)) { aspect.apply(target, args) } const returnedValue = originalCode.apply(target, args) if(["after", "around"].includes(advice)) { aspect.apply(target, args) } if("afterReturning" == advice) { return aspect.apply(target, [returnedValue]) } else { return returnedValue
 } } }

module.exports = { // 导出的主要方法：在需要的时间和位置将切面注入目标 inject: function(target, aspect, advice, pointcut, method = null) { if(pointcut == "method") { if(method != null) { replaceMethod(target, method, aspect, advice)
} else { throw new Error("Tryin to add an aspect to a method, but no method specified") } } if(pointcut == "methods") { const methods = getMethods(target) methods.forEach( m => { replaceMethod(target, m, aspect, advice) 
}) } } }`

非常简单，正如我提到的，上面的代码并没有涵盖所有的用例，但是它应该足以涵盖下一个示例。

但是在我们往下看之前，注意一下这个 replaceMethod 函数，这就是“魔法”生效的地方。它能够创建新函数，也可以决定我们何时调用我们的切面以及如何处理它的返回值。

接下来说明这个库的用法：


`const AOP = require("./aop.js")

class MyBussinessLogic {
add(a, b) {
    console.log("Calling add")
    return a + b
}

concat(a, b) {
    console.log("Calling concat")
    return a + b
}

power(a, b) {
    console.log("Calling power")
    return a ** b
}
}

const o = new MyBussinessLogic()

function loggingAspect(...args) { console.log("== Calling the logger function ==") console.log("Arguments received: " + args) }

function printTypeOfReturnedValueAspect(value) { console.log("Returned type: " + typeof value) }

AOP.inject(o, loggingAspect, "before", "methods") AOP.inject(o, printTypeOfReturnedValueAspect, "afterReturning", "methods")

o.add(2,2) o.concat("hello", "goodbye") o.power(2, 3)`

这只是一个包含三个方法的基本对象，没什么特别的。我们想要去注入两个通用的切面，一个用于记录接收到的属性，另一个用于分析他们的返回值并记录他们的类型。两个切面，两行代码（并不需要六行代码）。

这个示例到这里就结束了，这里是你将得到的输出：

https://camo.githubusercontent.com/f18ef187f4acddab8df097c8aa4521d632e17759bc1c0831a22ada934388d7b5/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a394b5a42774f6262714145754a4176314757537279672e706e67