這次給大家?guī)?lái)前端框架管理，前端框架管理的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

當(dāng)今前端最火的三個(gè)框架要數(shù)Angular2+、Vue、React。它們?nèi)慷加玫搅私M件化、模塊化的思想，讓前端開(kāi)發(fā)變得更加規(guī)范。

但缺點(diǎn)也是明顯的。除了文檔不齊全、缺乏案例、學(xué)習(xí)成本高以外，組件之間的狀態(tài)管理也是一個(gè)大問(wèn)題。組件化是好事，但是如果沒(méi)有處理好組件之間的數(shù)據(jù)流動(dòng)，就會(huì)造成項(xiàng)目混亂、維護(hù)困難的負(fù)面影響。

先來(lái)說(shuō)說(shuō)為什么要進(jìn)行狀態(tài)管理：

比如說(shuō)兩張列表都引用了同一個(gè)數(shù)據(jù)源，用戶在其中一張列表上做修改，另外一張列表上的數(shù)據(jù)也要跟著變。用angular1的時(shí)候要解決很簡(jiǎn)單，使用$rootScope即可。但是到了三大框架，沒(méi)有$rootScope這個(gè)概念，想要實(shí)現(xiàn)數(shù)據(jù)的同步更新，怎么辦？

有人可能會(huì)說(shuō)，這簡(jiǎn)單，用戶在第一張表做修改的時(shí)候我們發(fā)一個(gè)消息給第二張表，讓它把相應(yīng)的數(shù)據(jù)改了不就完事了。但是如果有10張表，20張表呢？都去一張張通知嗎？要是其他組件也有用到這個(gè)數(shù)據(jù)源，也都去通知更新嗎？

所以這個(gè)方案在項(xiàng)目簡(jiǎn)單的時(shí)候或許可行，但是項(xiàng)目一復(fù)雜，問(wèn)題立馬就會(huì)暴露出來(lái)。為了以防未來(lái)項(xiàng)目推翻重來(lái)，我們還是應(yīng)該一開(kāi)始就考慮好。

狀態(tài)管理這個(gè)概念，就是為了應(yīng)對(duì)復(fù)雜的數(shù)據(jù)流動(dòng)。

三大框架實(shí)現(xiàn)狀態(tài)管理的方法分別為：

Vue：Vuex

React：Redux（dva.js）

Angular2+：Redux（ngrx）

雖然三大框架實(shí)現(xiàn)狀態(tài)管理的方案不同，但是底層的思想都是一致的。這里大致的來(lái)講一下：

項(xiàng)目為了實(shí)現(xiàn)狀態(tài)管理，新增了幾個(gè)模塊：reducers、effects、services、models。如果是angular2+的話還有actions。

先來(lái)說(shuō)說(shuō)這幾個(gè)模塊的作用：

models：數(shù)據(jù)模型。存放了數(shù)據(jù)本身和修改數(shù)據(jù)的方法。在angular2+中models存放的是實(shí)體（entity）。學(xué)過(guò)后端的應(yīng)該會(huì)很熟悉。是對(duì)數(shù)據(jù)的一種聲明。

reducers：負(fù)責(zé)進(jìn)行同步的操作。比如把請(qǐng)求來(lái)的表單數(shù)據(jù)存到數(shù)據(jù)模型中，用戶添加/刪除了某條數(shù)據(jù)，對(duì)原有數(shù)據(jù)進(jìn)行修改。

services：對(duì)請(qǐng)求數(shù)據(jù)這一動(dòng)作的封裝，一般包含獲取數(shù)據(jù)的方法。如getList()，getUsers()。

effects：負(fù)責(zé)進(jìn)行異步操作。比如接到用戶的請(qǐng)求動(dòng)作后，調(diào)用service，向服務(wù)器請(qǐng)求數(shù)據(jù)，成功了就調(diào)用reducers保存數(shù)據(jù)，如果失敗了就執(zhí)行另一個(gè)動(dòng)作。

angular2+中還抽象出了一層actions，是對(duì)各種動(dòng)作的封裝。比如加載數(shù)據(jù)，數(shù)據(jù)加載成功，用戶刪除數(shù)據(jù)等。包含了數(shù)據(jù)的type以及payload（修改數(shù)據(jù)用到的數(shù)據(jù)）

一個(gè)用戶操作，比如搜索相應(yīng)商品，當(dāng)用戶按下確認(rèn)鍵的時(shí)候，整個(gè)流程可以概括為：

用戶發(fā)出指令 -> dispatch調(diào)用redurcers修改狀態(tài)，相應(yīng)組件進(jìn)入loading狀態(tài) -> effects調(diào)用services獲取數(shù)據(jù) ->?獲取數(shù)據(jù)成功，調(diào)用redurces保存數(shù)據(jù)并結(jié)束loading ->?渲染到視圖。

當(dāng)調(diào)用reducers更新數(shù)據(jù)的時(shí)候，所有跟model綁定的視圖都會(huì)同步更新，每個(gè)處理邏輯也變得相當(dāng)清晰明了。雖然在項(xiàng)目復(fù)雜度上會(huì)有所增加，但是維護(hù)起來(lái)肯定是要方便很多的。

如果覺(jué)得難以理解，可以先從這兩個(gè)案例入手：

vuex?計(jì)數(shù)器+列表展示：http://www.cnblogs.com/axel10/p/8536688.html

dva.js 計(jì)數(shù)器+列表展示：http://www.cnblogs.com/axel10/p/8503782.html

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

作為前端工程師，如果有條件還是建議學(xué)習(xí)一門后端語(yǔ)言，比如java，c#，這對(duì)理解前端框架有很大的幫助。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

React中有哪些類定義組件

Vue.js的表單輸入綁定

以上就是前端框架管理的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！