React.js留言板（Flux结构实现）

本篇文章介绍的一个Flux架构下实现的留言板，实现列表查看和新添留言功能，此留言板是根据基于React.js实现的留言板（无Flux架构思想）进行的改造，之前使用React.js实现了留言板的列表显示和新增留言功能（关键代码不到200行），想查看的话移步访问http://blog.csdn.net/liu942626/article/details/69063029，本次是在学习了Flux结构之后，对Flux实现React.js留言板的尝试，github地址：https://github.com/liu942626/MessageBoard-Flux。

React 本身只涉及UI层，如果搭建大型应用，必须搭配一个前端框架。也就是说，你至少要学两样东西，才能基本满足需要：React + 前端框架。学习React的话，假如你已经掌握了React.js的入门知识，建议看下阮一峰老师的http://www.ruanyifeng.com/blog/2016/01/flux.html  Flux架构入门教程，个人感觉通俗易懂，一看就会，也是根据这个改的自己的留言板，本文也不再详细介绍flux架构的具体实现，只对留言板的实现进行说明。

接下来是留言板的一些介绍：

一、程序亮点：
React+Flux实现；
Mock.js假数据填充，无需任何后台，即开即用(浏览器直接打开/dist/html/index.html即可访问)；
手打超多注释。

二、文件结构（代码在src中）：
/assets 下放置依赖文件（jquery以及bootstrap）；
/css 下index.css自定义样式，/img放置的是置顶图片；
/html 下index.html界面；
/js：
    /react（体现Flux架构的文件）：
        /actions下 动作；
        /dispatcher下 分发器；
        /stores下 存储；
        /index.js 视图。
    mock.value.js 假数据填充。

三、功能实现：

Flux 的最大特点，就是数据的"单向流动"。

1. 用户访问 View
2. View 发出用户的 Action
3. Dispatcher 收到 Action，要求 Store 进行相应的更新
4. Store 更新后，发出一个"change"事件
5. View 收到"change"事件后，更新页面

上面过程中，数据总是"单向流动"，任何相邻的部分都不会发生数据的"双向流动"。这保证了流程的清晰。

以下介绍初始化加载列表的流程（只粘贴了部分代码，完善代码可以在github中进行下载,流程按照数字进行顺序发生，数据流动view-action-dispatcher-store-view）：

1）view视图

// 留言板总体模块var MessagePanel = React.createClass({    getInitialState: function(){ // 初始化数据        return ListStore.getAll(); // 直接调用的store模块获取数据    },    _onChange: function(){        this.setState(            ListStore.getAll() // 10、获取store模块的值，12、将获取值赋值到state，view视图刷新        );    },    listContent: function(){ // 3、ajax获取后台数据        var that = this;        $.ajax({            type: 'get',            url: '/get',            dataType: 'json'        }).done(function(resp){            if('success' === resp.status){                ButtonActions.refreshList(resp.data); // 4、获取数据后，action模块            }        }.bind(that));    },    componentDidMount: function(){ // 1、初始化加载界面获取列表        ListStore.addChangeListener(this._onChange); // 2、绑定获取数据方法        this.listContent(); // 3、ajax获取后台数据    },    render: function(){        return (            <div>                <div className="col-xs-2">                </div>                <div className="col-xs-8">                    <MessageList data={this.state.list} />                    <MessageAlert alert={this.state.text}/>                </div>                <div className="col-xs-2">                </div>            </div>        );    }});

2）action模块

var ButtonActions = {  refreshList: function (list) { // 5、更新留言列表    AppDispatcher.dispatch({      actionType: 'REFRESH_LIST', // 6、dispatcher模块分发      list: list    });  }};

3）dispatcher模块

AppDispatcher.register(function(action){    switch(action.actionType){ //通过不同的actionType更新不同数据        case 'REFRESH_LIST':            ListStore.refreshListHandler(action.list); // 7、调用store模块方法            ListStore.emitChange(); // 9、触发绑定的change监听            break;       default:            // noDefault;    }})

4）store模块

var ListStore = assign({},EventEmitter.prototype,{    items: {        list: [],        text: ''    },        getAll: function() { // 11、获取store模块中的items值        return this.items;    },        refreshListHandler: function(list) { // 8、刷新留言列表        this.items.list = list;    },        emitChange: function() { // 触发change监听，调用change绑定的函数        this.emit('change');    },        addChangeListener: function(callback) { // chang监听绑定函数        this.on('change',callback);    },        removeChangeListener: function(callback) { // change监听解绑        this.removeListener('change',callback);    }});

四、其他说明：
github地址：https://github.com/liu942626/MessageBoard-Flux下载后使用npm install下载安装package.json中的依赖，而后使用gulp指令拷贝文件；
gulpfile.js实现功能是文件拷贝以及src/js/react下js文件的转码（es6转换）压缩，如有更多需求还自行修改此文件。