设计一个JavaScript插件系统

发表于 4年以前 | 总阅读数：678 次

本文译自 https://css-tricks.com/designing-a-javascript-plugin-system/

插件是库和框架的常见功能，并且有一个很好的使用它的理由：它们允许开发人员以安全，可扩展的方式添加功能。这就使核心项目更具价值，这种开放形势可以帮助项目建立社区，并且不会为我们增加额外的维护负担。

本文就使用 JavaScript 来构建一个我们自己的插件系统。

这里我使用的是 “pluginn” 一词，但这些东西有时也称为其他名称，例如“extensions”，“add-ons”或“modules”。无论你叫什么，它的含义（和收益）都是相同的。

让我们构建一个插件系统

让我们从一个名为 BetaCalc 的示例项目开始。BetaCalc 的目标是成为一个简约的 JavaScript 计算器，其他开发人员可以在其中添加“按钮”。下面是一些基本的代码，可以帮助我们入门：

// The Calculator
const betaCalc = {
  currentValue: 0,

  setValue(newValue) {
    this.currentValue = newValue;
    console.log(this.currentValue);
  },

  plus(addend) {
    this.setValue(this.currentValue + addend);
  },

  minus(subtrahend) {
    this.setValue(this.currentValue - subtrahend);
  }
};

// Using the calculator
betaCalc.setValue(3); // => 3
betaCalc.plus(3);     // => 6
betaCalc.minus(2);    // => 4

为了简单起见，我们将计算器定义为 object-literal。该计算器通过 console.log 打印结果。

现在功能真的很简单。我们有一个 setValue 方法，它接受一个数字并将其显示在“屏幕”上。我们还有 plus 和 minus 方法，它们将对当前显示的值执行操作。

是时候添加更多的功能了。让我们从创建一个插件系统开始。

世界上最小的插件系统

我们将从创建一个 register 方法开始，其他开发人员可以使用它在 BetaCalc 上注册插件。这个方法的原理很简单: 获取外部插件，获取其 exec 功能，并将其作为新方法附加到我们的计算器上：

// The Calculator
const betaCalc = {
  // ...other calculator code up here
  register(plugin) {
    const { name, exec } = plugin;
    this[name] = exec;
  }
};

这是一个示例插件，为我们的计算器提供了一个 squared 按钮：

// Define the plugin
const squaredPlugin = {
  name: 'squared',
  exec: function() {
    this.setValue(this.currentValue * this.currentValue)
  }
};

// Register the plugin
betaCalc.register(squaredPlugin);

在许多插件系统中，插件通常分为两个部分：

要执行的代码
元数据（例如名称，描述，版本号，依赖项等）

在我们的插件中，exec 函数包含我们的代码，名称是我们的元数据。当插件注册时， exec 函数直接作为方法附加到 betaCalc 对象上，从而使其可以访问 BetaCalc 的 this 。

现在， BetaCalc 有一个新的 squared 按钮，可以直接调用：

betaCalc.setValue(3); // => 3
betaCalc.plus(2);     // => 5
betaCalc.squared();   // => 25
betaCalc.squared();   // => 625

这个系统有很多优点。该插件是一种简单的对象字面量，可以传递给我们的函数。这意味着可以通过 npm 下载插件并将其作为 ES6 模块导入。

但是我们的系统有一些缺陷。

通过为插件提供对 BetaCalc 的 this 访问权限，插件可以对所有 BetaCalc 的代码进行读/写访问。虽然这对于获取和设置 currentValue 很有用，但也很危险。如果某个插件要重新定义内部函数（如setValue），则它可能会对 BetaCalc 和其他插件产生意外的影响。这违反了开放闭合原则，该原则规定，软件实体应该对扩展开放，对修改关闭。

同样的， squared 函数通过产生副作用发挥作用。这在 JavaScript 中并不少见，但感觉不是很好 —— 特别是当其他插件可能在处理同一内部状态时。一种更实用的方法将大大有助于使我们的系统更安全、更可预测。

更好的插件架构

让我们来看一个更好的插件架构。下一个示例更改了计算器及其插件 API ：

// The Calculator
const betaCalc = {
  currentValue: 0,

  setValue(value) {
    this.currentValue = value;
    console.log(this.currentValue);
  },

  core: {
    'plus': (currentVal, addend) => currentVal + addend,
    'minus': (currentVal, subtrahend) => currentVal - subtrahend
  },

  plugins: {},    

  press(buttonName, newVal) {
    const func = this.core[buttonName] || this.plugins[buttonName];
    this.setValue(func(this.currentValue, newVal));
  },

  register(plugin) {
    const { name, exec } = plugin;
    this.plugins[name] = exec;
  }
};

// Our Plugin
const squaredPlugin = { 
  name: 'squared',
  exec: function(currentValue) {
    return currentValue * currentValue;
  }
};

betaCalc.register(squaredPlugin);

// Using the calculator
betaCalc.setValue(3);      // => 3
betaCalc.press('plus', 2); // => 5
betaCalc.press('squared'); // => 25
betaCalc.press('squared'); // => 625

我们在这里做了一些值得注意的更改。

首先，我们将插件与“核心”计算器方法（如plus和minus）分开，方法是将其放在自己的插件对象中。将插件存储在一个plugin对象中可以使我们的系统更安全。现在，插件访问不到 BetaCalc 属性-他们只能访问到 betaCalc.plugins 的属性。

其次，我们实现了一个 press 方法，该方法按名称查找按钮的功能，然后调用它。现在，当我们调用插件的 exec 函数时，我们将当前的计算器值（currentValue）传递给它，并且我们期望它返回新的计算器值。

本质上，这种新 press 方法将我们所有的计算器按钮转换为纯函数。他们获取一个值，执行一个操作，然后返回结果。这有很多好处：