《Ember.js實戰》——1.3 Ember.js概覽

本節書摘來自異步社群《ember.js實戰》一書中的第1章，第1.3節，作者：【挪】joachim haagen skeie（喬基姆•哈根•斯基）著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

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章會介紹這些概念。

記住這張圖，我們來具體了解一下每個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.js

handlebars.js基于mustache，包括javascript在内的許多程式設計語言中都能看到無邏輯模闆庫mustache的應用。handlebars.js在mustache之上添加了邏輯表達式（if、if-else、each等）。這樣，随着可以将模闆綁定到視圖與控制器的屬性上，開發者就能夠為ember.js應用建構邏輯清晰且可定制的結構化模闆。

ember.js附帶了支援html5基本元素的預設視圖，在處理簡單元素時這些視圖是非常合适的。而在建構web應用複雜元素時，無論是擴充還是結合标準ember.js視圖，都能夠很容易地建立出屬于自己的自定義視圖。

現在你了解了ember.js應用程式結構，接下來開始編寫你的第一個ember.js應用。