2737人阅读
ReactJS是fackbook推出的UI组件框架，最主要特点就是引入了虚拟DOM的机制，并且提供一个非常优秀的UI组件框架，实现可复用的Web前端组件成为可能。
但是ReactJS基本上就是帮助你来开发一个可复用的Web组件的框架，缺少数据双向绑定，依赖注入、绑定等一大堆特性。
而在前端开发时，往往需要提供一个完整的机制来进行DOM、数据的管理，由此，各类前端MVVM框架大为流行，像AngularJS就是一个非常流行的MVVM框架。
Flux就是facebook提供的一个类似MVVM的设计模式或架构，但是facebook只提供了Flux的设计思路和原理，ReactJS本身并没有实现Flux的完整的库，我们可以按照其设计
思想自行实现。
Flux的设计思想见下图：
Flux架构中包括Action（行为）、Dispatcher（调度器）、Store（存储）、View（视图），相对常见的MVVM框架，Flux设计思想中最大的特点是数据是单向流动的，像AngularJS可以双向绑定，这在Flux中是不允许的。双向绑定在Model和DOM中直接进行绑定，看起来很爽，当页面复杂时就会较多的问题。
关于Flux的具体原理本文不想仔细介绍，见
以下结合ReactJS来详细介绍一下如何实现一个Flex应用。
Action（行为）：或动作，如增加操作、删除操作、更新操作，就是一堆函数。
Dispatcher（调度器）：负责进行事件的分发调度。facebook提供了一个现成的Dispatcher（叫Flux.js,Github里面有）可以直接用。注意的是Flux,js是为nodejs开发的模块，如果要有浏览器中使用需要稍微改造一下。
Store（存储）：就是用来保存数据的地方，或者相当于Model层。
View（视图）：在ReactJS中就是各类component.
2、创建Dispatcher（调度器)
&建一个全局的调度器.
先引入&script src=&js/dispatcher.js&&&/script&
dispatcher.js是从Flux,js中改造成可以在浏览器中使用。
var AppDispatcher = new Dispatcher();
3、定义action行为
定义一个全局变量来保存各种action，action就是一个普通的JS函数，如下：
var CommentActions = {
create: function(author,text) {
//向调度中心注册发布事
AppDispatcher.dispatch({
actionType:&create&,
//动作类型
author:author,
text: text
最主要的是里面的AppDispatcher.dispatch
这个方法需要你提供一个必备的actionType参数，用来说明这个action。其他参数则是这个action需要的。
可以理解为该方法将action注册到调度器中，调度可以根据actionType来执行不同的store操作。
你也可以增加像delete，update等各种action。类似这样：
var CommentActions = {
create: function(author,text) {
//向调度中心注册发布事
AppDispatcher.dispatch({
actionType:&create&,
//动作类型
author:author,
text: text
delete:function(index){
&span style=&font-family: Arial, Helvetica, sans-&&
AppDispatcher.dispatch({&/span&&pre name=&code& class=&javascript&&
actionType:&delete&,
//动作类型
author:author,
text: text
4、创建store
store就是一个用来保存数据的仓库，你可以按自己的需要进行管理数据，也可以从ajax提取数据等，像下例，就是采用一个数组来保存数据。
//存储数据
var CommentStore = {
items: [],
getAll: function() {
return this.
getItem:function(index){
return this.items[index];
onChange:function(author,text){
console.log(&onChange&);
this.items.push({&author&:author,&text&:text});
上例中的CommentStore就是一个全局变量。
接着调用AppDispatcher.register，通过传Dispacher传入的action参数来决定该如何进行CommentStore操作。
AppDispatcher.register(function(action) {
switch(action.actionType) {
case &create&:
&pre name=&code& class=&javascript&&
CommentStore&span style=&font-family: Arial, Helvetica, sans-&&.items.push({&author&:author,&text&:text});&/span& //触发change事件 CommentStore.trigger('change',action.author,action.text); } });
上面这个例子，当一个create action发生时，就添加一个数据项，然后触发一个change事件。
重点来了，当action行为发生时，调度器通知store进行数据变更，这个过程是由调度器来完成。
而数据变更后，如何通知view更新呢？
机制就是通过事件和各种callback，在Flux.js的官方的todo例子中，用的是node的events模块来实现事件的注册、绑定和触发。
你也可以自己管理一个callback来处理事件。
在本文中，我使用的是一个叫MicroEvent.js的小型事件分发器，使用方法如下：
MicroEvent.mixin(CommentStore)&
这个方法执行后就为CommentStore提供bind、trigger、unbind等方法，并提供一个事件分发。
将这句MicroEvent.mixin(CommentStore) 加在:
var CommentStore = {
MicroEvent.mixin(CommentStore)
然后就可以通过&pre name=&code& class=&javascript&&CommentStore.bind(&change&,callback)绑定一个change事件。CommentStore.trigger(&change&,params)触发一个change事件。
5、通知view改变
在上一小节中，store需要触发相应的事件，事件类型可以自己定义。那么view层如何进行更新呢？
在ReactJS中componentDidMount事件是指在组件渲染挂在DIM后发生的事件，很明显，由于ReactJS具有虚拟DOM的特点，因此
更新事件绑定，可以在componentDidMount事件中绑定上面的change事件，像这样：
var Comment = React.createClass({
&span style=&white-space:pre&& &/span&onChange:function(){
在这里可以进行进行setState操作
componentDidMount:function(){
&span style=&font-family: Arial, Helvetica, sans-&&CommentStore.bind(&change&,this.onChange)
#通过这里的侦听事件&/span&
componentWillUnmount:function(){
&pre name=&code& class=&javascript&&&span style=&font-family: Arial, Helvetica, sans-&&
CommentStore.unbind(&change&)&/span& }})
很明显Flux仅仅是个设计模式，跟ReactJS结合可以为大型应用提供最佳实践。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：171190次
积分：1376
积分：1376
排名：千里之外
原创：28篇
评论：25条
(2)(1)(5)(1)(1)(2)(1)(2)(1)(1)(1)(1)(1)(2)(3)(5)}