search

RubyLouvre / avalon

an elegant efficient express mvvm framework
http://avalonjs.coding.me/
Other
5.8k stars 1.42k forks source link

求建议和指导:如何维护前端数据的一致性 #162

Closed wiz-Cll closed 10 years ago

wiz-Cll commented 10 years ago

恭请作者司徒和各位关注MVVM的同学给些建议~ 毕业前实习加毕业后工作有一段时间了,在面对比较大的前端项目的时候还有点发憷:怎么在前端有限的内存和操作时间内( 一刷新就没 )维护好用户的数据,同时做好ui的同步和一致? 这里所说的"较大的前端项目",指的是类似Evernote网页版,或者wunderlist网页版,至少三层的数据结构( 笔记本列表->笔记列表->笔记对象 或者 任务list->任务列表->任务详情) ). 在使用MVVM前一直沉溺在拼接dom的泥沼中,现在有了mvvm之后做数据和ui的同步简单了很多.但是一些新的问题也随之而来:

  1. 不同vm之间如何做数据交流? 比如实现evernote时做了三个vm: notebookVM, notelistVM, noteVM. 在页面中做三栏布局,如果用户修改了正在显示的笔记的note_title,那么notelist中该篇笔记的标题, 通过遍历guid去修改么?这样的操作是note的数据去影响notelist中的数据,出了遍历还有更好的办法吗?
  2. 针对于过大的数据,为了页面的流畅,可能不会将所有数据一下子都传给vm: 某篇笔记本有200+的笔记,如果一次性传给notelistVM去渲染, avalon的设计上可以承受这样的压力,但更好的做法是先传给vm50条,然后在用户滚动到底部后再传25条,然后再传25条.这时就要在内存里维护两份数据:列表的全部200条数据,和vm中50条的数据.此时应该怎么维护两份数据的一致性呢?删除一条笔记/增加一条笔记还简单,牵扯到定时向后台请求数据(确保数据最新)然后增量刷新列表,就更麻烦了...

请问各位同仁有没有更好的设计思路或者实现方法, 告诉小弟一声...

RubyLouvre commented 10 years ago

我自身也没有遇到这样复杂的需求，自己手动维护一下，或者使用$watch回调向其他VM同步

barretlee commented 10 years ago

follow

18601673727 commented 10 years ago

密切关注。

jutleo commented 10 years ago

从我的理解去实现你提到的两点看能否符合你的需求： 1、 notebookVM, notelistVM, noteVM 这三个本身就是有主从关系的，其实看起来就是一个数据结构，只要你的结构足够合理，你可以定义一个vm，不管你如何修改node_title，vm中只有一份而已。这样会带来性能问题，这个你可以考虑根据实际情况优化，比如先定义一个初始化的数据vm，隐藏dom在内存中进行初始化，之后在真正的数据到来时，因为已经初始化过了 会相当的快。 2、其实你这个命题本身就不成立，数据过大你应该考虑分页，至于分页的形式是滚动到底层还是点击分页根据实际表现形式确定。如果按照你说的那种在内存中维护一份数据也是两个命题，首先你应该还是在vm中有自己的分页，其次你内存中的数据也是一个大的独立分页，页面上的分页总是从内存中取，而内存此时向后端取。 3、至于定时后端刷新也是另一个命题，首先你的数据应该是有状态的，必须新增的、修改的、删除的、选中的等等，这样就很容易实现你的需求了。