Ember.js MVC

开发 前端 架构
Ember.js 框架使用模型-视图-控制器(MVC)模式的应用架构。许多其它框架和平台也 使用这个模式,所以你可能会听说过。虽然这些概念一直是跨平台的,但实现可能会有 相当大的差异。因此,理解 Ember.js 的 MVC 实现与你熟悉的 MVC 实现有何不同是很 重要的。

Ember.js 框架使用模型-视图-控制器(MVC)模式的应用架构。许多其它框架和平台也 使用这个模式,所以你可能会听说过。虽然这些概念一直是跨平台的,但实现可能会有 相当大的差异。因此,理解 Ember.js 的 MVC 实现与你熟悉的 MVC 实现有何不同是很 重要的。

MVC 基础

MVC 模式的目的是分离出关键问题,这样,对象的测试、维护和重用会更容易。

模型 是存放最多应用数据的地方。模型通常是预先指定的,用模式或其它类型的模 板来形式化和优化数据存储和检索。它通常被实现为一个数据类型、类或是数据库表的 形式。一个木星的例子可以是一个 User ,它由 usernamepassword 两个字 符串字段构成。可以创建并存储许多 User 对象,并且它们通常不负责任何应用逻辑 。

视图 描述各种各样应用组件(通常是 模型 的一部分)的表现。视图是用户能看 得见并与应用交互的部分。它们可以服从给定系统中任何可行的样式化,并且不保持永 久的状态。有许多标记语言(比如 HTML/CSS)和模板语言(比如 Handlebars)可用于 编写视图。视图的一个例子可以是一个用户编辑页面的模板,它包含处理创建并样式化 标签和编辑用字段的代码。

控制器 承担连接起 模型视图 的任务。它提供应用的业务逻辑,从视图中 接受输入并在模型上执行 CRUD 操作。一个控制器会从视图对象中提取用户名和密码, 并与模型对象比较它们,用下一个显示登入状态的视图(也可能是别的什么)替换当前 的视图。

Ember.js 实现

Ember 提供了多种对象来奠定轻松实现 MVC 功能的基础。例如:

  • DS.Model 允许你描述你的应用的数据结构,包括模型之间的关系。
  • Ember.View 封装 HTML 模板,让你写出可重用、易于维护的应用视图。
  • Ember.ArrayController 使得管理对象列表易如反掌,提供了在内容中迭代的便利方法。
  • Ember.js 也添加了一种重要的新架构:一个可以在视图、控制器和数据存储间调停 的状态管理器。它可以作为你的应用的映射,并把转换处理为一个用户经过它。

所有这些对象都继承自 Ember.Object ,它提供了诸如绑定支持、观察者、计算属性 和继承这样的绝妙特性。

与 Ruby on Rails 的区别

一个很普遍的误解就是 Ember.js 的 MVC 实现一定与 Ruby on Rails 的相似。这是不 正确的。

这个区别的原因就是 Ruby on Rails 是一个服务端框架,而 Ember 是一个客户端框架 。[1]

Ember 在浏览器中运行,所以它可以检测并相应浏览器事件,诸如鼠标点击、手指点 击、滚动、按键等等。接收这些事件的视图对象可以把它们呈递给控制器对象,而控制 器对象可以作用于数据模型来保存变更。客户端发生的一切都在浏览器中,并且 ember-data 关注发送或接受去往或来自服务器 API 的合适数据。

Ember.js MVC Diagram

另一方面,Rails 运行在服务器上。照此,它只能通过 HTTP 请求与客户端通信。服务 器接受 HTTP 请求作为输入(GET /、POST /user/1 等等),读取路由并把它映射到控 制器行为,而不是直接从用户接收事件。控制器之后会用模型和视图模板来构造一个响 应(通常是一个 HTML 文档形式的)来用 HTTP 返回。用户总是与一个基本上扁平,基于用户请求的要求组合的页面交互。

Rails MVC Diagram

在构建你的应用程序架构时,牢记这些差异是很重要的。

[1] 虽然在服务器端运行 Ember.js 是可行的,但这超出了本指导的范 畴。

原文链接:http://emberjs.torriacg.org/guides/ember_mvc/#toc_ember-js

责任编辑:陈四芳 来源: emberjs.torriacg.org
相关推荐

2013-12-24 11:11:27

ember.jsJavascript

2013-12-24 16:03:26

Ember.js视图

2013-12-24 14:50:39

Ember.js框架

2013-12-20 14:47:23

ember.js

2013-09-10 14:01:40

WebEmber.jsAngular.js

2016-11-14 15:51:42

JavaScriptAngular.jsReact.js

2013-05-30 15:16:26

javaScriptMVC模式

2013-10-16 10:11:35

JavaScript项目框架

2014-03-13 11:22:00

JavaScriptJS框架

2013-12-25 09:53:22

Ember.js应用

2013-12-25 10:08:42

ember.js异步处理

2013-12-24 13:20:28

EmberEmber.js

2012-02-09 16:09:17

JavaScript

2012-10-18 10:15:50

IBMdw

2013-03-21 13:56:21

JavaScriptBackBone

2015-05-05 11:12:50

JavaScriptMithril.js

2017-06-28 08:31:11

Node.jsMVC微服务

2015-02-09 10:43:00

JavaScript

2023-03-15 08:03:31

2015-06-23 16:42:21

点赞
收藏

51CTO技术栈公众号