前端框架管理

這次帶給大家前端框架管理，前端框架管理的注意事項有哪些，下面就是實戰案例，一起來看一下。

當今前端最火的三個框架要數Angular2+、Vue、React。它們全部都用到了組件化、模組化的思想，讓前端開發變得更規範。

但缺點也是明顯的。除了文件不齊全、缺乏案例、學習成本高以外，組件之間的狀態管理也是一個大問題。組件化是好事，但是如果沒有處理好元件之間的資料流動，就會造成專案混亂、維護困難的負面影響。

先來說說為什麼要進行狀態管理：

比如說兩張清單都引用了同一個資料來源，使用者在其中一張清單上做修改，另外一張清單上的數據也要跟著變。用angular1的時候要解決很簡單，使用$rootScope即可。但到了三大框架，沒有$rootScope這個概念，想要實現資料的同步更新，怎麼辦？

有人可能會說，這簡單，使用者在第一張表做修改的時候我們發一個訊息給第二張表，讓它把對應的資料改了不就完事了。但如果有10張表，20張表呢？都去一張張通知嗎？要是其他元件也有用到這個資料來源，也都去通知更新嗎？

所以這個方案在專案簡單的時候或許可行，但是專案一複雜，問題立刻就會暴露出來。為了以防未來專案推翻重來，我們還是應該一開始就考慮好。

狀態管理這個概念，就是為了因應複雜的資料流。

三大框架實作狀態管理的方法分別為：

Vue：Vuex

React：Redux（dva.js）

Angular2+：Redux（ ngrx）

雖然三大框架實現狀態管理的方案不同，但是底層的想法都是一致的。這裡大致的來講一下：

專案為了實現狀態管理，新增了幾個模組：reducers、effects、services、models。如果是angular2+的話還有actions。

先來說說這幾個模組的作用：

models：資料模型。存放了資料本身和修改資料的方法。在angular2+中models存放的是實體（entity）。學過後端的應該會很熟悉。是對數據的一種聲明。

reducers：負責進行同步的操作。例如把請求來的表單資料存到資料模型中，使用者新增/刪除了某條數據，對原有資料進行修改。

services：對請求資料這一動作的封裝，一般包含取得資料的方法。如getList()，getUsers()。

effects：負責進行非同步操作。例如接到使用者的請求動作後，呼叫service，向伺服器請求數據，成功了就呼叫reducers保存數據，如果失敗了就執行另一個動作。

angular2+中還抽像出了一層actions，是對各種動作的封裝。例如載入數據，數據載入成功，用戶刪除數據等。包含了資料的type以及payload（修改資料用到的資料）

一個使用者操作，例如搜尋對應商品，當使用者按下確認鍵的時候，整個流程可以概括為：

使用者發出指令-> dispatch呼叫redurcers修改狀態，對應元件進入loading狀態-> effects呼叫services取得資料-> 取得資料成功，呼叫redurces儲存資料並結束loading -> 渲染到視圖。

當呼叫reducers更新資料的時候，所有跟model綁定的視圖都會同步更新，每個處理邏輯也變得相當清晰明了。雖然在專案複雜度上會增加，但是維護起來肯定是要方便很多的。

如果覺得難以理解，可以先從這兩個案例著手：

vuex 計數器+清單展示：http://www.cnblogs.com/axel10/p/8536688.html

dva.js 計數器+清單展示：http://www.cnblogs.com/axel10/p/8503782.html

其中最適合入門的是Vue，然後是React（使用dva.js），最難的是angular2+。 angular2+涉及Rxjs和TypeScript，知識點較多。無論難或不難，永遠記得由淺入深，不要幻想一步登天。如果你連angular1都用不熟，那就請你先用好angular1，好好理解mvc思想，再去涉足三大框架，不然很有可能事倍功半，浪費大量時間。

身為前端工程師，如果有條件還是建議學習一門後端語言，例如java，c#，這對理解前端框架有很大的幫助。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

React中有哪些類別定義元件

#Vue.js的表單輸入綁定

以上是前端框架管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！