EmberJS 快速指南

上一頁
下一頁

EmberJS - 概述

什麼是 Ember.js？

Ember.js 是一個開源的、免費的 JavaScript 客戶端框架，用於開發 Web 應用程式。它透過提供包含資料管理和應用程式流程的完整解決方案，允許構建客戶端 JavaScript 應用程式。

Ember.js 的原始名稱是 SproutCore MVC 框架。它由 Yehuda Katz 開發，並於 2011 年 12 月 首次釋出。Ember.js 的穩定版本是 2.10.0，於 2016 年 11 月 28 日釋出。

為什麼選擇 Ember.js？

請考慮以下幾點，以瞭解 Ember.js 的用途：

  • Ember.js 是一個在 MIT 許可下的開源 JavaScript 框架。

  • 它使用 HTMLBars 模板引擎（Handlebars 模板引擎的超集）提供新的繫結語法。

  • 它提供 Glimmer 渲染引擎以提高渲染速度。

  • 它提供 命令列介面 (CLI) 實用程式，可將 Ember 模式整合到開發流程中，並輕鬆關注開發人員的生產力。

  • 它支援 資料繫結，以建立兩個屬性之間的連結，當一個屬性更改時，另一個屬性將使用新值進行更新。

Ember.js 的特性

以下是 Ember.js 的一些最突出的特性：

  • Ember.js 用於建立可重用且易於維護的 JavaScript Web 應用程式。

  • Ember.js 以 HTML 和 CSS 為開發模型的核心。

  • 它提供例項初始化器。

  • 路由是 Ember.js 的核心特性，用於管理 URL。

  • Ember.js 提供 Ember 檢查器工具用於除錯 Ember 應用程式。

  • Ember.js 使用模板，如果應用程式的內容發生更改，則有助於自動更新模型。

EmberJS - 安裝

在您的系統中配置 Ember.js 很容易。透過使用 Ember CLI（命令列介面）實用程式，您可以建立和管理您的 Ember 專案。Ember CLI 處理各種應用程式資產管理，例如連線、縮小和版本控制，並提供生成器來生成元件、路由等。

要安裝 Ember CLI，您需要具備以下依賴項：

  • Git - 它是一個開源版本控制系統，用於跟蹤對檔案所做的更改。有關更多資訊，請檢視 git 的官方網站。Ember 使用 Git 來管理其依賴項。

  • Node.js 和 npm - Node.js 是一個開源的，用於開發伺服器端和網路應用程式。它是用 JavaScript 編寫的。NPM 是一個節點包管理器，用於安裝、共享和管理專案中的依賴項。Ember CLI 使用 Node.js 執行時和 npm 來獲取依賴項。

  • Bower - 它用於管理元件，例如 HTML、CSS、JavaScript、影像檔案等，可以使用 npm 安裝。

  • Watchman - 此可選依賴項可用於監視檔案或目錄，並在它們更改時執行某些操作。

  • PhantomJS - 此可選依賴項可用於執行基於瀏覽器的單元測試以與網頁互動。

安裝 Ember CLI

Ember CLI 將 Ember 模式整合到開發流程中，並輕鬆關注開發人員的生產力。它用於使用 Ember.js 和 Ember 資料建立 Ember 應用程式。

您可以使用 npm 安裝 Ember，如下面的命令所示：

npm install -g ember-cli

要安裝測試版，請使用以下命令：

npm install -g ember-cli@2.10

要檢查 Ember 的安裝是否成功，請使用以下命令：

ember -v

執行上述命令後，它將顯示類似以下內容：

ember-cli: 2.10.1
node: 0.12.7
os: win32 ia32

EmberJS - 核心概念

Ember.js 具有以下核心概念：

  • 路由器
  • 模板
  • 模型
  • 元件
Emberjs Core Concepts

路由器和路由處理器

透過在位址列中輸入 URL 並用戶點選應用程式中的連結來載入應用程式。Ember 使用路由器將 URL 對映到路由處理器。路由器將現有 URL 與路由匹配，然後將其用於載入資料、顯示模板和設定應用程式狀態。

路由處理器執行以下操作：

  • 它提供模板。

  • 它定義了模板可訪問的模型。

  • 如果使用者無權訪問應用程式的特定部分，則路由器將重定向到新路由。

模板

模板是面向終端使用者的強大 UI。Ember 模板使用 Handlebars 模板 的語法提供應用程式的使用者介面外觀。它構建前端應用程式，就像普通的 HTML 一樣。它還支援正則表示式並動態更新表示式。

模型

路由處理器呈現將資訊持久化到 Web 伺服器的模型。它操作儲存在資料庫中的資料。模型是一個簡單的類，它擴充套件了 Ember Data 的功能。Ember Data 是一個與 Ember.js 緊密耦合的庫，用於操作儲存在資料庫中的資料。

元件

元件控制使用者介面行為，包括兩個部分：

  • 用 JavaScript 編寫的模板

  • 用 JavaScript 編寫的原始檔，提供元件的行為。

EmberJS - 建立和執行應用程式

您可以輕鬆地在您的系統中配置 Ember.js。Ember.js 的安裝在 EmberJS 安裝 章節中進行了說明。

建立應用程式

讓我們使用 Ember.js 建立一個簡單的應用程式。首先建立一個資料夾來建立您的應用程式。例如，如果您建立了“emberjs-app”資料夾，則導航到此資料夾：

$ cd ~/emberjs-app

在“emberjs=app”資料夾內，使用 new 命令建立一個新專案：

$ ember new demo-app

建立專案時，new 命令將提供以下帶有檔案和目錄的目錄結構：

|-- app
|-- bower_components
|-- config
|-- dist
|-- node_modules
|-- public
|-- tests
|-- tmp
|-- vendor

bower.json
ember-cli-build.js
package.json
README.md
testem.js

  • app - 它指定模型、路由、元件、模板和樣式的資料夾和檔案。

  • bower_components / bower.json - 它用於管理元件，例如 HTML、CSS、JavaScript、影像檔案等，可以使用 npm 安裝。bower_components 目錄包含所有 Bower 元件，bower.json 包含 Ember、Ember CLI Shims 和 QUnit 安裝的依賴項列表。

  • config - 它包含 environment.js 目錄，用於配置應用程式的設定。

  • dist - 它包含構建應用程式時部署的輸出檔案。

  • node_modules / package.json - NPM 是 Node.js 的節點包管理器，用於安裝、共享和管理專案中的依賴項。package.json 檔案包含應用程式的當前 npm 依賴項，列出的包將安裝在 node_modules 目錄中。

  • public - 它包含資產，如影像、字型等。

  • vendor - Bower 不控制前端依賴項（例如 JavaScript、CSS）所在的目錄。

  • tests / testem.js - 自動化測試儲存在 tests 資料夾下，Ember CLI 的測試執行器 testem 位於 testem.js 中。

  • tmp - 它包含 Ember CLI 的臨時檔案。

  • ember-cli-build.js - 它指定如何使用 Ember CLI 構建應用程式。

執行應用程式

要執行應用程式，請導航到新建立的專案目錄：

$ cd demo-app

我們建立了新專案，可以使用以下命令執行它：

$ ember server

現在開啟瀏覽器並導航到 https://:4200/。您將看到如下圖所示的 Ember 歡迎頁面：

Ember.js App Example

EmberJS - 物件模型

在 Ember.js 中，所有物件都派生自 Ember.Object。面向物件分析和設計技術稱為物件建模。Ember.Object 使用類系統支援諸如 mixin 和建構函式方法之類的特性。Ember 使用 Ember.Enumerable 介面擴充套件 JavaScript Array 原型以提供陣列的觀察更改，並使用 格式化和本地化 方法擴充套件 String 原型。

下表列出了 Ember.js 中不同型別的物件模型及其說明：

序號 型別和說明
1 類和例項

類是一個模板或藍圖，它具有變數和函式的集合，而例項與該類的物件相關。您可以使用 Ember.Object 的 extend() 方法建立新的 Ember 類。
2 重新開啟類和例項

這只不過是在不重新定義的情況下更新類實現。
3 計算屬性

計算屬性將函式宣告為屬性，Ember.js 會在需要時自動呼叫計算屬性，並將一個或多個屬性組合在一個變數中。
4 計算屬性和聚合資料

計算屬性訪問陣列中的所有項以確定其值。
5 觀察者

觀察者觀察屬性，例如計算屬性，並更新計算屬性的文字。
6 繫結

繫結是 Ember.js 的一項強大功能，它有助於在兩個屬性之間建立連結，如果其中一個屬性發生更改，則另一個屬性會自動更新。

EmberJS - 路由器

路由器是 EmberJs 的核心功能，它將 URL 轉換為一系列模板，並表示應用程式的狀態。Ember 使用路由器將 URL 對映到路由處理程式。路由器將當前 URL 與用於載入資料、顯示模板和設定應用程式狀態的其他路由匹配。

路由處理程式執行一些操作，例如：

  • 它提供模板。

  • 它定義模型，該模型可供模板訪問。

  • 如果使用者無權訪問應用程式的特定部分，則路由器將重定向到新路由。

下表列出了 Ember.js 中的不同路由器及其說明：

序號 型別和說明
1 定義路由

路由器將當前 URL 與負責顯示模板、載入資料和設定應用程式狀態的路由匹配。
2 指定路由的模型

要指定路由模型，您需要一個模板來顯示模型中的資料。
3 渲染模板

路由用於將外部模板渲染到螢幕上。
4 重定向

這是一種 URL 重定向機制，當找不到請求的 URL 時，它會將使用者重定向到不同的頁面。
5 阻止和重試轉換

在路由轉換期間，可以使用transition.abort() 和 transition.retry() 方法分別中止和重試轉換。
6 載入/錯誤子狀態

Ember 路由器提供有關路由載入的資訊以及載入路由時發生的錯誤。
7 查詢引數

查詢引數出現在 URL 中“？”標記的右側，表示為可選的鍵值對。
8 非同步路由

Ember.js 路由器能夠透過使用非同步路由來處理應用程式中的複雜非同步邏輯。

EmberJS - 模板

模板用於在多個頁面上建立標準佈局。更改模板時，基於該模板的頁面會自動更改。模板提供標準化控制元件。

下表顯示了有關模板的更多詳細資訊：

序號 型別和說明
1 Handlebars 基礎知識

Handlebars 模板庫允許透過包含靜態 HTML 和動態內容來構建豐富的使用者介面。
2 內建助手

助手為模板提供額外功能，並將模型和元件中的原始值修改為適合使用者的格式。
3 條件語句

Ember.js 定義了兩個條件語句，有助於控制程式流程。
4 顯示專案列表

您可以使用#each 助手顯示陣列中的專案列表。
5 顯示物件中的鍵

您可以使用#each-in 助手顯示物件中的鍵。
6 連結

可以使用{{link-to}} 元件建立指向路由的連結。
7 操作

可以使用{{action}} 助手使 HTML 元素可點選。
8 輸入助手

可以使用 Ember.js 中的{{input}} 和 {{textarea}} 助手建立常見的表單控制元件。
9 開發助手

可以使用 Handlebars 和 Ember 的一些助手簡化模板開發。
10 編寫助手

您可以為模板新增額外功能，並將模型和元件中的原始值轉換為適合使用者的格式。

EmberJS - 元件

Ember.js 元件使用 W3C Web 元件規範並提供真正的封裝 UI 小部件。它包含三個主要規範：模板、Shadow DOM 和自定義元素。元件在 data-template-name 中宣告，它具有路徑名而不是普通字串，並且以“components/”為字首。

下表列出了操作的動作事件：

序號 動作事件和說明
1 定義元件

您可以在 Ember.js 中輕鬆定義元件，並且每個元件的名稱中都必須包含一個短橫線。
2 元件生命週期

元件生命週期使用一些方法以便在元件生命週期的特定時間執行程式碼。
3 將屬性傳遞給元件

元件不會直接訪問模板範圍內的屬性。因此，只需在元件宣告時宣告屬性即可。
4 在元件中包裝內容

您可以使用模板在元件中包裝內容。
5 自定義元件的元素

您可以使用 JavaScript 中的Ember.Component 子類自定義元件的元素，例如屬性和類名。
6 使用塊引數

傳遞給元件的屬性可以在塊表示式中返回結果。
7 處理事件

可以使用事件處理程式處理使用者事件，例如雙擊、懸停、按鍵等。為此，請將事件名稱應用為元件上的方法。
8 使用操作觸發更改

元件可以使用操作觸發更改並與事件進行通訊。

EmberJS - 模型

模型是一個擴充套件 Ember Data 功能的類。當用戶重新整理頁面時，頁面的內容應由模型表示。在 Ember.js 中，每個路由都有一個關聯的模型。模型有助於提高應用程式的效能。Ember Data 操縱伺服器中儲存的資料，並且可以輕鬆地與 socket.io 和 Firebase 或 WebSockets 等流式 API 協同工作。

核心概念

  • 儲存
  • 模型
  • 記錄
  • 介面卡
  • 快取

儲存

儲存是應用程式中所有可用記錄的中央儲存庫和快取。路由和控制器可以訪問應用程式的儲存資料。DS.Store 會自動建立，以便在整個物件之間共享資料。

import Ember from 'ember';

export default Ember.Route.extend ({
   model() {
      return this.store.find();
   }
});

模型

模型是一個擴充套件 Ember Data 功能的類，它指定與其他物件的關係。當用戶重新整理頁面時，頁面的內容應由模型表示。

import DS from 'ember-data';

export default DS.Model.extend ({
   owner: DS.attr(),
   city: DS.attr()
});

記錄

記錄是模型的一個例項，其中包含從伺服器載入的資訊，您可以透過其模型型別和ID 來標識記錄。

//It finds the record of type 'person' and an 'ID' of 1
this.get('store').findRecord('person', 1); // => { id: 1, name: 'steve-buscemi' }

介面卡

介面卡是一個物件，負責將 Ember 的請求記錄轉換為對特定伺服器後端的適當呼叫。例如，如果您想查詢 ID 為 1 的人，則 Ember 將使用 HTTP 作為/person/1 來載入 URL。

快取

記錄可以由儲存自動快取，當您第二次從伺服器載入記錄時，它會返回相同的物件例項。這提高了應用程式的效能，並儘可能快地向用戶顯示應用程式 UI。

下表列出了有關模型的詳細資訊：

序號 模型方式和說明
1 定義模型

模型是一個簡單的類，它擴充套件了 Ember Data 的功能。
2 查詢記錄

您可以使用 Ember 資料儲存檢索記錄。
3 建立和刪除記錄

您可以在模型例項上建立和刪除記錄。
4 關係

Ember.js 提供關係型別來指定模型如何相互關聯。
5 將記錄推入儲存

您可以將記錄推入儲存的快取中，而無需從應用程式請求記錄。
6 處理元資料

元資料是用於特定模型或型別而不是使用記錄的資料。
7 自定義介面卡

Ember.js 介面卡指定如何在後端資料儲存中儲存資料，例如 URL 格式和 REST API 標頭。

EmberJS - 管理依賴項

Ember 使用 NPM 和 Bower 來管理依賴項，這些依賴項在 package.json 中為 NPM 定義，在bower.json 中為 Bower 定義。例如，您可能需要為樣式表安裝 SASS，但在開發 Ember 應用程式時 Ember 不會安裝它。為此，請使用Ember Addons 來共享可重用的庫。如果要安裝任何 CSS 框架或 JavaScript 日期選擇器依賴項，請使用 Bower 包管理器。

附加元件

可以使用以下命令使用Ember CLI 安裝 Ember 附加元件：

ember install ember-cli-sass

ember install 命令會將所有依賴項儲存到相應的配置檔案。

Bower

它是一個 Web 包管理器，它管理 HTML、CSS、JavaScript 或影像檔案的元件。它基本上維護和監控所有包並檢查新的更新。它使用配置檔案bower.json 來跟蹤放置在 Ember CLI 專案根目錄中的應用程式。

您可以使用以下命令安裝專案依賴項：

bower install <dependencies> --save

資源

您可以將專案vendor/ 資料夾中的第三方 JavaScript（不是作為附加元件或 Bower 包提供的）以及專案public/ 資料夾中的自有資源（例如 robots.txt、favicon 等）放在一起。在開發 Ember 應用程式時 Ember 未安裝的依賴項應使用清單檔案ember-cli-build.js 包含。

AMD JavaScript 模組

您可以將資源路徑作為第一個引數，將模組和匯出列表作為第二個引數。您可以在ember-cli-build.js 清單檔案中包含這些資源，如下所示：

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
   exports: {
      'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request'
      ]
   }
});

特定於環境的資源

可以透過將物件定義為第一個引數（這是一個環境名稱）來在不同的環境中使用不同的資源，物件的 value 應在該環境中用作資源。在ember-cli-build.js 清單檔案中，您可以包含如下內容：

app.import ({
   development: 'bower_components/ember/ember.js',
   production:  'bower_components/ember/ember.prod.js'
});

其他資源

將所有資源放置在public/ 資料夾中後，它們將被複制到 dist/ 目錄中。例如，如果您複製放置在public/images/favicon.ico 資料夾中的 favicon，則它將被複制到dist/images/favicon.ico 目錄中。第三方資源可以手動新增到vendor/ 資料夾中，也可以透過import() 選項使用 Bower 包管理器新增。未透過import() 選項新增的資源將不會出現在最終構建中。

例如，考慮以下程式碼行，它將資源匯入到dist/ 資料夾中。

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');

上面的程式碼行在dist/font-awesome/fonts/fontawesomewebfont.ttf 中建立了一個字型檔案。您還可以將上面的檔案放置在不同的路徑中，如下所示：

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
});

它將字型檔案複製到dist/assets/fontawesome-webfont.ttf。

EmberJS - 應用程式關注點

可以使用Ember.Application 類擴充套件 Ember 應用程式，該類宣告並配置有助於構建應用程式的物件。

應用程式在執行時建立Ember.ApplicationInstance 類，用於管理其各個方面，並充當例項化物件的擁有者。簡而言之，Ember.Application 類定義了應用程式，而Ember.ApplicationInstance 類管理其狀態。

下表列出了有關模型的更多詳細資訊：

序號 模型方式和說明
1 依賴注入

這是一個將一個物件的依賴項提供給另一個物件的流程，Ember 應用程式使用它來宣告和例項化物件及其之間的依賴關係類。
2 初始化器

初始化器用於在應用程式啟動時進行配置。
3 服務

服務是一個 Ember 物件，可以在應用程式的不同部分使用。
4 執行迴圈

這是應用程式大部分內部程式碼執行的區域。

EmberJS - 配置 Ember.js

Ember.js 可以配置為管理應用程式的環境。配置 Ember.js 包括以下主題：

序號 配置方法和描述
1 配置應用程式和 Ember CLI

您可以配置 Ember 應用程式和 CLI 來管理應用程式的環境。
2 停用原型擴充套件和指定 URL 型別

可以透過將EXTEND_PROTOTYPES標誌設定為 false 來停用原型擴充套件，並使用 Ember 路由器選項指定 URL 型別。
3 嵌入應用程式和特性標誌

您可以透過更改根元素將應用程式嵌入到現有頁面中，並且可以根據專案的配置啟用特性標誌。

EmberJS - Ember 檢查器

Ember inspector 是一個瀏覽器附加元件，用於除錯 Ember 應用程式。Ember inspector 包括以下主題：

序號 Ember inspector 方法和描述
1 安裝 Inspector

您可以安裝 Ember inspector 來除錯您的應用程式。
2 物件檢查器

Ember inspector 允許與 Ember 物件進行互動。
3 檢視樹

檢視樹提供了應用程式的當前狀態。
4 檢查路由、資料選項卡和庫資訊

您可以看到 Inspector 定義的應用程式路由列表，資料選項卡用於顯示模型型別的列表。
5 除錯 Promise

Ember inspector 根據其狀態提供 Promise。
6 檢查物件和渲染效能

使用容器檢查物件例項，並使用渲染效能選項計算應用程式的渲染時間。
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.