javascript - 求前端mvc实例运用，最好能十几行代码说明白的～

Question

我搞不明白model应该怎样设计。看了一些例子中的model完全就是一个数据存储对象，这和后端的model差太多。而且只是一个数据对象字面量的话，没必要划分成一个model吧。

Mvvm框架更是把view和model绑定在了一起，让我更迷糊了。求大婶～

Answer 1

看图说话，这样的结构的好处是代码结构清晰，易于维护，明确分工。对于转型的同学非常友好：后台转型前端的同学从左到右学习，前端转型后台的同学从右到左学习。

言归正传，前端的Model由于不能像服务器端一样有数据库支持，所以一般的前端MV*框架都会采用封装的形式生成一个Object，这个也叫Model，楼主觉得差得太多的话，小生推断楼主肯定对关系型数据库非常熟悉，对文档型数据库较为陌生。

图中没有划分Controller的空间，我们都知道，它在Model和View之间，但具体该怎么放，各种MV*框架也是各不相同。Angularjs倾向于将Controller和Model靠近些，离View较远，而backbone则因为它只提供各个独立的模块，所以它的controller的位置则由开发者来决定，React则倾向于以UI为核心，View和Controller放一起。至于楼主所说的Model和View绑在了一起的，请恕小生才疏学浅，还没见识过。

最后说到楼主的核心问题：Model该如何设计?
关于这个，先来看看Model都干了些什么，具体如下：
1. View改变引起更新Model过程，你需要关心的是数据验证和数据再包装。(类比后台在存入数据库前对数据的处理：验证和处理)。
2. 前端Model发起到Server的请求过程，你需要关心的是这个请求通常是异步的这一点。
3. 后台返回处理结果的过程，这个过程虽然会更新Model，但你需要的只是一个parser，因为你必须完全相信服务器的处理结果。
4. Model改变更新视图过程，你需要关心的是如何花最小的代价(综合性能和代码量)来实现。

弄清楚了Model该干什么，再说Model是个什么样子。

答案就是：我也不知道它具体是个什么样子，但我知道了它应该是个什么样子。

Answer 2

model其实和java Bean差不多吧，都是为了方便数据传输，但是model比bean使用面更广，没有那么多的限制，对于你说的有没有必要划分成一个model需要看你的设计，为了减少数据传输，提高用户体验，model还是有必要的，另外使用model传输数据更方便一些。

Answer 3

MVVM 确实不好理解. 如果是每次数据修改都对整个界面进行重新绘制, 楼主也许就熟悉一点了.
或者说, 如果是 PHP 那样, 每次有提交, 整个页面都重新绘制, 楼主会不会熟悉好多?
Facebook 基于这样的思路用 JavaScript 在前端实现了 React, 可以粗略理解为这个全部渲染.
然后 Facebook 得到了一个 MVC 的变种, 取了个名字叫 Flux.. 我就向楼主推荐 React 跟 Flux.
Flux 当中因为界面是整体渲染, 因此会清晰一些, 而其中的 Model, 就比较容易用 Array 直接实现了.

Answer 4

推荐本《Backbone.js 应用程序开发》上面有对 Backbone 和 MVC 的具体解释，还有项目案例。

前两天看到的寒冬大侠的微博

http://weibo.com/p/1001603809050365148952?from=page_100505_profile&wvr=6&mod=wenzhangmod'''

楼上朋友说的 todomvc.com 确实赞，各种实现 todolist。

Answer 5

不知道你所说的“后端的Model”是指什么？
我猜测你指的可能是那种已经和ORM绑起来、可以用来表示数据也可以用来访问数据库的东西吧。

就我个人理解，像是AngularJs这种的双向绑定的MVVM，就是指那种用特定指令把界面某个元素的显示和ViewModel中对应对象绑定起来，哪边有改动，另外一边就会有对应的改动。并不存在什么“数据库”，ViewModel就是数据源。至于后台开发中那种定义数据规范的模型……就看你自己想不想做了。

也是刚接触，说的不一定对。