當(dāng)我開始設(shè)計(jì)界面時，我總是遇到這樣的問題：事件處理程序直接附加到按鈕上，這限制了組件交互的靈活性。問題是標(biāo)準(zhǔn)按鈕無法提供任何其他行為。我需要的是邏輯隔離和動態(tài)操作管理，這在使用“開箱即用”的標(biāo)準(zhǔn)按鈕時不可用。在本文中，我將提出一個關(guān)于如何使用 Web 組件和“命令”模式調(diào)整按鈕的解決方案，為更靈活和可擴(kuò)展的界面開辟新的可能性。

按鈕比看起來更重要

通常，當(dāng)我們想到按鈕時，我們將其視為一個圖形控制元素，它提供了一種簡單的方法來觸發(fā)某些事件、操作或界面狀態(tài)的變化。這是一個非常簡單和方便的定義，符合我們對 Web 應(yīng)用程序中用戶界面元素的日常理解。

然而，當(dāng)我們在網(wǎng)頁開發(fā)中遇到按鈕時，當(dāng)涉及到HTML和JavaScript時，首先想到的就是標(biāo)準(zhǔn)標(biāo)簽，這是在網(wǎng)頁上創(chuàng)建按鈕最常用的工具。該標(biāo)簽通常如下所示：

<button onclick="myFunction()">Click me</button>

但是如果我們考慮一下，這個標(biāo)簽雖然充當(dāng)按鈕，但并沒有完全反映按鈕在用戶與界面交互的更廣泛上下文中可以執(zhí)行的所有可能的方面和功能。

仔細(xì)檢查按鈕的定義后，人們可能會注意到它沒有提供任何有關(guān)按鈕的外觀、行為或觸發(fā)操作的信息。在這種情況下，對于觸發(fā)操作的“簡單方法”一詞的含義，以及按鈕和操作之間的連接是如何建立的，都沒有清晰的理解。我們只看到按鈕的基本結(jié)構(gòu)，單擊該按鈕時會調(diào)用一些方法。但實(shí)際上，這種簡單性隱藏了更廣泛的可能性和方法。因此，問題出現(xiàn)了：也許按鈕不僅僅是我們在上面的示例中看到的標(biāo)簽？

觸發(fā)操作的簡單方法

讓我們從更哲學(xué)的角度來理解按鈕的概念，深入研究它的本質(zhì)和功能。按鈕真正代表什么？如果我們把壺的本質(zhì)看成是空的，那么按鈕的本質(zhì)就在于它能夠啟動一個動作。按鈕不僅僅是一個用戶界面元素；它也是一個用戶界面元素。它是一種觸發(fā)應(yīng)用程序上下文中已存在的特定進(jìn)程的機(jī)制。要執(zhí)行的操作發(fā)生在應(yīng)用程序內(nèi)、整個系統(tǒng)的上下文中，但該操作的啟動（即開始）是按鈕的功能。因此，我們看到按鈕充當(dāng)一種觸發(fā)器，在更廣泛的外部系統(tǒng)上下文中啟動操作。

當(dāng)用戶點(diǎn)擊按鈕時，他們期望這次點(diǎn)擊會導(dǎo)致特定的操作。因此，按鈕負(fù)責(zé)啟動此操作。換句話說，按鈕成為用戶和應(yīng)執(zhí)行的操作之間的鏈接。然而，需要注意的是，實(shí)際執(zhí)行該操作的方法或函數(shù)不應(yīng)該知道該按鈕是觸發(fā)該操作的按鈕。啟動動作和執(zhí)行動作之間的區(qū)別是一個至關(guān)重要的方面，它使我們能夠在更復(fù)雜的系統(tǒng)中保持靈活性和輕松的交互。

當(dāng)按鈕直接執(zhí)行操作或當(dāng)實(shí)現(xiàn)操作的方法依賴于按鈕本身時，我們正在處理一個相當(dāng)復(fù)雜且相互依賴的系統(tǒng)。如果我們希望簡化這樣的系統(tǒng)，就必須將其分解為更簡單、獨(dú)立的部分。在這里我們得出的結(jié)論是，簡化啟動操作的過程主要涉及將啟動過程與操作本身分開。由于在 JavaScript 上下文中，發(fā)起者通常被稱為事件，因此我們專門討論將作為發(fā)起者的事件與執(zhí)行操作的邏輯分開。

事件和處理程序的分離

為什么將事件與處理程序分開很重要？

首先，將事件與處理程序分離可以顯著提高代碼的可讀性，并促進(jìn)創(chuàng)建更多模塊化解決方案。當(dāng)按鈕邏輯及其處理程序交織在一起時，或者更糟糕的是，當(dāng)處理程序是匿名函數(shù)時，代碼將變得極難閱讀和分析。這可能會導(dǎo)致維護(hù)和更新項(xiàng)目時出現(xiàn)問題，因?yàn)榱私獍粹o的實(shí)際用途以及需要進(jìn)行哪些更改成為一項(xiàng)具有挑戰(zhàn)性的任務(wù)。相反，當(dāng)處理程序被提取到一個單獨(dú)的、命名良好的函數(shù)中以清楚地反映正在執(zhí)行的操作時，代碼的結(jié)構(gòu)變得更加透明。開發(fā)人員立即了解單擊按鈕時會發(fā)生什么，并且可以更輕松地修改元素的行為，而無需深入研究其余邏輯。因此，分離簡化了代碼的閱讀和更改。

其次，分離事件邏輯和處理程序?yàn)樵趹?yīng)用程序的不同部分重用處理程序提供了機(jī)會。當(dāng)處理程序放置在其自己的函數(shù)中時，它不僅可以應(yīng)用于一個按鈕，還可以應(yīng)用于許多具有類似行為的其他按鈕。例如，執(zhí)行相同操作的多個按鈕可以使用相同的處理程序，從而減少代碼重復(fù)并提高效率。此外，處理程序不僅可以通過按鈕觸發(fā)，還可以通過其他方式觸發(fā)，例如編程調(diào)用或界面其他部分發(fā)起的操作。這顯著擴(kuò)展了應(yīng)用程序的功能，提高了其靈活性和可擴(kuò)展性。

第三，將事件和處理程序分開可以使按鈕本身具有更大的靈活性。如果按鈕的行為現(xiàn)在不是在按鈕本身內(nèi)確定，而是通過單獨(dú)的處理程序確定，則可以輕松修改其操作或根據(jù)情況重新分配它們。這在具有動態(tài)界面的項(xiàng)目中尤其重要，其中元素的行為可以響應(yīng)用戶操作或應(yīng)用程序狀態(tài)的變化而變化。這種方法允許界面輕松適應(yīng)不斷變化的需求，而不會破壞整體代碼結(jié)構(gòu)。

第四，事件和處理程序的分離對于可測試性至關(guān)重要，特別是在大型項(xiàng)目中。當(dāng)事件處理程序被提取到單獨(dú)的函數(shù)中時，測試它們變得更加容易，因?yàn)樗鼈兛梢元?dú)立于接口進(jìn)行測試。您可以隔離處理程序并測試它如何使用各種參數(shù)，而無需擔(dān)心與界面其他部分的交互。這使得測試變得更加容易，提高了應(yīng)用程序的可靠性和穩(wěn)定性，同時最大限度地減少了錯誤的可能性。

分離按鈕事件和處理程序是邁向更干凈、更靈活和可維護(hù)的代碼架構(gòu)的關(guān)鍵一步。這在復(fù)雜的項(xiàng)目中尤其重要，因?yàn)榻缑嬖刂g的交互變得更加復(fù)雜和相互依賴。這種方法有助于提高系統(tǒng)穩(wěn)定性，更容易擴(kuò)展和修改應(yīng)用程序，并降低這些更改期間出現(xiàn)錯誤的風(fēng)險(xiǎn)。

將按鈕事件與其處理程序分離的示例可以在任何初學(xué)者指南中找到。

<button onclick="myFunction()">Click me</button>

如果按鈕不僅可以傳達(dá)交互的上下文，還可以在事件中明確傳達(dá)用戶的意圖，那么它將顯著簡化架構(gòu)。處理程序可以專注于執(zhí)行任務(wù)，而不是為事件分配邏輯。

這突出表明需要擺脫將按鈕僅視為事件發(fā)起者的傳統(tǒng)理解。相反，它建議采用更高級的模型，其中按鈕充當(dāng)用戶意圖和應(yīng)用程序邏輯之間的橋梁。

使用命令模式

為了創(chuàng)建更高級的事件處理模型，我們可以利用命令模式，它允許事件在更高的抽象級別與應(yīng)用程序邏輯鏈接。這可以通過引入一個層來實(shí)現(xiàn)，該層將普通事件轉(zhuǎn)換為 saveDocument 或 deleteItem 等命令。使用這種方法，事件不僅僅是發(fā)生了某事的信號，它還轉(zhuǎn)變?yōu)樗緛響?yīng)有的樣子：動作的發(fā)起者，如本文前面所討論的。

但這提出了一個問題：為什么 JavaScript 事件的開發(fā)者不從一開始就實(shí)現(xiàn)命令模式？為什么活動設(shè)計(jì)成現(xiàn)在這樣？為什么首先需要舉辦活動？

最初開發(fā) HTML 以及 DOM 和 JavaScript 等相關(guān)技術(shù)時，他們的主要目標(biāo)是為超文本文檔創(chuàng)建一個簡單的結(jié)構(gòu)，以允許用戶與網(wǎng)頁交互。當(dāng)時，用戶交互受到極大限制，并且事件處理模型的設(shè)計(jì)無法適應(yīng)命令模式等復(fù)雜機(jī)制。重要的是要明白，早期網(wǎng)絡(luò)的開發(fā)是為了簡化內(nèi)容的創(chuàng)建和管理，而不是為復(fù)雜的客戶端邏輯提供復(fù)雜的工具。

在 20 世紀(jì) 90 年代，當(dāng) HTML 和 Web 被創(chuàng)建時，他們的重點(diǎn)是提供一種直接的方式來以最少的用戶交互來呈現(xiàn)超文本文檔。主要目標(biāo)是將數(shù)據(jù)提交到服務(wù)器，而不是在瀏覽器中執(zhí)行復(fù)雜的邏輯。按鈕和表單主要用于發(fā)送數(shù)據(jù)，而不是啟動客戶端進(jìn)程。所有的計(jì)算和數(shù)據(jù)處理都在服務(wù)器上進(jìn)行，按鈕作為界面元素，觸發(fā)數(shù)據(jù)提交到后端。

命令模式需要更復(fù)雜的結(jié)構(gòu)，其中涉及接口和處理邏輯之間的清晰分離，以及指定要執(zhí)行的確切操作的機(jī)制。隨著 Web 應(yīng)用程序中對動態(tài)界面和更強(qiáng)交互性的需求的增長，這些想法后來才變得有意義。動態(tài)且復(fù)雜的交互，例如通過事件觸發(fā)客戶端邏輯，需要新的方法，包括采用命令模式。

現(xiàn)在命令模式可以應(yīng)用到按鈕上嗎？是的，可以。雖然標(biāo)準(zhǔn) HTML 按鈕不直接支持命令模式，但自定義事件等現(xiàn)代技術(shù)允許我們創(chuàng)建類似的機(jī)制。例如，我們已經(jīng)探索了如何使用詳細(xì)屬性通過事件傳遞附加數(shù)據(jù)。

但是，這種方法仍然不理想，因?yàn)樗枰獮榻缑嬷械拿總€按鈕創(chuàng)建單獨(dú)的實(shí)現(xiàn)。這增加了額外的復(fù)雜性，并使擴(kuò)展此類系統(tǒng)更具挑戰(zhàn)性。

網(wǎng)絡(luò)組件

利用 Web 組件實(shí)現(xiàn)按鈕現(xiàn)代化并使它們與命令模式保持一致是一種很有前途的方法，可以顯著增強(qiáng)項(xiàng)目中交互的架構(gòu)和靈活性。 Web 組件提供了強(qiáng)大的工具來創(chuàng)建可重用的界面元素，這些元素可以無縫集成到應(yīng)用程序的各個部分。

您可以創(chuàng)建一個統(tǒng)一的組件來充當(dāng)按鈕，并具有傳遞命令的附加功能，而不是為每個按鈕編寫單獨(dú)的處理程序。這種做法不僅改善了代碼的結(jié)構(gòu)，還增強(qiáng)了代碼的可讀性和可維護(hù)性。

這是此類組件的基本示例：

<button onclick="myFunction()">Click me</button>

按鈕組件和控制器

當(dāng)按鈕組件傳輸命令標(biāo)識符和潛在的附加參數(shù)時，它為更高級的架構(gòu)奠定了基礎(chǔ)。在此設(shè)置中，包含按鈕并訂閱其事件的組件本質(zhì)上充當(dāng)控制器，處理通過事件傳遞的命令。

在 MVC（模型-視圖-控制器）等架構(gòu)模式中，控制器充當(dāng)表示數(shù)據(jù)的模型和構(gòu)成用戶界面的視圖之間的中介。它接收用戶輸入，例如按鈕單擊，并管理由此產(chǎn)生的數(shù)據(jù)或狀態(tài)更改，然后將其反映在界面中。

在組件中使用控制器具有幾個關(guān)鍵優(yōu)勢。首先，它封裝了執(zhí)行命令的邏輯，使主要應(yīng)用程序代碼免于不必要的復(fù)雜性。實(shí)現(xiàn)的細(xì)節(jié)仍然隱藏在控制器本身內(nèi)。其次，這種方法增強(qiáng)了模塊化性，只需傳遞不同的命令和參數(shù)即可重復(fù)使用按鈕。它還減少了應(yīng)用程序內(nèi)的耦合，因?yàn)槊钐幚磉壿嫷母膬H需要在控制器內(nèi)進(jìn)行修改，而不會影響系統(tǒng)的其他部分。最后，控制器提供了顯著的靈活性。它們可以處理簡單的命令（例如“保存”或“刪除”）和更復(fù)雜的操作，而按鈕組件保持簡單并僅專注于其主要作用。

這種架構(gòu)有助于清晰地分離關(guān)注點(diǎn)。按鈕組件發(fā)出一個自定義事件，其中包括命令及其相關(guān)數(shù)據(jù)，而充當(dāng)控制器的父組件則偵聽此事件。控制器處理命令，必要時與數(shù)據(jù)模型交互，并相應(yīng)地更新用戶界面。這種方法會產(chǎn)生更清晰、更具可擴(kuò)展性的架構(gòu)，更容易擴(kuò)展和維護(hù)，同時保持按鈕組件的可重用性并獨(dú)立于它們觸發(fā)的邏輯。

結(jié)論

總之，按鈕不僅觸發(fā)操作，而且通過事件傳輸帶有必要數(shù)據(jù)的命令的方法是應(yīng)用“命令”模式的一個很好的例子。該方法通過將命令執(zhí)行邏輯與界面元素分離，顯著改善了界面交互組織，增強(qiáng)了應(yīng)用程序的靈活性和可擴(kuò)展性。

然而，這種方法在實(shí)踐中仍然相對不常見。許多開發(fā)人員繼續(xù)依賴直接與事件處理程序關(guān)聯(lián)的標(biāo)準(zhǔn)按鈕，而不是利用 Web 組件的強(qiáng)大功能來創(chuàng)建通用且靈活的解決方案。這可能是由于習(xí)慣和缺乏對這種方法優(yōu)點(diǎn)的認(rèn)識，導(dǎo)致更傳統(tǒng)地使用按鈕作為操作的簡單觸發(fā)器。

決心改變這種情況，我開發(fā)了 KoiCom 庫，其中許多組件已經(jīng)被適配和增強(qiáng)。特別是，該庫中的按鈕遵循“命令”模式，通過事件傳輸必要的數(shù)據(jù)和命令。這種方法極大地提高了模塊化性、靈活性和可維護(hù)性，消除了冗余邏輯并簡化了命令的管理方式。

KoiCom 文檔
KoiCom github

最終，我希望此類解決方案能夠幫助開發(fā)人員采用更現(xiàn)代的界面設(shè)計(jì)方法，使應(yīng)用程序更具可擴(kuò)展性且更易于維護(hù)。

以上是下一代按鈕：通過 Web 組件實(shí)現(xiàn)命令模式的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！