前端设计模式之 MPVC Part 1

MPVC 是对 Model Partial-View Controller 的缩写（姑且这样称呼它）。

最近看到 MVVM  模式及司徒正美的 avalon 框架有一些新的想法。对于 MVVM 的不足有以下考虑：

• 需要在所有模板都要放在前端（也许后端还需要再来一份？）
• 建模只是为了显示需要，哪怕对于不参与逻辑处理的字段都需要进行建模，显得比较麻烦
• 不同的页面需要不同的 VM，维护成本较高
• 对于多页面应用仍然需要编写代码以控制程序工作逻辑

最大的美妙之处在于数据模型与视图显示的自动绑定。

先抛开 MVC 模式不谈，从头思考下页面的构造与工作流程：

• 对于一个不特定的网页应用来说，页面应该由若干个不同的区块构成，不同的区块按功能区域划分
• 对于不同的页面，由不同的功能区块组合而成
• 网页应用为了追求用户体验会使用 Ajax 技术仅更新一部分的页面内容，这个过程可以抽象为功能区块的视图刷新、添加、删除

一般在简单的应用开发中会写出这样的代码：

$.get('/action_url', function(result){
   $('#result_panel').innerHTML(result);
});

在视图更新的时候需要重复此过程，并且会带来其它的一些问题：

• $('#result_panel')将代码逻辑与 Dom 元素作了强绑定，由于 ID 的唯一性限定了这样的代码块只能用于单例模式中
• $('.action-hook-class') 则污染了全局空间，在不需要启动此特性的页面需要进行不必要的 Selector 扫描，要启用、禁用此特性的话需要额外的控制开关逻辑。

而模块化的代码编写可以避免这些问题：$('.result-panel', contextScope) 或 $('.action-hook-class', contextScope) 显得友好得多。