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')
(随着项目的深入,以后会补充细节性的内容)