設計一個JavaScript插件系統，重要無比-js教程-PHP中文網

設計一個JavaScript插件系統，重要無比

#WordPress有外掛、 jQuery有外掛、Gatsby、Eleventy和Vue也是如此。

外掛程式是庫和框架的常見功能，並且有一個很好的理由：它們允許開發人員以安全，可擴展的方式添加功能。這使核心項目更有價值，並建立了一個社區——所有這些都不會增加額外的維護負擔。太好了！

那麼要如何去建立一個外掛系統呢？讓我們用JavaScript建立一個我們自己的插件來回答這個問題。

讓我們建立一個外掛系統

讓我們從一個名為BetaCalc的範例專案開始。 BetaCalc的目標是成為一個簡約的JavaScript計算器，其他開發人員可以在其中添加「按鈕」。以下是一些基本的入門程式碼：

// 计算器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);
  }
};// 使用计算器betaCalc.setValue(3); // => 3betaCalc.plus(3);     // => 6betaCalc.minus(2);    // => 4复制代码

登入後複製

我們將計算器定義為一種客觀事物，以使事情變得簡單，計算器透過 console.log 列印結果來運作。

目前功能確實很有限。我們有一個 setValue 方法，該方法接受一個數字並將其顯示在「螢幕」上。我們還有加法（plus）和減法（minus）方法，它們將對目前顯示的值執行一個運算。

現在該增加更多功能了。首先創建一個插件系統。

世界上最小的外掛系統

我們將從建立一個註冊（register）方法開始，其他開發人員可以使用該方法向BetaCalc註冊外掛程式。這個方法的工作很簡單：獲取外部插件，獲取其exec 函數，並將其作為新方法附加到我們的計算器上：

// 计算器const betaCalc = {  // ...其他计算器代码在这里

  register(plugin) {    const { name, exec } = plugin;    this[name] = exec;
  }
};复制代码

登入後複製

這是一個範例插件，為我們的計算器提供了一個「平方（squared）」按鈕：

// 定义插件const squaredPlugin = {  name: 'squared',  exec: function() {    this.setValue(this.currentValue * this.currentValue)
  }
};// 注册插件betaCalc.register(squaredPlugin);复制代码

登入後複製

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

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

在我們的外掛程式中，exec 函數包含我們的程式碼，name 是我們的元資料。註冊外掛程式後，exec 函數將作為一種方法直接附加到我們的 betaCalc 對象，從而可以存取BetaCalc的 this。

現在，BetaCalc有一個新的「平方」按鈕，可以直接呼叫：

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

登入後複製

這個系統有很多優點。該插件是一種簡單的物件字面量，可以傳遞給我們的函數。這意味著插件可以透過npm下載並作為ES6模組導入。易於分發是超級重要的！

但是我們的系統有一些缺陷。

透過提供外掛程式存取BetaCalc的 this 權限，他們可以對所有BetaCalc的程式碼進行讀取/寫入存取。雖然這對於獲取和設定 currentValue 很有用，但也很危險。如果外掛程式要重新定義內部函數（如 setValue），則它可能會為BetaCalc和其他外掛程式產生意外的結果。這違反了開放-封閉原則，即一個軟體實體應該是開放的擴展，但封閉修改。

另外，「squared」函數透過產生副作用發揮作用。這在JavaScript中並不少見，但感覺並不好——特別是當其他插件可能處於相同內部狀態的情況下。更實用的方法將大大有助於使我們的系統更安全、更可預測。

更好的外掛架構

讓我們再來看看一個更好的外掛架構。下一個例子同時改變了計算器和它的插件API：

// 计算器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;
  }
};  
// 我们得插件，平方插件const squaredPlugin = { 
  name: 'squared',  exec: function(currentValue) {    return currentValue * currentValue;
  }
};

betaCalc.register(squaredPlugin);// 使用计算器betaCalc.setValue(3);      // => 3betaCalc.press('plus', 2); // => 5betaCalc.press('squared'); // => 25betaCalc.press('squared'); // => 625复制代码

登入後複製

我們在這裡做了一些值得注意的更改。

首先，我們將外掛程式與「核心（core）」計算器方法（如plus和minus）分開，方法是將其放入自己的插件物件中。將我們的插件儲存在plugins 物件中可使我們的系統更安全。現在，存取此plugins的插件將看不到BetaCalc屬性，而只能看到 betaCalc.plugins 的屬性。

其次，我們實作了一個 press 方法，該方法按名稱尋找按鈕的功能，然後呼叫它。現在，當我們呼叫外掛程式的 exec 函數時，我們將目前的計算器值（currentValue ）傳遞給該函數，並期望它會傳回新的計算器值。

本質上，這個新的 press 方法將我們所有的計算器按鈕轉換為純函數。他們取得一個值，執行一個操作，然後傳回結果。這有很多好處：

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

這種新架構比第一個範例受到更多限制，但效果很好。我們基本上為插件作者設定了護欄，限制他們只能做我們希望他們做的改變。

實際上，它可能太嚴格了！現在，我們的計算器外掛程式只能對 currentValue 進行操作。如果外掛程式作者想要添加高級功能（例如「記憶」按鈕或追蹤歷史記錄的方式），那麼他們將無能為力。

也許這就是好的。你給插件作者的能力是一種微妙的平衡。給他們太多的權力可能會影響你專案的穩定性。但給它們的權力太小，它們就很難解決自己的問題——在這種情況下，你不如不要插件。

我們還能做什麼？

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

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

我們可以擴充插件的功能範圍。目前，一個BetaCalc插件可以新增一個按鈕。但是，如果它還可以註冊某些生命週期事件的回調（例如當計算器將要顯示值時）怎麼辦？或者說，如果有一個專門的地方讓它在多個互動中儲存一段狀態呢？這會不會開闢一些新的用例？

我們也可以擴充插件註冊的功能。如果一個插件可以透過一些初始設定來註冊呢？這是否能讓插件更加靈活？如果一個插件作者想註冊一整套按鈕，而不是一個單一的按鈕—例如「BetaCalc統計套件」？需要做哪些改動來支持呢？

你的外掛系統

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

一個很好的起點是查看現有項目，以獲取成功的插件系統的範例。對於JavaScript，這可能意味著jQuery，Gatsby，D3，CKEditor或其他。你可能還想熟悉各種JavaScript設計模式，每種模式都提供了不同的介面和耦合程度，這為你提供了很多好的插件架構選擇。了解這些選項有助於你更好地平衡使用你的專案的每個人的需求。

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

我知道這聽起來很多，但你必須進行研究。沒有什麼比讓每個人都重寫他們的插件更痛苦的了，因為你需要更改插件架構。這是一種快速失去信任的方式，讓人們失去對未來貢獻的信心。