Web端功能的日益复杂

随着Web端功能的日益复杂，人们开始考虑这样一些问题：

如何更好地模块化开发，业务数据如何组织，界面和业务数据之间通过何种方式进行交互

在这种背景下，出现了一些前端MVC、MVP、MVVM框架，我们把这些框架统称为MV框架。这些框架的出现，都是为了解决上面这些问题，具体的实现思路各有不同，主流的有Backbone，AngularJS，Ember，Spine等等，本文主要选用Backbone和AngularJS来讲述以下场景。

1. 数据模型

在这些框架里，定义数据模型的方式与以往有些差异，主要在于数据的get和set更加有意义了，比如说，可以把某个实体的get和set绑定到RESTful的服务上，这样，对某个实体的读写可以更新到数据库中。另外一个特点是，它们一般都提供一个事件，用于监控数据的变化，这个机制使得数据绑定成为可能。在一些框架中，数据模型需要在原生的Java类型上做一层封装。defaults方法用于提供模型的默认值，initialize方法用于做一些初始化工作，这两个都是约定的方法，toggle是自定义的，用于保存todo的选中状态。除了对象，Backbone也支持集合类型，集合类型在定义的时候要通过model属性指定其中的元素类型。

如果你想学习一门IT技术，并希望从web前端开发这个最基础的编程技术入门。你可以来这个裙。前面是六 ⑤ 7，中间是1 三 7 ，后面是九 O 六。在这里有最新的web前端开发技术课程，免费学习。也有很多人指导你进步，不需要你付出什么，只要你有一颗学习的心就可以了。不愿意认真学习或者自认为不需要学习的就不要加了！

数据模型也可以包含一些方法，比如自身的校验，或者跟后端的通讯、数据的存取等等，在上面两个例子中，也都有体现。AngularJS的模型定义方式与Backbone不同，可以不需要经过一层封装，直接使用原生的Java简单数据、对象、数组，相对来说比较简便。

2. 控制器

在Backbone中，是没有独立的控制器的，它的一些控制的职责都放在了视图里，所以其实这是一种MVP(Model View Presentation)模式，而AngularJS有很清晰的控制器层。

还是以这个todo为例，在AngularJS中，会有一些约定的注入，比如$scope，它是控制器、模型和视图之间的桥梁。在控制器定义的时候，将$scope作为参数，然后，就可以在控制器里面为它添加模型的支持。

3. 视图

在这些主流的MV框架中，一般都提供了定义视图的功能。也有那么一些视图，需要依赖于界面上的已有元素，比如下面这个，它通过el属性，指定了HTML中id为todoapp的元素，并且还在initialize方法中引用了另外一些元素，通常，需要直接放置到界面的顶层试图会采用这种方式，而“部件”视图一般由主视图来创建、布局。改变模型可以随时反映到界面上在界面上做的操作(输入，选择等等)可以实时反映到模型里。而且，这种绑定都会自动忽略其中可能因为空数据而引起的异常情况。

4. 模板

模板是这个时期一种很典型的解决方案。我们常常有这样的场景：在一个界面上重复展示类似的DOM片段，例如微博。但是使用模板技术，这一切可以更加优雅。

主流的模板技术都提供了一些特定的语法，有些功能很强。值得注意的是，他们虽然与JSP之类的代码写法类似甚至相同，但原理差别很大，这些模板框架都是在浏览器端执行的，不依赖任何服务端技术，即使界面文件是.html也可以，而传统比如JSP模板是需要后端支持的，执行时间是在服务端。