設(shè)計一個JavaScript插件系統(tǒng)
本文譯自 https://css-tricks.com/designing-a-javascript-plugin-system/
插件是庫和框架的常見功能，并且有一個很好的使用它的理由：它們允許開發(fā)人員以安全，可擴展的方式添加功能。這就使核心項目更具價值，這種開放形勢可以幫助項目建立社區(qū)，并且不會為我們增加額外的維護負擔。
本文就使用 JavaScript 來構(gòu)建一個我們自己的插件系統(tǒng)。
這里我使用的是 “pluginn” 一詞，但這些東西有時也稱為其他名稱，例如“extensions”，“add-ons”或“modules”。無論你叫什么，它的含義（和收益）都是相同的。
讓我們構(gòu)建一個插件系統(tǒng)
讓我們從一個名為 BetaCalc 的示例項目開始。BetaCalc 的目標是成為一個簡約的 JavaScript 計算器，其他開發(fā)人員可以在其中添加“按鈕”。下面是一些基本的代碼，可以幫助我們?nèi)腴T：
//?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 打印結(jié)果。
現(xiàn)在功能真的很簡單。我們有一個 setValue 方法，它接受一個數(shù)字并將其顯示在“屏幕”上。我們還有 plus 和 minus 方法，它們將對當前顯示的值執(zhí)行操作。
是時候添加更多的功能了。讓我們從創(chuàng)建一個插件系統(tǒng)開始。
世界上最小的插件系統(tǒng)
我們將從創(chuàng)建一個 register 方法開始，其他開發(fā)人員可以使用它在 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);
在許多插件系統(tǒng)中，插件通常分為兩個部分：
要執(zhí)行的代碼 元數(shù)據(jù)（例如名稱，描述，版本號，依賴項等）
在我們的插件中，exec 函數(shù)包含我們的代碼，名稱是我們的元數(shù)據(jù)。當插件注冊時， exec 函數(shù)直接作為方法附加到 betaCalc 對象上，從而使其可以訪問 BetaCalc 的 this 。
現(xiàn)在， BetaCalc 有一個新的 squared 按鈕，可以直接調(diào)用：
betaCalc.setValue(3);?//?=>?3
betaCalc.plus(2);?????//?=>?5
betaCalc.squared();???//?=>?25
betaCalc.squared();???//?=>?625
這個系統(tǒng)有很多優(yōu)點。該插件是一種簡單的對象字面量，可以傳遞給我們的函數(shù)。這意味著可以通過 npm 下載插件并將其作為 ES6 模塊導(dǎo)入。
但是我們的系統(tǒng)有一些缺陷。
通過為插件提供對 BetaCalc 的 this 訪問權(quán)限，插件可以對所有 BetaCalc 的代碼進行讀/寫訪問。雖然這對于獲取和設(shè)置 currentValue 很有用，但也很危險。如果某個插件要重新定義內(nèi)部函數(shù)（如setValue），則它可能會對 BetaCalc 和其他插件產(chǎn)生意外的影響。這違反了開放閉合原則，該原則規(guī)定，軟件實體應(yīng)該對擴展開放，對修改關(guān)閉。
同樣的， squared 函數(shù)通過產(chǎn)生副作用發(fā)揮作用。這在 JavaScript 中并不少見，但感覺不是很好 —— 特別是當其他插件可能在處理同一內(nèi)部狀態(tài)時。一種更實用的方法將大大有助于使我們的系統(tǒng)更安全、更可預(yù)測。
更好的插件架構(gòu)
讓我們來看一個更好的插件架構(gòu)。下一個示例更改了計算器及其插件 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對象中可以使我們的系統(tǒng)更安全。現(xiàn)在，插件訪問不到 BetaCalc 屬性-他們只能訪問到 betaCalc.plugins 的屬性。
其次，我們實現(xiàn)了一個 press 方法，該方法按名稱查找按鈕的功能，然后調(diào)用它。現(xiàn)在，當我們調(diào)用插件的 exec 函數(shù)時，我們將當前的計算器值（currentValue）傳遞給它，并且我們期望它返回新的計算器值。
本質(zhì)上，這種新 press 方法將我們所有的計算器按鈕轉(zhuǎn)換為純函數(shù)。他們獲取一個值，執(zhí)行一個操作，然后返回結(jié)果。這有很多好處：
簡化了 API。使測試更加容易（對于 BetaCalc和插件本身）。減少了我們系統(tǒng)的依賴性，使其更松散地耦合在一起。
這個新的體系結(jié)構(gòu)比第一個示例有更多的限制，但方式是好的。我們?yōu)椴寮髡咴O(shè)置了防護欄，限制他們只做我們想讓他們做的改變。
實際上，它可能太嚴格了！現(xiàn)在，我們的計算器插件只能操作 currentValue 。如果插件作者想要添加高級功能，例如“內(nèi)存”按鈕或跟蹤歷史記錄的方法，則無法做到。
也許沒關(guān)系。你賦予插件作者的力量是微妙的平衡。給它們過多的權(quán)限可能會影響項目的穩(wěn)定性。但是，給他們很少的權(quán)限會使他們很難解決他們的問題。
我們還能做什么？
我們還可以做很多工作來改善我們的系統(tǒng)。
如果插件作者忘記定義名稱或返回值，我們可以添加錯誤處理以通知插件作者。像QA開發(fā)人員一樣思考并想象我們的系統(tǒng)如何崩潰，以便我們能夠主動處理這些情況。
我們可以擴展插件的功能范圍。現(xiàn)在，一個 BetaCalc 插件可以添加一個按鈕。但是，如果它還可以注冊某些生命周期事件的回調(diào)（例如當計算器將要顯示值時）怎么辦？或者，如果有一個專用的位置來存儲多個交互中的狀態(tài)，該怎么辦？
我們還可以擴展插件注冊。如果可以使用一些初始設(shè)置注冊插件怎么辦？可以使插件更靈活嗎？如果插件作者希望注冊整個按鈕套件而不是一個按鈕套件（如 BetaCalc Statistics Pack），該怎么辦？為了支持這一點需要進行哪些更改？
你的插件系統(tǒng)
BetaCalc 及其插件系統(tǒng)都非常簡單。如果你的項目較大，則需要探索其他一些插件體系結(jié)構(gòu)。
一個很好的起點是查看現(xiàn)有項目，以獲取成功的插件系統(tǒng)的示例。對于 JavaScript ，你可以查看 jQuery，Gatsby，D3，CKEditor 或其他。
你可能還想熟悉各種 JavaScript 設(shè)計模式。每種模式都提供了不同的接口和耦合程度，這為你提供了許多不錯的插件體系結(jié)構(gòu)選項供你選擇。了解這些選項可以幫助你更好地平衡使用項目的每個人的需求。
除了模式本身之外，你還可以借鑒許多好的軟件開發(fā)原則來做出此類決策。我已經(jīng)提到了一些方法（例如開閉原理和松散耦合），但是其他一些相關(guān)的方法包括 Demeter 定律和依賴注入。
我知道這聽起來很多，但是你必須進行研究。沒有什么比讓每個人都重寫他們的插件更痛苦的了，因為你需要更改插件架構(gòu)。這是一種失去信任并阻止人們在將來做出貢獻的快速方法。
結(jié)論
從頭開始編寫好的插件架構(gòu)很困難！你必須權(quán)衡許多考慮因素，以構(gòu)建滿足每個人需求的系統(tǒng)。夠簡單嗎？足夠強大嗎？它可以長期工作嗎？
值得付出努力。擁有一個好的插件系統(tǒng)可以幫助所有人。開發(fā)人員可以自由解決問題。最終用戶可以獲得大量的選擇功能。這樣你就可以在項目周圍發(fā)展生態(tài)系統(tǒng)和社區(qū)。這是一個雙贏的局面。
推薦閱讀