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轉換）壓縮，如有更多需求還自行修改此文件。