前端设计模式之 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) 显得友好得多。

 

 

 

 

 

 

 

 

 

 

posted on 2013-01-22 13:08  沙加  阅读(577)  评论(0编辑  收藏  举报

导航