前端代码怎样处理用户操作跟 Model 的一对多关系?

Question

场景是这样的:
用户点击了一个按钮
AModel需要更新
BModel需要更新
...
这样一个操作,需要同时依赖很多个Model,因此这些代码不会写在某一个Model里边.
有可能是比如Backbone,写在ViewController里边...但是这样代码复用不好,而且View会变乱.
我目前采取的方案是用单独一个文件去收集大部分的Model操作,不过问题是,这个文件会不断变大变乱.
所以这样的问题应该如何解决?
延伸的问题是,怎样整理这部分代码?
比如我用React的Flux方案,尽量将流程理清楚,就发现这部分代码不知道放在哪里合适..
Flux将用户操作转化为Actions,Store通过Dispatcher监听这些Actions,
一个Actions对应多个Store的时候...问题就来了:
我是应该用多个Actions分别对应Store,还是一个Action由多个Store来监听?

Answer 1

用户点击按钮本质上跟用户通过URL访问一样，都是一种『输入』，所以问题和处理机制都是一样的：在view层代码里监听『输入』，处理一些view层（比如按钮组件的toggle、URL的矫正）内部的状态变化，生成/提取出纯粹的、抽象层级更高的（跟view组件或URL细节无关）数据/消息，用某种事件机制广播出去，之后就跟自己没关系了，接下来如果有controller层的话，在这部分的代码里监听这些事件，调用相应model对象的方法（其中可能封装了model对象自己之间的依赖关系和调用，但这里的一对多复杂性不会暴露到外面去），同时也监听某些model对象的状态变化，调用相应view对象的方法（或是重新渲染VirtualDOM）。所有东西绑定完成。比如我平时用NervJS（model）+DermJS（view）+URLKit（route）这样的搭配，NervJS和DermJS对象都有自带的事件方法，此外也可以在view/model对象初始化时传入统一的bus事件对象。你写一个UIcomponent的时候当然不会希望它依赖特定的model，写一个model组件的时候，也不会希望它依赖特定UI，所以一对多之类的绑定是在另一个地方（专门的业务逻辑代码）完成的，view对象和model对象不需要也不应该知道对方有几个、是哪些，所以也不可能『多个Actions分别对应Store』。至于『单独一个文件』、『不断变大变乱』的问题，跟配置路由的文件也是一回事，可以参考相关经验。

Answer 2

flux里，如果需要一个动作对应多个Store，其实也是很好解决的。在Store里面register回调的时候，可以都对这个动作进行相应就可以了，还可以通过waitFor来改变相应的顺序。如果担心代码变乱的话，可以再单独写一个constants文件，定义好触发的事件名称就可以了。举个例子：点击一个按钮，触发send事件，会更新两个Store分别是StoreA和StoreB。可以写一个constants.js，先定义事件名称：constants:module.exports={"ActionTypes":{"SEND":"SEND"}};然后在两个Store里面分别注册回调：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};});在触发点击事件的时候，在Action中触发Disp的这个事件，就会顺序执行在StoreA和StoreB中注册的回调了:)