如何設(shè)計(jì)一個(gè)JavaScript插件系統(tǒng)

這篇文章給大家介紹如何設(shè)計(jì)一個(gè)JavaScript插件系統(tǒng)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

WordPress有插件、 jQuery有插件、Gatsby、Eleventy和Vue、React也是如此。

插件是庫(kù)和框架的常見(jiàn)功能，并且有一個(gè)很好的理由：它們?cè)试S開(kāi)發(fā)人員以安全、可擴(kuò)展的方式添加功能。這使核心項(xiàng)目更具價(jià)值，并建立了一個(gè)社區(qū)——所有這些都不會(huì)增加額外的維護(hù)負(fù)擔(dān)。太好了!

那么如何去構(gòu)建一個(gè)插件系統(tǒng)呢?讓我們用JavaScript構(gòu)建一個(gè)我們自己的插件來(lái)回答這個(gè)問(wèn)題。

讓我們構(gòu)建一個(gè)插件系統(tǒng)讓我們從一個(gè)名為BetaCalc的示例項(xiàng)目開(kāi)始。BetaCalc的目標(biāo)是成為一個(gè)簡(jiǎn)約的JavaScript計(jì)算器，其他開(kāi)發(fā)人員可以在其中添加“按鈕”。以下是一些基本的入門代碼：

// 計(jì)算器 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);   } };  // 使用計(jì)算器 betaCalc.setValue(3); // => 3 betaCalc.plus(3);     // => 6 betaCalc.minus(2);    // => 4

我們將計(jì)算器定義為一種客觀事物，以使事情變得簡(jiǎn)單，計(jì)算器通過(guò) console.log 打印結(jié)果來(lái)工作。

目前功能確實(shí)很有限。我們有一個(gè) setValue  方法，該方法接受一個(gè)數(shù)字并將其顯示在“屏幕”上。我們還有加法(plus)和減法(minus)方法，它們將對(duì)當(dāng)前顯示的值執(zhí)行一個(gè)運(yùn)算。

現(xiàn)在該添加更多功能了，首先創(chuàng)建一個(gè)插件系統(tǒng)。

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

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

// 計(jì)算器 const betaCalc = {   // ...其他計(jì)算器代碼在這里    register(plugin) {     const { name, exec } = plugin;     this[name] = exec;   } };

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

// 定義插件 const squaredPlugin = {   name: 'squared',   exec: function() {     this.setValue(this.currentValue * this.currentValue)   } };  // 注冊(cè)插件 betaCalc.register(squaredPlugin);

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

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 要執(zhí)行的代碼

3. 元數(shù)據(jù)(例如名稱、描述、版本號(hào)、依賴項(xiàng)等)

在我們的插件中，exec 函數(shù)包含我們的代碼，name 是我們的元數(shù)據(jù)。注冊(cè)插件后，exec 函數(shù)將作為一種方法直接附加到我們的 betaCalc  對(duì)象，從而可以訪問(wèn)BetaCalc的 this。

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

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

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

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

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

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

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

讓我們?cè)賮?lái)看看一個(gè)更好的插件架構(gòu)。下面的例子同時(shí)改變了計(jì)算器和它的插件API：

// 計(jì)算器 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);  // 使用計(jì)算器 betaCalc.setValue(3);      // => 3 betaCalc.press('plus', 2); // => 5 betaCalc.press('squared'); // => 25 betaCalc.press('squared'); // => 625

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

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

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

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

• 它簡(jiǎn)化了API。

• 它使測(cè)試更加容易(對(duì)于BetaCalc和插件本身)。

• 它減少了我們系統(tǒng)的依賴性，使其更松散地耦合在一起。

這種新架構(gòu)比第一個(gè)示例受到更多限制，但效果很好。我們基本上為插件作者設(shè)置了護(hù)欄，限制他們只能做我們希望他們做的改動(dòng)。

實(shí)際上，它可能太嚴(yán)格了!現(xiàn)在，我們的計(jì)算器插件只能對(duì) currentValue  進(jìn)行操作。如果插件作者想要添加高級(jí)功能(例如“記憶”按鈕或跟蹤歷史記錄的方式)，那么他們將無(wú)能為力。

也許這就是好的。你給插件作者的能力是一種微妙的平衡。給他們太多的權(quán)力可能會(huì)影響你項(xiàng)目的穩(wěn)定性。但給它們的權(quán)力太小，它們就很難解決自己的問(wèn)題——在這種情況下，你還不如不要插件。

我們還能做什么?

我們還有很多工作可以改善我們的系統(tǒng)。

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

我們可以擴(kuò)展插件的功能范圍。當(dāng)前，一個(gè)BetaCalc插件可以添加一個(gè)按鈕。但是，如果它還可以注冊(cè)某些生命周期事件的回調(diào)(例如當(dāng)計(jì)算器將要顯示值時(shí))怎么辦?或者說(shuō)，如果有一個(gè)專門的地方讓它在多個(gè)交互中存儲(chǔ)一段狀態(tài)呢?這會(huì)不會(huì)開(kāi)辟一些新的用例?

我們還可以擴(kuò)展插件注冊(cè)的功能。如果一個(gè)插件可以通過(guò)一些初始設(shè)置來(lái)注冊(cè)呢?這是否能使插件更加靈活?如果一個(gè)插件作者想注冊(cè)一整套按鈕，而不是一個(gè)單一的按鈕——比如“BetaCalc統(tǒng)計(jì)包”?需要做哪些改動(dòng)來(lái)支持呢?

你的插件系統(tǒng)

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

一個(gè)很好的起點(diǎn)是查看現(xiàn)有項(xiàng)目，以獲取成功的插件系統(tǒng)的示例。對(duì)于JavaScript，這可能意味著jQuery，Gatsby，D3，CKEditor或其他。你可能還想熟悉各種JavaScript設(shè)計(jì)模式，每種模式都提供了不同的接口和耦合程度，這給你提供了很多好的插件架構(gòu)選擇。了解這些選項(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)。這是一種快速失去信任的方式，讓人們失去對(duì)未來(lái)貢獻(xiàn)的信心。

從頭開(kāi)始編寫好的插件架構(gòu)是困難的!你必須平衡很多考慮因素，才能建立一個(gè)滿足大家需求的系統(tǒng)。它是否足夠簡(jiǎn)單?功能夠強(qiáng)大嗎?它是否能長(zhǎng)期工作?

不過(guò)這也是值得的，有一個(gè)好的插件系統(tǒng)對(duì)大家都有幫助，開(kāi)發(fā)者可以自由地解決他們的問(wèn)題。最終用戶可以從中選擇大量可選擇的特性。你可以圍繞你的項(xiàng)目建立一個(gè)生態(tài)系統(tǒng)和社區(qū)。這是一個(gè)三贏的局面。

關(guān)于如何設(shè)計(jì)一個(gè)JavaScript插件系統(tǒng)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。