Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

现代 Web 前端架构中的 Model 层

  Model 层到底干嘛的?这个问题看似幼稚,可一旦深入思考就会发现确实没有一个标准来定义它。以前后端的 MVC 对页面是单次渲染的,Model 仅仅是提供数据而已,它不需要做其它任何事情。但现代 Web 的前端渲染和动态数据变更已经不再是传统的 Model 层了。
  以前做 PHP 的时候就觉得 Model 只是把 SQL 包装成数据对象的形式而已,而且这个数据对象用完一次就丢了。可是到了前端,Model 就不再是单次渲染了。而且前端交互的各种异步也让 Model 相关的操作变得非常复杂。所以我认为在前端架构中 Model 所承载的东西绝不仅限于数据那么简单。
  Model 的一个重要用途就是共享数据。因为一份数据可能由多个 View 共享,如果像传统 Web 开发那样每个 View 单独去请求数据势必会带来大量冗余请求,而且可能造成数据不一致的问题。如果 View 只从 Model 上取数据,Model 负责与服务器同步数据就不会出现这样的问题。
  现代 Web 强调的是强交互,数据通常是实时更新的。也就是说希望 Model 更新时所有的 View 都被更新。在 MVVM 中就是把 Model 丢到 VM 层上自动与 View 层绑定(最典型的就是 Angular)。虽然大家都这么用吧,但我觉得这种以 VM 层主动做脏数据比对来触发的更新就和轮询一样恶心。应该由 Model 层主动推送自己的更新,因为 Model 层是最清楚数据何时发生改变的。主动推送可以避免大量不必要的数据比对操作。
  其实我这么说着说着,所谓的 Model 就渐渐变成了 Service 之后的东西。现代 Web 中的 Model 就应该是 Service 的概念了。可以把 Model 视为数据源服务,提供数据以及数据更新的相关事件。View 和 Model 同样可以通过 Model 提供的通知绑定起来,于是 VM 的概念就基本消失了。
  React 因为使用 setState 来更新数据触发渲染,所以毫无疑问地是纯 View 层的。而 Polymer 则通过访问器属性,虽然看起来有点像 VM 之类的东西,但它同样也是主动触发的我也把它定位为了纯 View。这两个纯 View 框架中,我们可以使用任意实现的 Model 来关联 View,所以上述基于通知推送的 Model 完全可以无缝地用于 React 和 Polymer。而 Angular(这里指的是 Angular 1.x)这样自己提供一套检测机制来比对数据并更新的框架就被限死在了 MVVM 这个模式下。
  之所以突然纠结这个话题是因为最近使用 React 的项目正在纠结如何处理 Model 的问题。虽然有一些现成的方案,但我还是自己开始瞎折腾了。
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^