作者：[挪]乔基姆·哈根·斯基（Joachim Haagen Skeie）
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Ember.js实战试读：
前言
2006年起，我已经以某种方式进行Web应用开发。我开始为挪威最大的零售商开发Web应用，先是使用JavaServer Pages（JSP）技术，之后换成JavaServer Faces（JSF）。当时这些技术很不错，并能让使用者达到使用目的。在那时（Ajax流行之前），HTTP的请求-响应周期要求将大多数处理逻辑放在服务器端，服务器端在每次请求中传递所有标记、脚本和样式表给浏览器。
虽然以服务器端方式开发Web应用也能行之有效，但状态问题总是绕不开的。由于服务器端要求记住所有登录用户，管理状态很快就成为一个棘手而占用大量内存的任务。要如何处理用户打开多个标签页并在彼此间进行切换？跨多个（虚拟）机器延展服务的时候如何持久化会话数据？如果在服务器端存储用户状态，那又如何以一致方式方便地进行水平扩展？处理起来真不容易。
当我开始从事开源项目Montric（那时叫EurekaJ），我很快决定，如果想要在不借助独立的会话缓存的情况下水平扩展应用，我就得掌握一个具备良好前景和流行度的JavaScript框架。
我评估了多个框架，并用Cappuccino（www.cappuccino-project.org）和SproutCore（http://sproutcore.com）这两个框架搭建了原型。虽然Cappuccino的工具比较完整，而且提供了更细致好看的用户界面，我还是选择了一个SproutCore，因为它可以让我使用既有技术积累，它还承诺可以跟第三方库方便结合。SproutCore提供了更强大的视图，其组件方式可以最终组建出一个完整功能的Web应用。以组件为基础，使用服务器端框架，这些特性让我对SproutCore倍感亲切。但经历了最初的喜悦之后，我发现将第三方库集成到SproutCore并不简单。
随着SproutCore开发团队被收购以及该框架放慢了发展脚步，SproutCore社区开始发生了变化，SproutCore 2.0版进展顺利，但老版本与新版本间的裂痕却在扩大，最终，SproutCore产生了一个新的分支——Ember.js。
Ember.js依托能够提供优良Web体验的技术而打造，它能够帮助开发者使用既有技能组合开发JavaScript应用程序。Ember.js并不抽象或隐藏JavaScript、HTML或者CSS的实现细节，反而与时俱进地充分利用这些技术。
不用说，我肯定是跟随Ember.js，并且决定用Ember.js重写EurekaJ的前端部分。在此期间，我把项目改名为Montric（http://montric.no）。从那时起，我就一直使用Ember.js。在v1.0.0预览版发布期间，Ember.js社区的发展也经历了起浮。那时频繁调整API，感觉每周都在重新考虑和审视概念，但随着问题被逐步解决，思路也越来越明晰。在预览版时就决定写一本全面介绍Ember.js的图书，但对于这个想法我确实还有顾虑。
在我写作过程中，Ember.js v1.2.0也发布了，API变得稳定了，整个项目健康发展。今天，Ember.js已经成为一个了不起的框架，能够帮助你创建极具挑战的Web应用。第一部分Ember.js基础
JavaScript MVC框架Ember.js用于组织大型Web应用代码结构。与其他流行的JavaScript应用框架相比，其具有更完整的MVC模式特征，并包含创建新一代Web应用所需特性。它自信满满，严格依赖约定优于配置的设计范式来构造应用程序。
由于包含大量特性及应用约定，Ember.js的学习曲线比较陡峭。本书第一部分包含4章内容，帮你尽快找到Ember.js开发的感觉，并确保你从一开始就能有所成。
前两章重点介绍Ember.js常用核心特性。第3章介绍Ember路由器，第4章聚焦于为Ember程序员遴选的模板库Handlebars.js。第1章 发力雄心勃勃的Web应用
本章涵盖的内容
单页面Web应用概述（Single-page Web Application，SPA）
Ember.js介绍
Ember.js为Web开发者带来了什么
第一个Ember.js应用程序
本章介绍Ember.js应用框架，以及Ember.js生态系统的大量特性和技术。大多数主题将在后续章节具体展开。你还将快速了解Ember.js应用的轮廓及其优势。
同时，本章也会介绍如何构建Ember.js应用，其间将涉及Ember.js框架的不同方面。如果一开始你不太理解某些代码，请别担心！所有的这些开发代码都会在后面一步步具体展开。
如果你已习惯开发服务器端技术驱动的Web应用，掌握Ember.js可不是轻松的事情。本章代码示例和记事本应用将涉及构建Ember.js应用的各种概念。
Ember.js的结构以一系列基础库为基础。书中各章开始处都会提供一张图，展示各个基础库并高亮显示各章涉及的内容。本章就会接触到许多Ember.js基础库，如图1-1所示。图1-1 Ember.js内部结构1.1 Ember.js适用场景
像《纽约时报》网站或苹果公司网站这样的内容服务网站以传统的HTTP请求-响应生命周期为基础，在服务器端渲染大部分的HTML、CSS和JavaScript代码。如图1-2左半部分所示，对于每个请求，服务器端都会生成网页标记全新而完整的复本。图1-2 Ember.js框架支持各种Web应用
另一种技术是富互联网应用（RIA），诸如Google地图、Trello以及某种程度上的GitHub。这些网站的目标就是重新定义应用类型，在客户端渲染大部分内容，以与原生安装应用竞争。如图 1-2 右半部分所示，应用在第一次请求发生时，服务器端做出响应，将完整的应用（HTML、CSS以及JavaScript）一次性传送给客户端。对于随后请求将只返回显示下一页面所需的数据。
两种技术的优缺点展示在图示的两端。左边描述的页面很容易被服务器端缓存，但其依赖请求-响应生命周期模式，而且为了响应用户动作必须整页刷新。
图示右半部分拥有典型的富用户界面，提供了更好的用户体验，并与大家所熟知的原生应用相似，但实现起来也更复杂，需要浏览器软件提供更多的计算能力、新特性以及稳定性。
单页面应用（SPA）越来越流行，因为RIA——尤其是SPA——更像是原生安装应用，其具有更加响应式的用户界面、少量或局部的页面刷新。在这个领域，Ember.js的目标是成为Web应用开发者的最佳框架解决方案，并将Web应用效果发挥到极致。例如，Ember.js非常适合请求长时用户会话、需要富用户界面以及基于标准Web技术等各类场景。
如果打算创建图示右半部分风格的应用，那么，Ember.js正是为此打造的。Ember.js还有助于思索如何构建应用。它提供了创建丰富Web应用程序的强大工具，让你的创意发挥到极致，同时提供一系列丰富特性以构建真正雄心勃勃的Web应用程序。
在开发Ember.js应用程序之前，先来讨论一下为什么我们一开始就选择象Ember.js这样的框架，以及Ember.js提出要解决的问题。1.2 从静态页面到Ajax、再到全功能Web应用
从20世纪90年代中期引入万维网（WWW或W3），到21世纪00年代中期Ajax出现之前，大多数的网站本质上是静态网站。服务器端通过一个HTTP响应来应答所有HTTP页面请求，该响应包含了显示一个完整页面所需的全部HTML、CSS和JavaScript代码，如图1-3左半部分所示。图1-3 早期Web结构（左边）与Ajax Promise模式（右边）的比较
虽然许多网站仍然如图1-3左半部分所示那样，依赖于整页刷新的方式，但越来越多的开发者都在创建动态内容。今天，用户希望在体验网站时能够做到页面不要刷新。1.2.1 异步Web应用的兴起
随着异步调用功能的引入，其提供了为每个响应发送特定内容的能力。客户端有专门接受这个响应的JavaScript代码，并会替换网站中所有相关的HTML元素内容，如图1-3右半部分所示。这看起来很好，但这种方式存在一个很大的问题。
在服务器端实现一个服务是很容易的事情：给出一个元素类型，呈现元素的新内容，并以原子级的完整方式返回给浏览器。如果这就是富Web应用用户所需，那就没那么多麻烦了。但问题是用户极少一次只更新一个元素。
比如，当你浏览在线商店的时候，会搜索商品项并将其添加到个人的购物车中。但添加一项商品到购物车时，你理所当然希望商品数量以及购物车商品总金额也相应更新。这样你才知道购物车里的商品总数以及总金额到底有多少。
由于服务器端在每个Ajax响应中应该明确包含哪些元素的规则很难定义，大多数服务器端框架都直接发送整个页面给客户端。同时，客户端知道应该用哪个元素替换/互换对应的HTML元素。
如你猜到的，这种方式效率很低，其意味着增加了大量客户端发送到服务器端的HTTP请求，而这正是Ember.js的用武之地。作为一名开发者，你或许理解图1-3所示模型的问题所在，服务器端为页面上单个元素返回更新过的标记，而要更新多个元素，你就需要采取以下的某种方式。
要求浏览器为每个要更新的元素触发额外的Ajax请求。
时刻记住——同时在客户端和服务器端——针对用户在应用中执行的每个操作，都要相应更新元素。
第一种方式增加了HTTP调用服务器端的次数；第二种方式需要你在客户端和服务器端同时管理用户状态。因此，这大大增加了HTTP请求的次数，导致服务器端负担加重，但又无法减少服务器端处理每个请求的工作量。别误解了，这种模型下，通过判断元素标识符来替代元素，以及挑选出服务器端所返回完整标记中的特定元素，是可以支持局部页面更新的。但如你所想，这种模式同时浪费了服务器端和客户端的资源。图1-4说明了这种结构。图1-4 服务器端框架结构
理想情况下，我们希望只在初始时服务器端将完整应用一次性传送给客户端。当整个应用加载后，客户端只需提交数据请求。伴随这种想法让我们进入Ember.js使用的模型。1.2.2 Ember.js模型
以往，大多数网站忽视在服务器端与客户端间传递标记，而更关注数据传递。这正是Ember.js擅长的领域，如图1-5所示。图1-5 现代Web应用模型
在图1-5中，用户在初次请求发出后一次性接收完整的网站。这将导致两件事情发生：增加初次加载的时间，但也意味着随后每次用户操作时性能得到提升。
实际上，图1-5所示的模型与可追溯到20世纪70年代的传统客户端/服务器端模型类似，但有两个重要的区别：初始请求充当客户端应用程序高度可行且可定制的分发渠道，同时确保所有客户端遵循一套通用的 Web 标准（HTML、CSS、JavaScript和其他）。
随着客户端/服务器端模型提出，涉及用户交互的业务逻辑、GUI（图形用户界面），以及执行逻辑已从服务器端转移到了客户端来处理。对特定部署而言这种转移会带来一定的安全问题，但在通常情况下，只要服务器端控制着所请求数据的访问权，安全事宜就可以委托给所属的服务器。随着客户端和服务器端职责的清晰分离，客户端和服务器端就可以各司其职——分别关注用户界面和数据处理。
现在你理解了通过Ember.js创建的Web应用程序的类型，接下来将进入到Ember.js内部。1.3 Ember.js概览
Ember.js起源于SproutCore框架的第二个版本。在SproutCore 2.0开发期间，SproutCore团队成员已经清楚地认识到，如果想要创建满足目标广泛的Web应用程序的需要，并且体积还保持小巧的易用框架，SproutCore框架的底层结构就需要有个根本改变。SproutCore简介SproutCore是一个用高度面向组件编程模型开发出来的框架。SproutCore的大多数概念都是从Apple的Cocoa借鉴来的，而Apple也使用SproutCore 来构建它的一些Web应用（MobileMe和iCloud）。同时，Apple还贡献了大量代码给SproutCore项目。2011年11月，Facebook得到了该项目团队并负责维护SproutCore。
最后，核心团队的部分成员决定从SproutCore分离出来，创建一个新的框架来实现这些改变。
Ember.js借鉴了SproutCore大量的底层结构和设计。但SproutCore为了创建桌面风格的应用程序，通过对开发者隐藏大部分实现细节来费力提供端到端解决方案，与此不同，Ember.js力求让开发者明白HTML和CSS才是开发栈里的核心。
Ember.js的优势在于能够让你以一致而可靠的模式组织JavaScript源代码，同时还保持着HTML与CSS代码的易见性。此外，不强制依赖特定工具来开发、构建及装配应用程序，给开发者更多的选择控制权来组织开发过程。在装配及打包应用程序时，有许多可靠的工具供选择。第11章将介绍一些有效的打包选项。
你迫不及待地想开始Ember.js编码了？但在创建你的第一个Ember.js应用程序之前，还是先来了解下Ember.js及其应用结构吧。1.3.1 Ember.js特性①
按照Ember.js官网上的说法，Ember.js是一个帮助你构建“雄心勃勃”Web应用的框架。“雄心勃勃”这个词对不同的人可能有不同理解，但有一点是众所周知的，Ember.js的目标是挑战Web开发的极限，同时确保源代码的结构化和健壮性。
Ember.js将应用结构封装为逻辑抽象层，并强制尽可能采用面向对象开发模式，以达成其目标。其内置支持以下核心特性。
绑定——双向绑定的变量值将相互影响和更新。
计算属性——将方法标识为属性，并自动随其所依赖属性变化而更新。
自动更新模板——无论底层数据何时更改，始终确保界面处于最新状态。
将以上特性与强大而优良的MVC架构结合起来，你就获得了一个众望所归的Ember.js框架。1.3.2 Ember.js应用程序结构
如果你曾经花费了大量时间通过服务器端生成标记及JavaScript代码来开发Web应用程序，Ember.js——一个全新亮相的JavaScript框架——其应用结构完全不同于旧有做法。
Ember.js包含了完整的MVC实现，MVC架构强化了控制器层和视图层。随着本章内容的推进，我们将涉及更多的MVC实现细节。
控制器层——构建路由与控制器的结合逻辑。
视图层——构建模板与视图的结合逻辑。
注意第5章介绍的Ember Data，将充当Ember.js的模型层。
构建Ember.js应用程序时，开发者会对应用按一致而结构化的原则进行划分。可以花点时间考虑下放置应用逻辑的最佳位置。尽管这种方式要求在编码之前先仔细思考，但却能保证产品最终具有更好的结构，也就意味着程序易于维护。
大多数情况下，你将遵循Ember.js的指导原则和约定惯例，但有些情况下还需要花一些时间采取特别的方式来实现更复杂的应用功能。
如图1-6所示，Ember.js在标准MVC模型的各层之上引入了额外的概念，本书前5章会介绍这些概念。图1-6 Ember.js结构及如何匹配MVC模式
记住这张图，我们来具体了解一下每个MVC组件。1．模型与Ember Data
在图1-6的底部，Ember.js通过Ember Data来简化应用程序，Ember Data提供了创建富Web应用所需的大量数据-模型特性，其描绘了一种跟服务器端通信的可行实现方式。其他库也具备这种功能，你可以编写或引入你自己的客户端-服务器端通信层。Ember Data将在第5章中详细介绍，并在第6章介绍如何整合你自己的数据层。
模型层通常以半严格模式指定的方式来保存应用数据。模型层负责服务器端通信以及模型特有任务如数据转换。视图可以通过控制器绑定界面组件到模型对象属性。
Ember Data在模型层发挥作用，用来定义模型对象和客户端到服务器端的API，以及Ember.js与服务器端的传送协议（jQuery、XHR、WebSockets及其他）。2．控制器与Ember路由器
在模型层之上是控制器层。控制器的主要作用是担当模型与视图之间的纽带。Ember.js附带了几个自定义控制器，最主要的是Ember.ObjectController和Ember.ArrayController这两个控制器。通常，当控制器描述单一对象时（如选择一条事项）使用ObjectController；而在控制器描述项目数组时（如列出当前用户所有有效事项）使用ArrayController。
在此之上，Ember.js通过路由器把应用程序分割为清晰界定的逻辑状态。每个路由可以有多个子路由，使用路由器在应用程序的不同状态间导航。
Ember路由器同时也是Ember.js用于更新应用程序URL以及监听URL变化的机制。使用Ember路由器的时候，将以类似状态图的层级结构来模型化所有应用状态。第3章将涉及Ember路由器的内容。3．视图与Handlebars.js
视图层负责绘制界面元素。视图通常不保存自身永久状态，但也有极少例外。默认情况下，Ember.js中的每个视图都有一个对应的控制器作为其上下文。视图通过控制器获取数据，默认情况下，使用这个控制器来处理任何对该视图进行的用户操作。
同样是在默认情况下，Ember.js使用Handlebars.js作为其模板引擎。所以，大多数Ember.js应用程序通过Handlebars.js模板来定义用户界面。一个视图使用一个模板来渲染。第4章会介绍Handlebars.js和模板。Handlebars.jsHandlebars.js基于Mustache，包括JavaScript在内的许多编程语言中都能看到无逻辑模板库Mustache的应用。Handlebars.js在Mustache之上添加了逻辑表达式（if、if-else、each等）。这样，随着可以将模板绑定到视图与控制器的属性上，开发者就能够为Ember.js应用构建逻辑清晰且可定制的结构化模板。
Ember.js附带了支持HTML5基本元素的默认视图，在处理简单元素时这些视图是非常合适的。而在构建Web应用复杂元素时，无论是扩展还是结合标准Ember.js视图，都能够很容易地创建出属于自己的自定义视图。
现在你了解了Ember.js应用程序结构，接下来开始编写你的第一个Ember.js应用。1.4 第一个Ember.js应用程序：记事本应用
记事本应用大约有200行程序代码（包括模板和JavaScript代码）以及130行CSS代码。你完全可以在Windows、Mac以及Linux等各种操作系统上使用你喜爱的编辑器来开发并运行这个应用。提示我使用JetBrains WebStorm来编写JavaScript应用，但这对你来说不是必需的。
你将通过编写一个简单的记事本Web管理应用来一探Ember.js。该应用功能如下。
添加新事项——应用提供了用户添加事项的专用区域。
选择、查看及编辑事项——界面左边显示事项列表。用户一次选择一个事项，并可在右边查看、编辑内容。
删除已有事项——用户可以删除所选事项。
该应用设计轮廓如图1-7所示。图1-7 记事本应用的设计及布局
开始之前请下载以下各个库。取决于Ember.js当前版本，所需各个库的版本可能会有所不同。
Ember.js 1.0.0
Handlebars.js 1.0.0
jQuery 1.1x
Twitter Bootstrap CSS
Twitter Bootstrap Modal
Ember Data 1.x Beta版
Ember Data Local Storage Adapter可选项：从头开始或者从GitHub获取代码从头开始。（1）在硬盘里创建目录，用以存储所有应用文件。（2）目录结构如下所示。从GitHub获取代码：如果想要获取打包整理好的源代码，请通过 GitHub 仓库的链接https://github.com/joachimhs/Ember.js-in-Action-Source/tree/master/chapter1下载或复制，该内容是第2章结束之时的源代码。
设置完毕，请打开index.html文件。1.4.1 记事本应用开发起步
在index.html中加载应用依赖的各个程序文件，如代码清单1-1所示。代码清单1-1 在index.html文件里加载依赖文件
这段程序足以作为开发记事本应用的起点。模板的放置位置简单起见，可以在index.html中放置所有的应用模板。这将简化设置操作，并便于开始新的Ember.js应用。一旦应用规模增长了，通常需要通过构造工具提取模板到独立的文件中，构造工具将在第11章介绍。
在大多数用于生产的 Ember.js 应用程序中，代码清单 1-1 中的代码就是将始终放在index.html文件里的所有代码。这可能跟以往的Web开发方式不尽相同，如我接触Ember.js之前的经历。除非开发者特别指定，默认情况下Ember.js应用程序将把内容放置在HTML文档的
标签里。这段代码里并没有什么特别的。文档一开始定义了doctype类型，之后定义HTML元素——先是定义标准的
元素。在元素中，设置页面标题，并加载Twitter Bootstrap CSS和应用所需的自定义CSS。标签里的试读结束[说明：试读内容隐藏了图片]