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

插件是庫(kù)和框架的常見(jiàn)功能，并且有一個(gè)很好的使用它的理由：它們?cè)试S開(kāi)發(fā)人員以安全，可擴(kuò)展的方式添加功能。這就使核心項(xiàng)目更具價(jià)值，這種開(kāi)放形勢(shì)可以幫助項(xiàng)目建立社區(qū)，并且不會(huì)為我們?cè)黾宇~外的維護(hù)負(fù)擔(dān)。

本文就使用 JavaScript 來(lái)構(gòu)建一個(gè)我們自己的插件系統(tǒng)。

這里我使用的是 “pluginn” 一詞，但這些東西有時(shí)也稱為其他名稱，例如“extensions”，“add-ons”或“modules”。無(wú)論你叫什么，它的含義（和收益）都是相同的。

讓我們構(gòu)建一個(gè)插件系統(tǒng)

讓我們從一個(gè)名為 BetaCalc 的示例項(xiàng)目開(kāi)始。 BetaCalc 的目標(biāo)是成為一個(gè)簡(jiǎn)約的 JavaScript 計(jì)算器，其他開(kāi)發(fā)人員可以在其中添加“按鈕”。下面是一些基本的代碼，可以幫助我們?nèi)腴T：

// The Calculatorconst 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 calculatorbetaCalc.setValue(3); // => 3betaCalc.plus(3); // => 6betaCalc.minus(2); // => 4

為了簡(jiǎn)單起見(jiàn)，我們將計(jì)算器定義為 object-literal 。該計(jì)算器通過(guò) console.log 打印結(jié)果。

現(xiàn)在功能真的很簡(jiǎn)單。我們有一個(gè) setValue 方法，它接受一個(gè)數(shù)字并將其顯示在“屏幕”上。我們還有 plus 和 minus 方法，它們將對(duì)當(dāng)前顯示的值執(zhí)行操作。

是時(shí)候添加更多的功能了。讓我們從創(chuàng)建一個(gè)插件系統(tǒng)開(kāi)始。

世界上最小的插件系統(tǒng)

我們將從創(chuàng)建一個(gè) register 方法開(kāi)始，其他開(kāi)發(fā)人員可以使用它在 BetaCalc 上注冊(cè)插件。這個(gè)方法的原理很簡(jiǎn)單: 獲取外部插件，獲取其 exec 功能，并將其作為新方法附加到我們的計(jì)算器上：

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

這是一個(gè)示例插件，為我們的計(jì)算器提供了一個(gè) squared 按鈕：

// Define the pluginconst squaredPlugin = { name: ’squared’, exec: function() { this.setValue(this.currentValue * this.currentValue) }};// Register the pluginbetaCalc.register(squaredPlugin);

在許多插件系統(tǒng)中，插件通常分為兩個(gè)部分：

要執(zhí)行的代碼 元數(shù)據(jù)（例如名稱，描述，版本號(hào)，依賴項(xiàng)等）

在我們的插件中， exec 函數(shù)包含我們的代碼，名稱是我們的元數(shù)據(jù)。當(dāng)插件注冊(cè)時(shí)， exec 函數(shù)直接作為方法附加到 betaCalc 對(duì)象上，從而使其可以訪問(wèn) BetaCalc 的 this 。

現(xiàn)在， BetaCalc 有一個(gè)新的 squared 按鈕，可以直接調(diào)用：

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

這個(gè)系統(tǒng)有很多優(yōu)點(diǎn)。該插件是一種簡(jiǎn)單的對(duì)象字面量，可以傳遞給我們的函數(shù)。這意味著可以通過(guò) npm 下載插件并將其作為 ES6 模塊導(dǎo)入。

但是我們的系統(tǒng)有一些缺陷。

通過(guò)為插件提供對(duì) BetaCalc 的 this 訪問(wèn)權(quán)限，插件可以對(duì)所有 BetaCalc 的代碼進(jìn)行讀/寫訪問(wèn)。雖然這對(duì)于獲取和設(shè)置 currentValue 很有用，但也很危險(xiǎn)。如果某個(gè)插件要重新定義內(nèi)部函數(shù)（如 setValue ），則它可能會(huì)對(duì) BetaCalc 和其他插件產(chǎn)生意外的影響。這違反了開(kāi)放閉合原則，該原則規(guī)定，軟件實(shí)體應(yīng)該對(duì)擴(kuò)展開(kāi)放，對(duì)修改關(guān)閉。

同樣的， squared 函數(shù)通過(guò)產(chǎn)生副作用發(fā)揮作用。這在 JavaScript 中并不少見(jiàn)，但感覺(jué)不是很好 —— 特別是當(dāng)其他插件可能在處理同一內(nèi)部狀態(tài)時(shí)。一種更實(shí)用的方法將大大有助于使我們的系統(tǒng)更安全、更可預(yù)測(cè)。

更好的插件架構(gòu)

讓我們來(lái)看一個(gè)更好的插件架構(gòu)。下一個(gè)示例更改了計(jì)算器及其插件 API ：

// The Calculatorconst 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 Pluginconst squaredPlugin = { name: ’squared’, exec: function(currentValue) { return currentValue * currentValue; }};betaCalc.register(squaredPlugin);// Using the calculatorbetaCalc.setValue(3); // => 3betaCalc.press(’plus’, 2); // => 5betaCalc.press(’squared’); // => 25betaCalc.press(’squared’); // => 625

我們?cè)谶@里做了一些值得注意的更改。

首先，我們將插件與“核心”計(jì)算器方法（如 plus 和 minus ）分開(kāi)，方法是將其放在自己的插件對(duì)象中。將插件存儲(chǔ)在一個(gè) plugin 對(duì)象中可以使我們的系統(tǒng)更安全?，F(xiàn)在，插件訪問(wèn)不到 BetaCalc 屬性-他們只能訪問(wèn)到 betaCalc.plugins 的屬性。

其次，我們實(shí)現(xiàn)了一個(gè) press 方法，該方法按名稱查找按鈕的功能，然后調(diào)用它。現(xiàn)在，當(dāng)我們調(diào)用插件的 exec 函數(shù)時(shí)，我們將當(dāng)前的計(jì)算器值（ currentValue ）傳遞給它，并且我們期望它返回新的計(jì)算器值。

本質(zhì)上，這種新 press 方法將我們所有的計(jì)算器按鈕轉(zhuǎn)換為純函數(shù)。他們獲取一個(gè)值，執(zhí)行一個(gè)操作，然后返回結(jié)果。這有很多好處：

簡(jiǎn)化了 API 。 使測(cè)試更加容易（對(duì)于 BetaCalc 和插件本身）。 減少了我們系統(tǒng)的依賴性，使其更松散地耦合在一起。

這個(gè)新的體系結(jié)構(gòu)比第一個(gè)示例有更多的限制，但方式是好的。我們?yōu)椴寮髡咴O(shè)置了防護(hù)欄，限制他們只做我們想讓他們做的改變。

實(shí)際上，它可能太嚴(yán)格了！現(xiàn)在，我們的計(jì)算器插件只能操作 currentValue 。如果插件作者想要添加高級(jí)功能，例如“內(nèi)存”按鈕或跟蹤歷史記錄的方法，則無(wú)法做到。

也許沒(méi)關(guān)系。你賦予插件作者的力量是微妙的平衡。給它們過(guò)多的權(quán)限可能會(huì)影響項(xiàng)目的穩(wěn)定性。但是，給他們很少的權(quán)限會(huì)使他們很難解決他們的問(wèn)題。

我們還能做什么？

我們還可以做很多工作來(lái)改善我們的系統(tǒng)。

如果插件作者忘記定義名稱或返回值，我們可以添加錯(cuò)誤處理以通知插件作者。像QA開(kāi)發(fā)人員一樣思考并想象我們的系統(tǒng)如何崩潰，以便我們能夠主動(dòng)處理這些情況。

我們可以擴(kuò)展插件的功能范圍?，F(xiàn)在，一個(gè) BetaCalc 插件可以添加一個(gè)按鈕。但是，如果它還可以注冊(cè)某些生命周期事件的回調(diào)（例如當(dāng)計(jì)算器將要顯示值時(shí)）怎么辦？或者，如果有一個(gè)專用的位置來(lái)存儲(chǔ)多個(gè)交互中的狀態(tài)，該怎么辦？

我們還可以擴(kuò)展插件注冊(cè)。如果可以使用一些初始設(shè)置注冊(cè)插件怎么辦？可以使插件更靈活嗎？如果插件作者希望注冊(cè)整個(gè)按鈕套件而不是一個(gè)按鈕套件（如 BetaCalc Statistics Pack ），該怎么辦？為了支持這一點(diǎn)需要進(jìn)行哪些更改？

你的插件系統(tǒng)

BetaCalc 及其插件系統(tǒng)都非常簡(jiǎn)單。如果你的項(xiàng)目較大，則需要探索其他一些插件體系結(jié)構(gòu)。

一個(gè)很好的起點(diǎn)是查看現(xiàn)有項(xiàng)目，以獲取成功的插件系統(tǒng)的示例。對(duì)于 JavaScript ，你可以查看 jQuery，Gatsby，D3，CKEditor 或其他。

你可能還想熟悉各種 JavaScript 設(shè)計(jì)模式。每種模式都提供了不同的接口和耦合程度，這為你提供了許多不錯(cuò)的插件體系結(jié)構(gòu)選項(xiàng)供你選擇。了解這些選項(xiàng)可以幫助你更好地平衡使用項(xiàng)目的每個(gè)人的需求。

除了模式本身之外，你還可以借鑒許多好的軟件開(kāi)發(fā)原則來(lái)做出此類決策。我已經(jīng)提到了一些方法（例如開(kāi)閉原理和松散耦合），但是其他一些相關(guān)的方法包括 Demeter 定律和依賴注入。

我知道這聽(tīng)起來(lái)很多，但是你必須進(jìn)行研究。沒(méi)有什么比讓每個(gè)人都重寫他們的插件更痛苦的了，因?yàn)槟阈枰牟寮軜?gòu)。這是一種失去信任并阻止人們?cè)趯?lái)做出貢獻(xiàn)的快速方法。

結(jié)論

從頭開(kāi)始編寫好的插件架構(gòu)很困難！你必須權(quán)衡許多考慮因素，以構(gòu)建滿足每個(gè)人需求的系統(tǒng)。夠簡(jiǎn)單嗎？足夠強(qiáng)大嗎？它可以長(zhǎng)期工作嗎？

值得付出努力。擁有一個(gè)好的插件系統(tǒng)可以幫助所有人。開(kāi)發(fā)人員可以自由解決問(wèn)題。最終用戶可以獲得大量的選擇功能。這樣你就可以在項(xiàng)目周圍發(fā)展生態(tài)系統(tǒng)和社區(qū)。這是一個(gè)雙贏的局面。

以上就是構(gòu)建一個(gè)JavaScript插件系統(tǒng)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 插件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！