下一代按鈕：透過 Web 元件實現命令模式

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

按鈕比看起來更重要

通常，當我們想到按鈕時，我們將其視為一個圖形控制元素，它提供了一種簡單的方法來觸發某些事件、操作或介面狀態的變化。這是一個非常簡單且方便的定義，符合我們對 Web 應用程式中使用者介面元素的日常理解。

然而，當我們在網頁開發中遇到按鈕時，當涉及到HTML和JavaScript時，首先想到的就是標準標籤，這是在網頁上創建按鈕最常用的工具。此標籤通常如下所示：

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

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

仔細檢查按鈕的定義後，人們可能會注意到它沒有提供任何有關按鈕的外觀、行為或觸發操作的資訊。在這種情況下，對於觸發操作的「簡單方法」一詞的含義，以及按鈕和操作之間的連接是如何建立的，都沒有清晰的理解。我們只看到按鈕的基本結構，點擊按鈕時會呼叫一些方法。但實際上，這種簡單性隱藏了更廣泛的可能性和方法。因此，問題出現了：也許按鈕不僅僅是我們在上面的範例中看到的標籤？

觸發操作的簡單方法

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

當使用者點擊按鈕時，他們期望這次點擊會導致特定的操作。因此，按鈕負責啟動此操作。換句話說，按鈕成為使用者和應執行的操作之間的連結。然而，需要注意的是，實際執行該操作的方法或函數不應該知道該按鈕是觸發該操作的按鈕。啟動動作和執行動作之間的區別是一個至關重要的方面，它使我們能夠在更複雜的系統中保持靈活性和輕鬆的互動。

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

事件和處理程序的分離

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

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

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

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

第四，事件和處理程序的分離對於可測試性至關重要，特別是在大型專案中。當事件處理程序被提取到單獨的函數中時，測試它們變得更加容易，因為它們可以獨立於介面進行測試。您可以隔離處理程序並測試它如何使用各種參數，而無需擔心與介面其他部分的互動。這使得測試變得更加容易，提高了應用程式的可靠性和穩定性，同時最大限度地減少了錯誤的可能性。

分離按鈕事件和處理程序是邁向更乾淨、更靈活和可維護的程式碼架構的關鍵一步。這在複雜的專案中尤其重要，因為介面元素之間的互動變得更加複雜和相互依賴。這種方法有助於提高系統穩定性，更容易擴展和修改應用程序，並降低這些變更期間出現錯誤的風險。

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

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

如果按鈕不僅可以傳達互動的上下文，還可以在事件中明確傳達使用者的意圖，那麼它將顯著簡化架構。處理程序可以專注於執行任務，而不是為事件分配邏輯。

這突顯出需要擺脫將按鈕僅視為事件發起者的傳統理解。相反，它建議採用更高級的模型，其中按鈕充當用戶意圖和應用程式邏輯之間的橋樑。

使用命令模式

為了創建更高級的事件處理模型，我們可以利用命令模式，它允許事件在更高的抽象層級與應用程式邏輯連結。這可以透過引入一個層來實現，該層將普通事件轉換為 saveDocument 或 deleteItem 等命令。使用這種方法，事件不僅僅是發生了某事的信號，它還轉變為它本來應有的樣子：動作的發起者，如本文前面所討論的。

但這提出了一個問題：為什麼 JavaScript 事件的開發者不從一開始就實作命令模式？為什麼活動設計成現在這樣？為什麼首先需要舉辦活動？

最初開發 HTML 以及 DOM 和 JavaScript 等相關技術時，他們的主要目標是為超文本文件創建一個簡單的結構，以允許使用者與網頁互動。當時，使用者互動受到極大限制，且事件處理模型的設計無法適應命令模式等複雜機制。重要的是要明白，早期網路的開發是為了簡化內容的建立和管理，而不是為複雜的客戶端邏輯提供複雜的工具。

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

命令模式需要更複雜的結構，其中涉及介面和處理邏輯之間的清晰分離，以及指定要執行的確切操作的機制。隨著 Web 應用程式中對動態介面和更強互動性的需求的增長，這些想法後來變得有意義。動態且複雜的交互，例如透過事件觸發客戶端邏輯，需要新的方法，包括採用命令模式。

現在命令模式可以應用在按鈕上嗎？是的，可以。雖然標準 HTML 按鈕不直接支援命令模式，但自訂事件等現代技術允許我們創建類似的機制。例如，我們已經探索如何使用詳細屬性透過事件傳遞附加資料。

但是，這種方法仍然不理想，因為它需要為介面中的每個按鈕建立單獨的實作。這增加了額外的複雜性，並使擴展此類系統更具挑戰性。

網路元件

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

您可以建立一個統一的元件來充當按鈕，並具有傳遞命令的附加功能，而不是為每個按鈕編寫單獨的處理程序。這種做法不僅改善了程式碼的結構，還增強了程式碼的可讀性和可維護性。

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

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

按鈕組件和控制器

當按鈕元件傳輸命令標識符和潛在的附加參數時，它為更高級的架構奠定了基礎。在此設定中，包含按鈕並訂閱其事件的元件本質上充當控制器，處理透過事件傳遞的命令。

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

在組件中使用控制器具有幾個關鍵優勢。首先，它封裝了執行命令的邏輯，使主要應用程式程式碼免於不必要的複雜性。實現的細節仍然隱藏在控制器本身內。其次，這種方法增強了模組化性，只需傳遞不同的命令和參數即可重複使用按鈕。它還減少了應用程式內的耦合，因為命令處理邏輯的變更僅需要在控制器內進行修改，而不會影響系統的其他部分。最後，控制器提供了顯著的靈活性。它們可以處理簡單的命令（例如“儲存”或“刪除”）和更複雜的操作，而按鈕組件保持簡單並僅專注於其主要作用。

這種架構有助於清晰地分離關注點。按鈕元件發出自訂事件，其中包括命令及其相關數據，而充當控制器的父元件則偵聽此事件。控制器處理命令，必要時與資料模型交互，並相應地更新使用者介面。這種方法會產生更清晰、更具可擴展性的架構，更容易擴展和維護，同時保持按鈕元件的可重複使用性並獨立於它們觸發的邏輯。

結論

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

然而，這種方法在實務上仍然相對不常見。許多開發人員繼續依賴直接與事件處理程序關聯的標準按鈕，而不是利用 Web 元件的強大功能來創建通用且靈活的解決方案。這可能是由於習慣和缺乏對這種方法優點的認識，導致更傳統地使用按鈕作為操作的簡單觸發器。

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

KoiCom 文件
KoiCom github

最終，我希望此類解決方案能夠幫助開發人員採用更現代的介面設計方法，使應用程式更具可擴展性且更易於維護。

以上是下一代按鈕：透過 Web 元件實現命令模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！