工具匆匆過，模式永流傳

雖然在我們的項目中使用新的框架/庫可能很酷，但我們經(jīng)常忽略了為什么使用它們，而是“為了使用它而使用它”。

在人們制作桌面/企業(yè)應(yīng)用程序的日子里，出現(xiàn)了許多設(shè)計模式/軟件架構(gòu)設(shè)計。它們由明智的工程師設(shè)計，以解決其應(yīng)用程序中信息流的復(fù)雜性。今天，當(dāng)我們忙于制作Web應(yīng)用程序時，這種復(fù)雜性并不會消失，只有這一次階段才會從桌面/企業(yè)私有服務(wù)器變?yōu)闉g覽器。因此，我們應(yīng)該能夠從這些看似不那么性感的架構(gòu)模式中學(xué)習(xí)，以管理我們的前端應(yīng)用程序。

由于有豐富的代碼示例和資源來學(xué)習(xí)前端社區(qū)中工具“使用方法”，因此本文不應(yīng)該是另一個。相反，我們的重點將放在“前端應(yīng)用程序的體系結(jié)構(gòu)”上，或更明確地說，“在應(yīng)用程序中管理大量不斷變化的部分的方法”，這在當(dāng)今豐富的UI交互中。如果這篇文章可以促進這一主題的思考和討論，那么它的目的就大大提高了。

在React,Angular 之前。。。

這是作者開始Web開發(fā)之旅的地方(甚至在學(xué)習(xí)vanilla javascript之前)。jQuery提供了一種選擇和操作DOM的便捷方法。假設(shè)我們正在構(gòu)建像Netflix這樣的網(wǎng)絡(luò)應(yīng)用。我們將向用戶顯示電影列表。我們以下列格式保存這些數(shù)據(jù)：

[{id：123，title：'Ironman'，savedForLater：true}，{id：456，title：'X-Men'，savedForLater：false}，{id：789，title：'Aquaman'，savedForLater：false} ，... ]

我們可以遍歷數(shù)組并使用“appendChild”到document 來記錄包含的相關(guān)信息。然后，對于每部電影，我們提供一個按鈕供用戶點擊，以便切換savedForLater布爾字段。我們可以綁定onClick事件并更新列表。要更新UI，我們可以刪除所有子節(jié)點并重新渲染它們，或者我們可以通過id選擇DOM子節(jié)點，創(chuàng)建容器div，使用新節(jié)點添加appendChild，刪除舊節(jié)點和容器。

接下來，我們要添加一個顯示savedForLater計數(shù)的功能，導(dǎo)航欄中出現(xiàn)的書簽圖標(biāo)按鈕上的數(shù)字徽章。(像購物車一樣！？)為了使這個計數(shù)保持最新，我們可以將它綁定到每個savedForLater按鈕的onClick事件 - 更新列表變量，更新卡片UI，更新計數(shù)顯示。

(可能有另一種不創(chuàng)建數(shù)組變量的方法。它是在每個影片DOM元素的數(shù)據(jù)屬性中保存每個影片的所有信息。為了得到計數(shù)，我們可以遍歷元素并總結(jié)值像data-savedForLater這樣的屬性)

但是，我們可以看到，當(dāng)有越來越多的功能/ UI交互時，我們必須自己處理越來越多的DOM操作，如有必要，我們要同時管理任何全局變量(movie array，isLoading，isLoggedIn，themeColor。。。)。

UI狀態(tài)交互的示意圖

這就是Angular，React，Vue等前端框架的用武之地。一旦我們更新了應(yīng)用程序的狀態(tài)(Model)，所有這些框架/庫都將為我們處理DOM操作(View)。更新模型，更改視圖，聽起來很熟悉？是的，讓我們說下架構(gòu)模式。

架構(gòu)模式

MVVM模式，雙向綁定

在構(gòu)造應(yīng)用程序時，我們都聽說過MVC(模型視圖控制器)模式。在SPA的上下文中，我們可以說Model = App State，V = Html模板。對于Angular和Vue.js，它們的模式更接近于MVC的變體 - MVVM(模型視圖 - 模型)。在這種情況下，每個DOM元素(或一組元素)僅對模型的某個部分感興趣(即僅是app狀態(tài)的一部分)。通過將每個元素綁定到模型的負(fù)責(zé)部分(View-Model層)，它可以直接監(jiān)聽(讀取)/更新(寫入)模型的一部分。這也稱為雙向綁定。

具有MVVM模式的Angular和Vue.js的代碼片段

使用這種模式，我們實現(xiàn)了關(guān)注點的分離 - 將業(yè)務(wù)邏輯(模型)與表示層(View)分離。此模式允許快速和直接操作數(shù)據(jù)模型，這是基于CRUD(創(chuàng)建 - 讀取 - 更新 - 刪除)的應(yīng)用程序的理想選擇。

CRUD應(yīng)用和基于任務(wù)的應(yīng)用

CRUD應(yīng)用程序例如是Todo List，Employee List等。為您顯示數(shù)據(jù)項的行，對于每個數(shù)據(jù)項，您可以單擊“編輯”以更新該項目的某些屬性，然后“保存”它。您還可以使用“添加”按鈕插入新行，使用“刪除”按鈕刪除某行。這就像擁有一個用于數(shù)據(jù)庫操作的圖形用戶界面。

我們也想構(gòu)建的另一種應(yīng)用是基于任務(wù)的應(yīng)用。示例應(yīng)用程序是酒店/航班預(yù)訂應(yīng)用程序，電子商務(wù)應(yīng)用程序或MacBook上的“系統(tǒng)偏好設(shè)置”應(yīng)用程序。您需要完成一系列步驟才能完成工作。就數(shù)據(jù)模型/應(yīng)用程序狀態(tài)而言，CRUD應(yīng)用程序和基于任務(wù)的應(yīng)用程序之間的根本區(qū)別在于后面的應(yīng)用程序的狀態(tài)將不僅僅具有“書籍列表”的數(shù)據(jù)，例如“currentStep”，“currentUser”， “isDarkMode”。

如果我們要使用雙向綁定模式，我們將為每個UI組件創(chuàng)建與模型相關(guān)部分的綁定。在這些綁定中的每一個中，讀取和寫入操作都是強耦合的。雖然這在CRUD應(yīng)用程序案例中可能是一個好主意，其中每個UI組件負(fù)責(zé)數(shù)據(jù)模型的某個部分的讀取和寫入操作，但在基于任務(wù)的應(yīng)用程序中，讀取并不常見only /只寫UI組件。雖然可以為這些組件中的每一個創(chuàng)建雙向綁定，但是用于改變數(shù)據(jù)模型的相同部分的多余“路徑”是狀態(tài)管理的混亂源自何處。

這里我們將要實現(xiàn)另一種設(shè)計模式CQRS(Command Query Responsibility Segregation)，或者在簡單的英文中，查詢(read)和命令(write)應(yīng)該分開完成。

這并不意味著像Angular和Vue.js這樣的框架變得毫無用處。Angular服務(wù)是應(yīng)用CQRS模式的一個很好的例子：你有私有變量存儲有問題的項目，公共getter(查詢)和setter(命令)作為單獨的方法.Angular的官方文檔中的“ 管理數(shù)據(jù) ”部分有一個很好的說明。是否有利用CQRS的架構(gòu)模式？當(dāng)然有。

事件總線，單向綁定

當(dāng)事件發(fā)生時，組件可以向事件總線發(fā)送消息(例如，用戶單擊按鈕)。組件還可以訂閱事件總線以獲取他們關(guān)注的事件。事件總線會在收到消息時將消息發(fā)送給訂閱者。這種類似中間人的模式也稱為單向綁定，因為該組件不是直接讀寫綁定到模型的。相反，組件訂閱要讀取的模型的一部分; 并將事件發(fā)送到“狀態(tài)處理程序”來編寫而不是自己編寫。React是一個實現(xiàn)單向綁定的庫。換句話說，我們需要自己連接讀寫周期。

實現(xiàn)單向綁定的React組件的示例

在上面的示例中，我們可以說按鈕是發(fā)送消息到事件總線的發(fā)布者，而h1是一個訂閱者，用于監(jiān)聽數(shù)據(jù)模型/應(yīng)用程序狀態(tài)的計數(shù)部分的更改。

這種分離讀寫問題的方法在這個簡單的基于任務(wù)的應(yīng)用程序的可維護性方面似乎非常令人滿意(好吧，所以你的任務(wù)是將顯示數(shù)量抽到100 ......無論如何)，僅使用這種方法來處理大規(guī)模的e-商務(wù)應(yīng)用可能會成為一場噩夢。你可以想象在著陸頁上有許多“狀態(tài)處理函數(shù)”改變了同一個狀態(tài)(例如，單擊按鈕A將切換狀態(tài)值.A，在輸入B中鍵入文本將同時更新狀態(tài)值.B和state.A，從api獲取數(shù)據(jù)將在完成時更新state.B和state.C的值，依此類推)。我們需要一種方法來管理一個數(shù)據(jù)模型的變異方式和時間。

Flux 模式 Redux

Flux模式通過提供狀態(tài)突變的明確性來解決這個問題。我們來看一下通量模式下的典型數(shù)據(jù)流。

Flux模式中的數(shù)據(jù)流示例

狀態(tài)改變的明確性通過以下方式實現(xiàn)：

• state只能通過調(diào)度程序進行改變，而不是任意的“狀態(tài)處理程序”
• 要使調(diào)度程序改變狀態(tài)，唯一的方法是發(fā)出一個動作
• 如此確切地說，對于一個視圖來改變一個狀態(tài)，唯一的方法是發(fā)出一個動作(或者說Redux-ly，發(fā)出一個動作)

因此，通過監(jiān)視操作及其包含的信息，整個應(yīng)用程序的數(shù)據(jù)變異在我們的控制之下(何時以及如何更改)。

總結(jié)

我們經(jīng)歷了從古老的jQuery到今天強大的Web開發(fā)工具之旅，如Angular，React，Vue。我們將Web應(yīng)用程序剖析為View層和Model層，并探索管理它們之間信息流的方法。雙向綁定采用MVVM模式，其中View通過ViewModel與模型緊密綁定，從而允許每個View直接讀取和更新模型的相應(yīng)部分。單向綁定借用了CQRS的設(shè)計原則，將寫操作與讀操作分開，我們自己有意識地實現(xiàn)了2個操作。Flux模式進一步推動了這一概念，將數(shù)據(jù)模型的變異限制為僅通過調(diào)度操作，從而通過密切監(jiān)視這些操作來控制整個app狀態(tài)。

因此，下次我們可以停一下，并在編碼之前考慮下構(gòu)建應(yīng)用程序的方法。

總結(jié)

以上是生活随笔為你收集整理的javascript设计模式_Javascript 前端设计模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。