从个人博客开始谈MVC
2014-07-29
jekyll模板系统
我的博客是在github上利用Jekyll进行搭建的,Jekyll的话是一个强大的静态模板系统,因为博客主要还是静态为主,所以用它足够满足要求.而Jekyll的核心其实就是一个文本的转换引擎，可以用你最喜欢的标记语言写文档，可以是Markdown、Textile或者HTML等等，再通过layout将文档拼装起来，根据设置的URL规则来展现，这些都是通过严格的配置文件来定义，最终的产出就是web页面。其中也有MVC的思想在里边,例如View层是通过对layout下的静态模板文件通过模板引擎进行渲染来得到相应的视图，它依据各模板的连接将页面展示给用户。
那什么是model呢,_post文件夹下放的就是博客文章的数据源,因为模板是通过YAML front matter来定义的,那么可以利用{ { content }}标记用来将数据源插入到这些模板中来,从而实现了数据和模板文件的动态绑定，这就相当于整个系统的model层.
而controller的职责其实已经被Jekyll模板系统给实现了,我们所要做的就是对_config.yml这个文件进行配置,根据需求来对展现形式进行一些操控,最终系统便会对视图和数据模型整合自动生成页面.
弥补jekll的不足
其实jekyll充其量还只是个静态页面的发布系统,而作为一个博客,还应具有评论功能,这方面,我选择的是Disqus,只需在文章模板post.html种加入Disqus的模块代码即可,同时对代码高亮还用到了Google Code Prettify的插件,因为这块不是要说的重点,这里就不详细描述了.
MVC
前边大致介绍了一下MVC的设计思想,它贯穿前后端,这里专门再谈谈我对前端MVC的理解.
首先,为什么要在前端使用MVC?原因在于前端处理的逻辑越来越复杂，不仅有交互体验需要编写大量 js 代码，甚至很多业务逻辑都被搬到前端,我觉得MVC就是为了解决复杂前端情况下模块化JS的问题,特别适合于单页面的JS应用,而实现这三者分离的做法就是:
- 把数据请求,数据操作以及业务逻辑放在model中
- view负责视图的操作改变,页面渲染以及绑定事件
- controller负责将View的操作结果反馈给model
从上面可以看出,在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑,而controller就相当于做了中间件,view的操作结果通过controller来反馈给model,也就是说所有的事件都会流经controller,而且View和model的同步需要通过controller手动同步,这样带来的后果是,如果绑定的事件很多的话,view层的代码会变得非常的臃肿,并且显得混乱，要更改View也比较困难.所以我觉得相对MVC,MVVM可能是一种更好的选择.
基于MVC谈谈er框架
ER(Enterprise RIA) Framework 是一个富浏览器端web应用的框架，它在业务支持层面也实现了MVC封装，不过它仅适用于整站式Ajax应用。与传统MVC略有不同的是，它多了一个Action层，它介于controller与View和model之间，对模型与视图进行选择与匹配，完成用户行为的处理，当用户请求被转发给Aciton后，Action就开始了enter的运行过程，它分为两个阶段：加载model和更新View，详细过程为在触发onenter事件后对model和View进行创建，创建完触发beforemodelload事件，开始对model进行加载，加载完后触发modelloaded事件，此时就将进入视图渲染，触发beforerender事件后，开始对视图进行更新，更新完触发rendered事件，此时Action的enter运行过程已经完成，最后触发entercomplete事件。通过Action层的增加，利用那个Action来控制View和controller层的交互，减少了在View层的部门业务逻辑，也增强了可维护性，在进行对视图和数据模型整合的时候，只需加载相应的Action即可。再来看看er框架整体的流程：
- 用户行为导致location发生变化
- locator处理location变化，并转交给router
- router将请求转发给默认的controller进行处理
- controller将映射到相应的Action对象，开始执行enter
- 通过permission进行权限判断，无权限时进行location跳转
- Action负责调用model的load
- model相关数据保存在context环境中
- model向server端或者其他数据源加载数据
- Action调用View进行视图更新
- View通过模板引擎构建视图
- View调用UI Liabrary相应方法进行控件渲染
- View渲染完毕后将页面呈现给用户
- Action通过事件捕捉到用户行为，并更新model
- model发生的变化直接映射到视图
但是在MVC中要实现model和View的同步更新，需要手动写一堆事件绑定，那么如果所需要绑定的事件过多，就显得比较麻烦了，为了减少重复代码量，于是出现了MVVM
MVVM
先看一张图
从上图可以看出,它相对于MVC模式的区别是不需要通过controller手动同步model和View层,而是利用ViewmModel对View和Model进行双向绑定,这样做的优点是View和Model可以直接交互，用数据“绑定”的形式让数据更新的事件不需要开发人员手动去编写特殊用例，而是自动地双向同步,从而简化了业务与界面的依赖关系,并且还优化了数据频繁更新的解决方案。因为i饿MVVM大大减少了对dom的操作,那么对于需要频繁操作dom的情形可能就比较适合用MVVM,例如对表单的操作,由于View和model的双向绑定,用户在修改表单的时候,表单所对应的数据也就会跟着变化.由于MVVM数据的即时更新,可能会带来网络成本的提高,Web上更新数据是一个传输问题,那么如果用户是移动用户,那么必然就会造成网络传输资源的浪费,并且有可能出现网络问题.
