Front

初学前端的MVC架构

Web应用的功能越来越强,Javascript代码也越来越多,大量的JS代码要以何种架构来组织就成了一个亟待解决的问题。老牌软件架构模式MVC(Model-View-Controller)就是一种相当不错的方案,虽然它定义不明确需要很多时间来思考如何组织,崇尚代码分离增加了调试难度,但毕竟脸熟(……),从用CakePHP的时候就接触过这个概念,以我能理解的方式描述就是:Models用来处理数据,View将处理结果呈现给用户,Controller用来连接这两者。所以一个Web应用的流程通常是这样的:

  • 1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮
  • 2. Controller处理这个动作
  • 3. Controller通过Model对数据进行增删改查,将其传递到View
  • 4. View将数据展示给用户

以上描述来自Javascript Web Applications一书,其中有用MVC组织JS代码的具体方法。如果想偷懒的话,也有一些现成的JS框架来做这件事。说到JS框架可能最先想到的是jQuery,这类MVC框架和jQuery解决的问题不同,jQuery主要用来对页面元素进行操作上,比如我要移动一个按钮,或是将某个按钮设置为隐藏。而前端MVC框架除了将代码合理的组织以外,操作上也不是侧重于设置一个动作,当触发时进行某些处理这种方式。而是绑定Model,当Model改变时,View接收到通知,重新渲染。不需要手动指定页面元素更新HTML,改变Model时直接改变View。

Backbone

因为豆瓣说用的是Backbone,加上有37signal的背景,这个框架在国内颇有知名度,最先接触到的就是它了。Backbone的MVC是Models, Views, Collections。Models用于绑定键值数据和自定义事件;Collections提供API;Views声明事件处理函数,并通过RESRful JSON接口连接到应用程序。

Backbone将代码组织得很清晰,都扩展自它的MVC结构,例如:

Backbone官方提供了很多例子,但没有具体的教程,我最后是看了这篇教程才弄懂了大致的写法,上面的代码也主要来自这篇教程。

KnockoutJS

KnockoutJS简称KO,这个框架的教程做得非常好,所以学起来比Backbone容易很多。

KO是以MVVM(Model-View-View Model)的形式来组织代码的,比较有趣的是它的绑定方式,不是先获得元素再使用bind,而是直接把bind写在属性里,例如:

比如要把Model-View里的数据,传递到View中,当改变时临时更改

Afterword

这两个框架我现在了解得都不够深,很多函数还没用到。Backbone对代码的组织很清晰,需要依赖jQuery和Underscore,学起来比较费劲。KO框架的教程远比Backbone详细,不依赖其他框架,只是每个标签里都得加个bind-data的属性还是挺麻烦的。总之先用空余时间做个实际的小项目,具体用哪个框架得看之后具体遇到的问题了。

2 thoughts on “初学前端的MVC架构”

Leave a Reply

Your email address will not be published. Required fields are marked *