JavaScript 实现 AOP 详解：面向切面编程与装饰者模式

AOP 概念与核心价值

什么是 AOP？

AOP（面向切面编程）的核心价值在于将那些与核心业务逻辑无关的功能从主模块中剥离出来。这类无关功能通常涵盖日志记录、权限校验及异常处理等场景。剥离后，系统通过“动态织入”机制，将这些功能重新注入到核心业务模块中。

AOP 能带来哪些实际收益？

采用 AOP 的首要优势是确保核心业务逻辑模块保持纯净且高内聚。其次，它使得日志统计等功能模块得以被便捷地复用，提升了开发效率。

JavaScript 实现 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();

执行结果如下：

上述代码通过 AOP 机制，将负责打印数字 1 和打印数字 3 的两个函数动态植入到 func 函数中。运行该代码后，控制台顺利输出了执行结果 1、2、3。

装饰者模式与 Function.prototype.before

这种利用 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' );

执行结果：

我们对 document.getElementById() 方法进行了装饰处理。此后，每次调用该方法前，都会先执行 alert("1") 语句。值得注意的是，这条语句并未写入 document.getElementById() 的源码内部，而是作为外部装饰存在。这种方式的显著优势在于，无需修改原方法源码即可为其添加新行为。遵循国际惯例，举一个实际案例：

传统修改与装饰者模式的对比

假设我的同事编写了一个输出当前时间的函数，而我的新需求是在输出时间前先输出当前天气。针对此需求，存在两种解决思路：

（1）传统解决办法：直接获取同事的函数，定位到其输出时间的代码行，并在该代码之前插入输出当前天气的逻辑。

（2）装饰者模式解决办法：获取同事的函数后，无需查阅其源码，直接对该函数进行装饰，即添加输出当前天气的代码逻辑。

虽然两种方法均能解决问题，但它们的出发点截然不同：

（1）方法一涉及改造原函数的内部逻辑，这意味着开发者必须理解源代码并进行修改。

（2）方法二则是给原函数添加了一层外部包装，完全无需关心原函数的内部实现细节。

此时，系统提出新的需求：在输出当前时间之前，需先输出当前温度。

（1）方法一：由于在第一个需求中已将同事的代码修改得面目全非，现在需要重新理解函数内部逻辑，并再次进行修改（即删除输出当前天气的代码，随后加入输出当前温度的代码）。

（2）方法二：同事原本的函数保持不变，我们只需给同事的函数更换一件“外套”（即输出当前温度的逻辑）即可。

以上关于 JavaScript 实现 AOP（面向切面编程与装饰者模式）的详解即为全部内容，希望能为大家提供参考，也希望大家多多支持本站。