摘要：回調(diào)使用事件可以支持多個(gè)成功后的回調(diào)。實(shí)際生產(chǎn)中，如果模塊的數(shù)據(jù)層管理使用場(chǎng)景只有一個(gè)，也不需要在操作中做相關(guān)操作。一般只需要實(shí)例化成單例提供管理數(shù)據(jù)的相關(guān)事件到不同的組件。

博文中code例子是基于nej編寫，如果你沒(méi)使用過(guò)nej，也不會(huì)妨礙你理解代碼。

實(shí)際開(kāi)發(fā)中常遇到不同model對(duì)應(yīng)多個(gè)view。用戶通過(guò) View 層來(lái)交互，View 有時(shí)需要根據(jù)用戶的數(shù)據(jù)更新 Model。還有時(shí) Model 需要更新其他的 Model，即一個(gè)model改變，觸發(fā)一連串的view變化。

這種情況，開(kāi)發(fā)者可以將所有對(duì)數(shù)據(jù)的操作獨(dú)立成一個(gè)數(shù)據(jù)層模塊，集中管理數(shù)據(jù)相關(guān)的action。
nej這種機(jī)制的例子(不討論緩存)，delete操作作為理解例子util/cache/list.js
cache組件提供一個(gè)對(duì)外的action -- _$deleteItem

/**
 * 刪除列表項(xiàng)
 *
 * 腳本舉例
 * ```javascript
 * _cc._$deleteItem({
 *     key: "123"
 * });
 * ```
 *
 * @method   module:util/cache/list._$$CacheList#_$deleteItem
 * @param    {Object} arg0 - 配置信息
 * @property {String} key  - 列表標(biāo)識(shí)
 * @property {String} id   - 列表項(xiàng)標(biāo)識(shí)
 * @property {Object} data - 列表項(xiàng)數(shù)據(jù)信息
 * @property {Object} ext  - 需要回傳的數(shù)據(jù)信息
 * @return   {Void}
 */
_pro._$deleteItem = function(_options){
    _options = _u._$merge({},_options);
    _options.onload = this.__deleteItem._$bind(this,_options);
    this._$dispatchEvent("dodeleteitem",_options);
};

通過(guò)cache組件實(shí)例._$batEvent("dodeleteitem", function(){});來(lái)發(fā)送ajax請(qǐng)求。請(qǐng)求所要options由外部組件調(diào)用cache組件action時(shí)傳入。一般只需要傳入?yún)?shù)。onload回調(diào)使用dispatch事件(可以支持多個(gè)成功后的回調(diào))。

/**
 * 刪除列表項(xiàng)回調(diào)
 *
 * @protected
 * @method module:util/cache/list._$$CacheList#__deleteItem
 * @param  {Object}  arg0 - 請(qǐng)求信息
 * @param  {Boolean} arg1 - 是否刪除成功
 * @return {Void}
 */
_pro.__deleteItem = function(_options,_isok){
    // 列表的例子中可以做一下cache相關(guān)的操作
    var _item,
        _key = _options.key;
    // sync memory
    if (!!_isok){
        var _id = _options.id;
        _item = this._$getItemInCache(_id)||null;
        this.__doRemoveItemFromList(_key,_id);
    }
    // callback
    var _event = {
        key:_key,
        data:_item,
        action:"delete",
        ext:_options.ext
    };
    this._$dispatchEvent("onitemdelete",_event);
    return _event;
};

通過(guò)cache組件實(shí)例._$batEvent("onitemdelete", function(){}); 可以實(shí)現(xiàn)刪除成功之后的回調(diào)。不同views組件可以獨(dú)立綁定事件回調(diào)，這樣代碼解耦。一個(gè)view不需要的時(shí)候，不需要改代碼。

每個(gè)cache組件都是一個(gè)單例實(shí)例。保證了在每個(gè)不同的功能組件(view)中用到的是同一個(gè)。
每一類list cache組件都可以有自己的不同的crud，例如bookList.js

// $$CacheList  == cache/list.js
var bookList = _t._$$CacheList._$allocate({
    id: "abc",
    doloadlist: function (_options) {
        // 從服務(wù)器加載列表
        _j._$request(
            "/api/list", {
                data: _options.data,
                onload: function (_list) {
                    _options.onload(_list);
                }
            }
        );
    },
    dodeleteitem: function (_options) {  _options由調(diào)用cache.action處傳入
        // 從服務(wù)器刪除數(shù)據(jù)項(xiàng)
        _j._$request(
            "/api/delete", {
                data: _options.data,
                onload: function (_item) {
                    _options.onload(_item);
                }
            }
        );
    }
});
return bookList;

nej對(duì)每一個(gè)list cache組件又抽象了一個(gè)基類cache/abstract.js
bookList.js繼承abstract.js，按照api實(shí)現(xiàn)指定接口，返回list cache組件實(shí)例
list的數(shù)據(jù)層管理，可以抽象出通用的api，crud。所以nej把這種場(chǎng)景抽象成list.js。實(shí)際生產(chǎn)中，如果模塊的數(shù)據(jù)層管理使用場(chǎng)景只有一個(gè)，也不需要在crud操作中做cache相關(guān)操作。一般只需要實(shí)例化成單例提供管理數(shù)據(jù)的action,dispatch相關(guān)事件到不同的views組件。

// custom.js
_p._$$Custom = _k._$klass(); 
_pro = _p._$$Custom._$extend(_t._$$EventTarget);
_pro.__doSendRequest = function(key,options){
    var conf = config[key];
    // onload event
    var onload = function(result){
        if (!result||(""+result.code).indexOf("2")!==0){
            onerror.call(this,result);
            return;
        }
        // callback
        var callback = options.onload||conf.onload||"success";
        if (u._$isFunction(callback)){
            callback.call(this,result.result);
        }else if(u._$isString(callback)){
            // dispatch在不同view組件中，綁定的事件
            this._$dispatchEvent(callback,result.result);
        }
    };
    // options其他屬性可以由調(diào)用action _$checkUserName處傳入
    //data
    //type:"json",
    //method:"POST",
    options.onload = onload._$bind(this);
    request(options)
};
_pro._$checkUserName = function(options){
    this.__doSendRequest("checkUserName", options);
};
return _p._$$Custom._$allocate({});

//在view組件中使用
// component1 
define(["custom.js"], function(c){
    c._$batEvent("onusernamecheckok", function(){
        console.log("表單中username相關(guān)驗(yàn)證顯示通過(guò)的樣式");
    });
    // checkUserName DOM click事件
    var onCheck = function(
        c._$checkUserName({
            data: {xx: "王大錘"},
            onload: "onusernamecheckok"
        });
    );
});

// component2
define(["custom.js"], function(c){
    c._$batEvent("onusernamecheckok", function(){
        console.log("修改topbar的userName");
    });
});

如今mv**庫(kù)一片火熱的今天，也會(huì)也到多個(gè)view對(duì)應(yīng)一個(gè)model的場(chǎng)景，facebook提出了一種解決方案單向數(shù)據(jù)流，單向數(shù)據(jù)流——就一個(gè)方向——當(dāng)你需要插入新的數(shù)據(jù)，流完全重新開(kāi)始。他們把這種架構(gòu)稱為Flux。

Flux的大致流程如下

通過(guò)這樣設(shè)計(jì)，View的功能就會(huì)變得純粹許多。它不需要關(guān)心組件的狀態(tài)和數(shù)據(jù)的操作，只需要把交到它們手中的數(shù)據(jù)渲染格式化成用戶能夠理解的輸出（HTML）。