[Web 前端] 如何建構React+Mobx+Superagent的完整架構

ReactJS并不像angular一樣是一個完整的前端架構，嚴格的說它隻是一個UI架構，負責UI頁面的展示，如果用通用的架構MVC來說，ReactJs隻負責View了，而Angular則是一個完整的前端架構，包含了MVC的全部。那麼問題來了，采用ReactJS時，M和C怎麼辦了，其實不僅是M和C的問題，包括UI控件的如何選擇，開發者都有很大的主動權，但是任何事情總在兩難的選擇中，全幫你做了，面面面具到，你會覺得受限制，這麼不好，那也不好，還不友善用别的，選擇多了也是問題，到底哪一款才是最好的。

推薦的是React+Mobx

在通路服務端時，你依然可以選擇你喜歡的元件來實作，jQuery等都可以選擇，但是Superagent是個不錯的選擇，簡單、精煉、并且通路操作RestFul服務非常友善。

整個架構依據ReactJs的單項資料流方式，如下圖：

圖中View自然就是ReactJs的頁面元件了。整個架構的結構也基本依據上圖建構。

分為View(Components)、Dispatcher、Actions、Store和Resource

View:頁面元件；

Dispatcher:管理注冊分發事件；

Actions：定義各類操作；

Store：關聯事件與操作，調用Resource，擷取資料，并觸發相關事件；

Resource：通路服務，獲得資料。