Flux 是目前最被普遍認可的前端架構,受到 React Angular Vue 的一致推薦,是不可避免的趨勢:
- iOS、Andriod、Web多端原生系統,技術棧迥異,造成前端技術成為發展的共識
- 前端系統復雜度不斷提升,MVC 架構先天不足
- IE 逐漸退出主流,新一代瀏覽器占領市場
什么是 Flux
Flux 是 Facebook 系統化的一套響應式編程架構方案:
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
這里有一個帶視頻的詳細介紹:
https://facebook.github.io/flux/docs/in-depth-overview.html
Vue 的 Flux 實現
Vue 的 Flux 實現有一本電子書做了細致的介紹:《Vuex Concepts: The Flux Application Architecture for Vue.js》
下載地址:http://bookdl.me/vuex-concepts-the-flux-application-architecture-for-vue-js/
在閱讀這本書以后,再借助 Vue 的官方文檔就可以很快的推進起來 Flux 架構,需要多種 Vue 技術的配合:
- Vuex 作為數據狀態管理的中心,負責數據存儲和調度
- Vue 本身實現響應式編程機制,對 Vuex 中的數據進行響應
- vue-router 實現路由的調度,以及 Url 和 component 的結構設計
- History API 配合 Vuex 對 Url 進行微調
History API
// history API 可以實現 Url 的變化但是不刷新頁面
history.replaceState(stateName, 'title', 'urlPartial')
(隨著項目的深入,以后會補充細節性的內容)