摘要:回調使用事件可以支持多個成功后的回調。實際生產中,如果模塊的數據層管理使用場景只有一個,也不需要在操作中做相關操作。一般只需要實例化成單例提供管理數據的相關事件到不同的組件。
說明
博文中code例子是基于nej編寫,如果你沒使用過nej,也不會妨礙你理解代碼。
適用場景實際開發中常遇到不同model對應多個view。用戶通過 View 層來交互,View 有時需要根據用戶的數據更新 Model。還有時 Model 需要更新其他的 Model,即一個model改變,觸發一連串的view變化。
這種情況,開發者可以將所有對數據的操作獨立成一個數據層模塊,集中管理數據相關的action。
nej這種機制的例子(不討論緩存),delete操作作為理解例子util/cache/list.js
cache組件提供一個對外的action -- _$deleteItem
/** * 刪除列表項 * * 腳本舉例 * ```javascript * _cc._$deleteItem({ * key: "123" * }); * ``` * * @method module:util/cache/list._$$CacheList#_$deleteItem * @param {Object} arg0 - 配置信息 * @property {String} key - 列表標識 * @property {String} id - 列表項標識 * @property {Object} data - 列表項數據信息 * @property {Object} ext - 需要回傳的數據信息 * @return {Void} */ _pro._$deleteItem = function(_options){ _options = _u._$merge({},_options); _options.onload = this.__deleteItem._$bind(this,_options); this._$dispatchEvent("dodeleteitem",_options); };
通過cache組件實例._$batEvent("dodeleteitem", function(){});來發送ajax請求。請求所要options由外部組件調用cache組件action時傳入。一般只需要傳入參數。onload回調使用dispatch事件(可以支持多個成功后的回調)。
/** * 刪除列表項回調 * * @protected * @method module:util/cache/list._$$CacheList#__deleteItem * @param {Object} arg0 - 請求信息 * @param {Boolean} arg1 - 是否刪除成功 * @return {Void} */ _pro.__deleteItem = function(_options,_isok){ // 列表的例子中可以做一下cache相關的操作 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; };
通過cache組件實例._$batEvent("onitemdelete", function(){}); 可以實現刪除成功之后的回調。不同views組件可以獨立綁定事件回調,這樣代碼解耦。一個view不需要的時候,不需要改代碼。
每個cache組件都是一個單例實例。保證了在每個不同的功能組件(view)中用到的是同一個。
每一類list cache組件都可以有自己的不同的crud,例如bookList.js
// $$CacheList == cache/list.js var bookList = _t._$$CacheList._$allocate({ id: "abc", doloadlist: function (_options) { // 從服務器加載列表 _j._$request( "/api/list", { data: _options.data, onload: function (_list) { _options.onload(_list); } } ); }, dodeleteitem: function (_options) { _options由調用cache.action處傳入 // 從服務器刪除數據項 _j._$request( "/api/delete", { data: _options.data, onload: function (_item) { _options.onload(_item); } } ); } }); return bookList;
nej對每一個list cache組件又抽象了一個基類cache/abstract.js
bookList.js繼承abstract.js,按照api實現指定接口,返回list cache組件實例
list的數據層管理,可以抽象出通用的api,crud。所以nej把這種場景抽象成list.js。實際生產中,如果模塊的數據層管理使用場景只有一個,也不需要在crud操作中做cache相關操作。一般只需要實例化成單例提供管理數據的action,dispatch相關事件到不同的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其他屬性可以由調用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相關驗證顯示通過的樣式"); }); // 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**庫一片火熱的今天,也會也到多個view對應一個model的場景,facebook提出了一種解決方案單向數據流,單向數據流——就一個方向——當你需要插入新的數據,流完全重新開始。他們把這種架構稱為Flux。
Flux的大致流程如下
通過這樣設計,View的功能就會變得純粹許多。它不需要關心組件的狀態和數據的操作,只需要把交到它們手中的數據渲染格式化成用戶能夠理解的輸出(HTML)。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86083.html
摘要:事件訂閱發布者模式什么是讀音類似于是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,采用自底向上增量開發的設計。 MVC && MVVM 前端框架前端 MV*框架的意義 被誤解的MVC和被神化的MVVM Vue.js新手入門指南 單頁應用SPA的路由 單頁面應用的路由問題 本文是在自己總結時,看了許多篇文章有了些體會,然后把我認為有意義的摘抄下來,文中很大部分摘錄以上...
摘要:在沒有環境下對進行單元測試的時候,應用邏輯正確性是無法驗證的更新的時候,無法對的更新操作進行斷言。對是通過接口進行,在對進行不依賴環境的單元測試的時候。這里根據上面的例子給出了的單元測試樣例。年微軟工程師在自己的博客上首次公布了模式。 前言 做客戶端開發、前端開發對MVC、MVP、MVVM這些名詞不了解也應該大致聽過,都是為了解決圖形界面應用程序復雜性管理問題而產生的應用架構模式。網上...
摘要:在沒有環境下對進行單元測試的時候,應用邏輯正確性是無法驗證的更新的時候,無法對的更新操作進行斷言。對是通過接口進行,在對進行不依賴環境的單元測試的時候。這里根據上面的例子給出了的單元測試樣例。年微軟工程師在自己的博客上首次公布了模式。 前言 做客戶端開發、前端開發對MVC、MVP、MVVM這些名詞不了解也應該大致聽過,都是為了解決圖形界面應用程序復雜性管理問題而產生的應用架構模式。網上...
閱讀 2009·2021-11-24 09:39
閱讀 1878·2019-08-30 15:55
閱讀 2168·2019-08-30 15:53
閱讀 565·2019-08-29 13:16
閱讀 984·2019-08-26 12:20
閱讀 2379·2019-08-26 11:58
閱讀 3129·2019-08-26 10:19
閱讀 3296·2019-08-23 18:31