本文譯自 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);

在許多外掛系統中，外掛通常分為兩個部分：

1. 要執行的程式碼
2. 元資料（例如名稱，描述，版本號，依賴項等）

在我們的外掛中， 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 方法將我們所有的計算器按鈕轉換為純函式。他們獲取一個值，執行一個操作，然後返回結果。這有很多好處：

• 簡化了 API 。
• 使測試更加容易（對於 BetaCalc 和外掛本身）。
• 減少了我們系統的依賴性，使其更鬆散地耦合在一起。

這個新的體系結構比第一個示例有更多的限制，但方式是好的。我們為外掛作者設定了防護欄，限制他們只做我們想讓他們做的改變。

實際上，它可能太嚴格了！現在，我們的計算器外掛只能操作 currentValue 。如果外掛作者想要新增高階功能，例如“記憶體”按鈕或跟蹤歷史記錄的方法，則無法做到。

也許沒關係。你賦予外掛作者的力量是微妙的平衡。給它們過多的許可權可能會影響專案的穩定性。但是，給他們很少的許可權會使他們很難解決他們的問題。

我們還能做什麼？

我們還可以做很多工作來改善我們的系統。

如果外掛作者忘記定義名稱或返回值，我們可以新增錯誤處理以通知外掛作者。像QA開發人員一樣思考並想象我們的系統如何崩潰，以便我們能夠主動處理這些情況。

我們可以擴充套件外掛的功能範圍。現在，一個 BetaCalc 外掛可以新增一個按鈕。但是，如果它還可以註冊某些生命週期事件的回撥（例如當計算器將要顯示值時）怎麼辦？或者，如果有一個專用的位置來儲存多個互動中的狀態，該怎麼辦？

我們還可以擴充套件外掛註冊。如果可以使用一些初始設定註冊外掛怎麼辦？可以使外掛更靈活嗎？如果外掛作者希望註冊整個按鈕套件而不是一個按鈕套件（如 BetaCalc Statistics Pack ），該怎麼辦？為了支援這一點需要進行哪些更改？

你的外掛系統

BetaCalc 及其外掛系統都非常簡單。如果你的專案較大，則需要探索其他一些外掛體系結構。

一個很好的起點是檢視現有專案，以獲取成功的外掛系統的示例。對於 JavaScript ，你可以檢視 jQuery，Gatsby，D3，CKEditor 或其他。

你可能還想熟悉各種 JavaScript 設計模式。每種模式都提供了不同的介面和耦合程度，這為你提供了許多不錯的外掛體系結構選項供你選擇。瞭解這些選項可以幫助你更好地平衡使用專案的每個人的需求。

除了模式本身之外，你還可以借鑑許多好的軟體開發原則來做出此類決策。我已經提到了一些方法（例如開閉原理和鬆散耦合），但是其他一些相關的方法包括 Demeter 定律和依賴注入。

我知道這聽起來很多，但是你必須進行研究。沒有什麼比讓每個人都重寫他們的外掛更痛苦的了，因為你需要更改外掛架構。這是一種失去信任並阻止人們在將來做出貢獻的快速方法。

結論

從頭開始編寫好的外掛架構很困難！你必須權衡許多考慮因素，以構建滿足每個人需求的系統。夠簡單嗎？足夠強大嗎？它可以長期工作嗎？

值得付出努力。擁有一個好的外掛系統可以幫助所有人。開發人員可以自由解決問題。終端使用者可以獲得大量的選擇功能。這樣你就可以在專案周圍發展生態系統和社群。這是一個雙贏的局面。

以上就是構建一個JavaScript外掛系統的詳細內容，更多關於JavaScript 外掛的資料請關注我們其它相關文章！