1.8 MVC VS Flux

MVC簡介

MVC架構分為三個角色：

• View: 用户數據顯示，同時接受用戶輸入

• Contorller：響應用戶的輸入，對數據進行操作，

• Model：負責管理程序需要的數據，並且定義了操作數據的行為。

一個簡單的MVC架構，其工作流程如下：

MVC中的數據流是雙向的，Model通知View數據已更新，View直接查詢Model中的數據

MVC(View、Model、Controller是1:1:1的關係)只是一種理想狀態。現實中往往是 多View，多Model。更嚴重的是View與Model之間還可以是多對多的關係。也就是説，單個View的數據可以來自多個Model，單個Model更新是需要通知多個View，用戶在View上的操作可以對多個Model造成影響。可以想象最致命的後果是，View與Model之間相互更新的死循环。

Flux簡介

Flux 是一種單向資料流的設計模式，幫助你撰寫有條理的前端架構。

Flux架構分為三個角色：

• View/Component: 可以把Component理解為View與Controller的結合，既展現數據，同時也處理用戶的請求，不同於MVC的Comtroller直接調用Model層處理業務，Flux上用戶的操作或請求都會通過Action，交由Action進行下一步的處理

• Action: 描述Component觸發得操作，例如: { type: 'delete' , payload: item }

• Dispatcher: flux的中央樞紐，所有Action都會交由Dispatcher進行處理，Dispatcher在接收到Action後，調用Store註冊在Action上的函數。與MVC中的Controller不同的是，Dispatcher不包含處理邏輯

• Store: 存放數據與處理邏輯，並且提供gertter API讓人取得資料，和MVC的Model比較，MVC中的每一個Model及對應一個領域，而Flux中的一個store可能包含多個model，最重要的事，只有Store自己知道如合修改數據。

一個簡單的Flux架構，其工作流程如下：