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

按鈕比看起來更重要

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

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

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

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

仔細(xì)檢查按鈕的定義後，人們可能會(huì)注意到它沒有提供任何有關(guān)按鈕的外觀、行為或觸發(fā)操作的資訊。在這種情況下，對(duì)於觸發(fā)操作的「簡(jiǎn)單方法」一詞的含義，以及按鈕和操作之間的連接是如何建立的，都沒有清晰的理解。我們只看到按鈕的基本結(jié)構(gòu)，點(diǎn)擊按鈕時(shí)會(huì)呼叫一些方法。但實(shí)際上，這種簡(jiǎn)單性隱藏了更廣泛的可能性和方法。因此，問題出現(xiàn)了：也許按鈕不僅僅是我們?cè)谏厦娴墓?fàn)例中看到的標(biāo)籤？

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

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

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

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

事件和處理程序的分離

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

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

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

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

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

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

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

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

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

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

使用命令模式

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

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

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

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

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

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

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

網(wǎng)路元件

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

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

這是此類組件的基本範(fàn)例：

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

按鈕組件和控制器

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

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

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

這種架構(gòu)有助於清晰地分離關(guān)注點(diǎn)。按鈕元件發(fā)出自訂事件，其中包括命令及其相關(guān)數(shù)據(jù)，而充當(dāng)控制器的父元件則偵聽此事件?？刂破魈幚砻?，必要時(shí)與資料模型交互，並相應(yīng)地更新使用者介面。這種方法會(huì)產(chǎn)生更清晰、更具可擴(kuò)展性的架構(gòu)，更容易擴(kuò)展和維護(hù)，同時(shí)保持按鈕元件的可重複使用性並獨(dú)立於它們觸發(fā)的邏輯。

結(jié)論

總之，按鈕不僅觸發(fā)操作，而且透過事件傳輸帶有必要資料的命令的方法是應(yīng)用「命令」模式的一個(gè)很好的例子。該方法透過將命令執(zhí)行邏輯與介面元素分離，顯著改善了介面互動(dòng)組織，增強(qiáng)了應(yīng)用程式的靈活性和可擴(kuò)展性。

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

決心改變這種情況，我開發(fā)了 KoiCom 庫(kù)，其中許多組件已經(jīng)被適配和增強(qiáng)。特別是，該庫(kù)中的按鈕遵循「命令」模式，透過事件傳輸必要的資料和命令。這種方法大大提高了模組化性、靈活性和可維護(hù)性，消除了冗餘邏輯並簡(jiǎn)化了命令的管理方式。

KoiCom 文件
KoiCom github

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

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