首頁猿問前端代碼怎樣處理用戶操作跟...

前端代碼怎樣處理用戶操作跟 Model 的一對多關(guān)系?

JavaScript

桃花長相依 2019-04-16 20:27:37

場景是這樣的:用戶點(diǎn)擊了一個按鈕AModel需要更新BModel需要更新...這樣一個操作,需要同時依賴很多個Model,因此這些代碼不會寫在某一個Model里邊.有可能是比如Backbone,寫在ViewController里邊...但是這樣代碼復(fù)用不好,而且View會變亂.我目前采取的方案是用單獨(dú)一個文件去收集大部分的Model操作,不過問題是,這個文件會不斷變大變亂.所以這樣的問題應(yīng)該如何解決?延伸的問題是,怎樣整理這部分代碼?比如我用React的Flux方案,盡量將流程理清楚,就發(fā)現(xiàn)這部分代碼不知道放在哪里合適..Flux將用戶操作轉(zhuǎn)化為Actions,Store通過Dispatcher監(jiān)聽這些Actions,一個Actions對應(yīng)多個Store的時候...問題就來了:我是應(yīng)該用多個Actions分別對應(yīng)Store,還是一個Action由多個Store來監(jiān)聽?

查看完整描述

2 回答

qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個贊

用戶點(diǎn)擊按鈕本質(zhì)上跟用戶通過URL訪問一樣，都是一種『輸入』，所以問題和處理機(jī)制都是一樣的：在view層代碼里監(jiān)聽『輸入』，處理一些view層（比如按鈕組件的toggle、URL的矯正）內(nèi)部的狀態(tài)變化，生成/提取出純粹的、抽象層級更高的（跟view組件或URL細(xì)節(jié)無關(guān)）數(shù)據(jù)/消息，用某種事件機(jī)制廣播出去，之后就跟自己沒關(guān)系了，接下來如果有controller層的話，在這部分的代碼里監(jiān)聽這些事件，調(diào)用相應(yīng)model對象的方法（其中可能封裝了model對象自己之間的依賴關(guān)系和調(diào)用，但這里的一對多復(fù)雜性不會暴露到外面去），同時也監(jiān)聽某些model對象的狀態(tài)變化，調(diào)用相應(yīng)view對象的方法（或是重新渲染VirtualDOM）。所有東西綁定完成。比如我平時用NervJS（model）+DermJS（view）+URLKit（route）這樣的搭配，NervJS和DermJS對象都有自帶的事件方法，此外也可以在view/model對象初始化時傳入統(tǒng)一的bus事件對象。你寫一個UIcomponent的時候當(dāng)然不會希望它依賴特定的model，寫一個model組件的時候，也不會希望它依賴特定UI，所以一對多之類的綁定是在另一個地方（專門的業(yè)務(wù)邏輯代碼）完成的，view對象和model對象不需要也不應(yīng)該知道對方有幾個、是哪些，所以也不可能『多個Actions分別對應(yīng)Store』。至于『單獨(dú)一個文件』、『不斷變大變亂』的問題，跟配置路由的文件也是一回事，可以參考相關(guān)經(jīng)驗(yàn)。

反對回復(fù) 2019-04-16

忽然笑

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超5個贊

flux里，如果需要一個動作對應(yīng)多個Store，其實(shí)也是很好解決的。在Store里面register回調(diào)的時候，可以都對這個動作進(jìn)行相應(yīng)就可以了，還可以通過waitFor來改變相應(yīng)的順序。如果擔(dān)心代碼變亂的話，可以再單獨(dú)寫一個constants文件，定義好觸發(fā)的事件名稱就可以了。舉個例子：點(diǎn)擊一個按鈕，觸發(fā)send事件，會更新兩個Store分別是StoreA和StoreB?？梢詫懸粋€constants.js，先定義事件名稱：constants:module.exports={"ActionTypes":{"SEND":"SEND"}};然后在兩個Store里面分別注冊回調(diào)：StoreA:varAppDispatcher=require('path/to/disp'),constants=require('path/to/constants');StoreA.dispatchToken=AppDispatcher.register(function(payload){varaction=payload.action;if(action.type===constants.ActionTypes.SEND){//callbackA};});StoreB:varAppDispatcher=require('path/to/disp'),constants=require('path/to/constants');StoreB.dispatchToken=AppDispatcher.register(function(payload){varaction=payload.action;if(action.type===constants.ActionTypes.SEND){//callbackB};});在觸發(fā)點(diǎn)擊事件的時候，在Action中觸發(fā)Disp的這個事件，就會順序執(zhí)行在StoreA和StoreB中注冊的回調(diào)了:)