摘要：随着前端开发变得越来越复杂，一些基于 MVC (Model-View-Controller)模型的前端框架大量涌现。本文对当前比较流行的MVC框架Ember.js进行了大致分析。简要介绍了Ember.js的框架结构和一些核心的特性，方便前端开发者对Ember.js框架有一个初步的了解。
关键词： Ember； MVC ；前端框架
0 引言
随着用户需求的提升，Web前端的开发难度也在不断提升，各种Web开发技术随之产生。其中，传统应用软件的设计和开发模式逐渐被应用到Web前端开发。这就促生了强大的客户端JavaScript MVC框架。
MVC是当前比较流程的一种设计模式，它将应用划分为3个部分：数据（模型）、展现层（视图）和用户交互层（控制器）。它的优点是提高应用程序的可读性、可维护性和可测试性。在MVC架构中，模型负责数据处理和数据存储，应用中的所有数据对象和数据对象之间的逻辑关系都存放在模型中。视图层负责绘制前端界面并呈现给用户的，用户与应用之间的所有交互都在视图层完成。控制器在模型和视图层之间起到了一个桥梁的作用。控制器从视图层获取用户的输入和事件触发，之后按照指定的逻辑处理从模型层读取数据，然后将数据返回视图层，并更新视图[1]。
2 Ember.js概述
Ember.js起源于SproutCore框架的第二个版本，它是一个开源的JavaScript客户端框架，用于开发Web应用程序并使用MVC（模型-视图-控制器）架构模式。它借鉴了SproutCore大量的底层结构和设计，且能够让开发者以一致而可靠的模式组织JavaScript源代码，同时还保持着HTML与CSS代码的易见性。
Ember.js的设计原则是惯例优先原则，这使得开发者不必在代码结构上浪费太多时间，它会自动设备代码配置，比如自动监测路由名称及其对应的Controller。如果用户没有创建Controllrer，Ember会帮助用户自动创建。
3 Ember.js基础结构
Ember.js包含完整的MVC实现，在Ember.js中，Ember Data用作数据模型；handlebar模板作为视图，用来构建模板与视图的结合逻辑；控制器层构建路由与控制器的结合逻辑，用来处理模型中的数据。此外，Ember.js在标准MVC模型的各层之上还引入了一些额外的概念。Ember.js应用程序结构如图1所示[2]。
图1 匹配MVC模式的Ember.js结构
.png)
3.1 模型与Ember Data
Ember.js通过Ember Data来简化应用程序，其在Web应用中有效充当着缓存层的角色，服务器端加载数据到客户端时，就会向这个缓存中填充数据。
Ember Data的模型对象作为数据的类定义，负责告知Ember Data每个模型对象包含的属性、属性类型和行为。它使用DS.attr指定模型的属性。
此外，Ember Data中了内置三种定义模型关系的类型，一对一、一对多、多对多[4]。
3.2 视图与Handlebars.js
视图层负责绘制界面元素，在Ember.js中每个视图都有一个对应的控制器作为其上下文，视图通过控制器获取数据，默认情况下，都使用该控制器来处理任何对当前视图进行的用户操作。Ember.js默认使用Handlebars.js作为它模板引擎，通过Handlebars.js模板定义用户界面，一个视图使用一个模板来渲染。
Handlebars.js模板除包含常规的静态HTML标记以外，还提供了非常丰富的表达式，用户可以在Handlebars.js模板中添加表达式。底层数据如果发生改变时，模板中的表达式便会实时更新。Handlebars.js通过闭合的双重花括号来标识表达式，表达式既可以是代表动态值的简单表达式，也可以是只包含逻辑的块表达式。
Ember.js除了包含Handlebars.js中内置的一些常用块表达式以外，还扩展了一些Handlebar.js表达式。此外，Ember.js还支持创建自定义表达式。
3.3 控制器与Ember路由器
控制器主要是为了维持当前路由状态。一般来说，Model的属性会保存到服务器，但是controller的属性却不会保存到服务器。组件上的动作需要通过controller层转到route层。
路由器是Ember.js的核心特性。它用于将URL转换为一系列模板，并且还表示应用程序的状态。通过路由器，Ember.js可以将应用程序的不同逻辑状态分割开来，并支持应用程序在不同的状态之间进行导航。Ember.js利用路由器实现了更新应用程序URL并监听URL变化的机制。路由器根据用户访问的URL，将其匹配到对应的路由，然后加载相应的数据并渲染器对应的视图模板。Ember路由器可以从一个路由转换到另一个路由，路由也可以由子路由组成。
Ember路由器使用路由名称来决定路由、控制器及视图的默认类名称。基于此命名规则，如果路由命名为User，Ember.js将查找名称分别为UserRoute、UserController以及UserView的类。
4 Ember.js核心特性
Ember.js的核心特性主要包含：绑定、计算属性、观察者模式、
绑定是Ember.js的一个强大功能，它有助于在两个属性之间创建链接，如果其中一个属性更改，另一个属性会自动更新。Ember.js的数据绑定方式包含单向和双向。单向绑定实现当变量A发生改变时，同步更新变量B。双向绑定实现A发生改变时，同步更新B，同时B发生改变时，也会同步更新A。Ember.js将双向绑定作为它的默认绑定方式。
计算属性就是将函数声明为属性，Ember.js在需要时自动调用计算的属性。计算属性最大的特点就是能自动检测变化，及时更新数据。由于Ember.js将计算属性看作其真正的属性，因此可以在计算属性上调用get()和set()等方法。
Ember可以察觉所有属性的变化，包括计算属性。在Ember.js里，一个观察者就是一个JavaScript函数，无论其观察的变量何时更新，都会触发该函数的调用。在绑定较难实现或者希望在某个值发生改变时执行某个任务的场景中，比较适合使用观察者模式[3]。
自动更新模板，无论底层数据何时更改，Ember始终确保界面处于最新状态。
5 小结
本文简要介绍了前端框架Ember.js，Ember.js用于组织大型Web应用代码结构。与其他流行的JavaScript应用框架相比，它具有更完整的MVC模式特征。它的惯例优先原则、框架结构和一些核心特性为开发者省去了很多不必要的开发工作，能够使开发者专注于编码效率。
参考文献
[1] 李红. 主流Javascript框架比较与分析[J]. 鞍山师范学院学报,2015,17:40-47
[2] 卢俊祥. Ember.js实战[M].北京:人民邮电出版社，2015
[3] Ember.js官网[EB/OL]. http://emberjs.com