Ember 入門

Ember 是一款元件-服務框架，專注於整體 Web 應用程式開發體驗，最大程度地減少應用程式之間微不足道的差異，同時作為原生 JavaScript 之上的現代輕量級層。Ember 還具有極強的向前和向後相容性，幫助企業及時更新到最新版本的 Ember 和最新的社群驅動規範。

元件-服務框架意味著什麼？元件是行為、樣式和標記的獨立包，類似於其他前端框架（如 React、Vue 和 Angular）提供的功能。服務端提供長期存在的共享狀態、行為以及與其他庫或系統整合的介面。例如，路由器（稍後在本教程中會提到）就是一個服務。元件和服務構成了任何 EmberJS 應用程式的大部分內容。

通常，EmberJS 非常適合構建需要以下一種或兩種特性的應用程式

• 單頁應用程式，包括原生類 Web 應用和 漸進式 Web 應用 (PWA)
  • 當 Ember 成為應用程式的整個前端時，效果最佳。
• 增強多個團隊的技術棧之間的凝聚力
  • 社群支援的“最佳實踐”可以加快長期開發速度。
  • Ember 擁有清晰的規範，有助於強制執行一致性並幫助團隊成員快速上手。

EmberJS 具有外掛架構，這意味著可以安裝外掛並提供額外的功能，而無需太多（如果有）配置。

例如

• PREmber：用於部落格或營銷內容的靜態網站渲染。
• empress-blog：使用 Markdown 創作博文，同時使用 PREmber 最佳化 SEO。
• ember-service-worker：配置 PWA，以便可以像從裝置應用商店安裝應用一樣，將應用安裝到移動裝置上。

Ember 還可以與原生移動應用一起使用，使用原生移動橋接 JavaScript，例如 Corber 提供的橋接。

EmberJS 是最“有主見”的前端框架之一。但“有主見”是什麼意思？在 Ember 中，“主見”是一套約定，有助於提高開發人員的效率，但代價是需要學習這些約定。隨著約定的定義和共享，“主見”有助於減少應用程式之間的微不足道的差異，這是所有“有主見”框架的共同目標，無論其語言和生態系統如何。然後，開發人員可以更容易地在專案和應用程式之間切換，而無需完全重新學習架構、模式、約定等。

在學習本系列教程時，您會注意到 Ember 的“主見”，例如元件檔案的嚴格命名約定。

Ember 基於 JavaScript 技術，是在傳統 面向物件程式設計 之上的薄層，同時仍然允許開發人員利用 函數語言程式設計技術。

Ember 使用兩種主要語法

• JavaScript（或可選的 TypeScript）
• Ember 自己的模板語言，它鬆散地基於 Handlebars。

模板語言用於進行構建和執行時最佳化，否則這些最佳化將無法實現。最重要的是，它是 HTML 的超集，這意味著任何瞭解 HTML 的人都可以對任何 Ember 專案做出有意義的貢獻，而無需擔心破壞程式碼。設計人員和其他非開發人員可以參與頁面模板的貢獻，而無需任何 JavaScript 知識，並且以後可以新增互動性。

此語言還可以減輕資產負載，因為它將模板編譯成“位元組碼”，與 JavaScript 相比，位元組碼的解析速度更快。Glimmer VM 能夠實現極快的 DOM 更改跟蹤，而無需管理和比較快取的虛擬表示（這是減輕 DOM 更改緩慢 I/O 的一種常用方法）。

有關 Glimmer VM 技術方面的更多資訊，GitHub 儲存庫中有一些 文件，特別是 引用 和 驗證器 可能值得關注。

Ember 中的其他所有內容都只是 JavaScript，尤其是 JavaScript 類。這就是大多數“框架”部分發揮作用的地方，因為存在 超類，其中每種型別的事物都有不同的用途和專案中不同的預期位置。

以下演示了 Ember 對典型專案中 JavaScript 的影響：Gavin 演示了特定於 Ember 的 JS 程式碼少於 20%。

您在此處找到的其他 Ember 資料包含一個多部分教程，其中我們將製作經典 TodoMVC 示例應用程式 的版本，並在此過程中教您如何使用 Ember 框架的基本功能。TodoMVC 是一個基本的待辦事項跟蹤應用程式，使用多種不同的技術實現。

這是已完成的 Ember 版本，供參考。

就遵守可訪問/預設 Web 實踐而言，TodoMVC 專案存在一些問題。TodoMVC 系列專案中有一些關於此的 GitHub 問題處於開啟狀態

• 為演示新增鍵盤訪問
• 重新啟用可聚焦元素的輪廓

Ember 堅定致力於預設情況下保持可訪問性，並且 Ember 指南中有一整個部分關於可訪問性，介紹了其對網站/應用程式設計的意義。

也就是說，由於本教程重點關注小型 Web 應用程式的 JavaScript 方面，因此 TodoMVC 的價值在於提供了預製 CSS 和推薦的 HTML 結構，從而消除了實現之間的細微差異，以便於比較。在本教程的後面，我們將重點介紹嚮應用程式新增程式碼以修復 TodoMVC 的一些主要缺陷。

Ember 使用命令列介面 (CLI) 工具來構建和構建應用程式的各個部分。

1. 在安裝 ember-cli 之前，您需要安裝 node 和 npm。如果您尚未安裝，請訪問此處瞭解如何安裝 node 和 npm。
2. 現在，在終端中鍵入以下內容以安裝 ember-cli
   bash

   npm install -g ember-cli
   

   此工具在您的終端中提供 ember 程式，用於建立、構建、開發、測試和構建應用程式（執行 ember --help 以獲取完整命令列表及其選項）。
3. 要建立一個全新的應用程式，請在終端中鍵入以下內容。這會在您所在的當前目錄中建立一個名為 todomvc 的新目錄，其中包含新 Ember 應用程式的腳手架。在執行它之前，請確保在終端中導航到適當的位置。（好的建議是您的“桌面”或“文件”目錄，以便於查詢）
   bash

   ember new todomvc
   

   或者，在 Windows 上
   bash

   npx ember-cli new todomvc
   

這將生成一個可用於生產的應用程式開發環境，預設情況下包括以下功能

• 具有即時重新載入功能的開發伺服器。
• 外掛架構，允許第三方包豐富您的應用程式。
• 透過 Babel 和 Webpack 整合使用最新的 JavaScript。
• 自動測試環境，在瀏覽器中執行您的測試，使您可以像使用者一樣進行測試。
• CSS 和 JavaScript 的轉譯和縮小，用於生產構建。
• 用於最大程度減少應用程式之間差異的約定（以便更容易進行心理上下文切換）。

在繼續與您的全新專案互動之前，您需要一個程式碼編輯器。如果您尚未配置編輯器，Ember Atlas 提供了一些關於如何設定各種編輯器的指南。

安裝共享資產（就像我們即將執行的操作一樣）通常不是新專案的必需步驟，但它允許我們使用現有的共享 CSS，因此我們無需猜測建立 TodoMVC 樣式所需的 CSS 是什麼。

1. 首先，在終端中進入您的 todomvc 目錄，例如在 macOS/Linux 上使用 cd todomvc。
2. 現在執行以下命令將通用的 todomvc CSS 放入您的應用程式中
   bash

   npm install --save-dev todomvc-app-css todomvc-common
   

3. 接下來，在 todomvc 目錄中找到 ember-cli-build.js 檔案（它位於根目錄中），並在您選擇的程式碼編輯器中開啟它。ember-cli-build.js 負責配置有關專案構建方式的詳細資訊，包括將所有檔案捆綁在一起、資產縮小和建立源對映，並提供合理的預設值，因此您通常無需擔心此檔案。但是，我們將向 ember-cli-build.js 檔案新增幾行以匯入我們的共享 CSS 檔案，以便它們成為我們構建的一部分，而無需顯式 @import 到 app.css 檔案中（這需要在構建時重寫 URL，因此效率較低且設定更復雜）。
4. 在 ember-cli-build.js 中，找到以下程式碼
   js

   let app = new EmberApp(defaults, {
     // Add options here
   });
   

5. 在儲存檔案之前，在其下方新增以下行
   js

   app.import("node_modules/todomvc-common/base.css");
   app.import("node_modules/todomvc-app-css/index.css");
   

   有關 ember-cli-build.js 功能以及自定義構建/管道的其他方法的更多資訊，Ember 指南有一頁關於 外掛和依賴項。
6. 最後，找到 app.css，位於 app/styles/app.css，並將以下內容貼上到其中
   css

   :focus,
   .view label:focus,
   .todo-list li .toggle:focus + label,
   .toggle-all:focus + label {
     /* !important needed because todomvc styles deliberately disable the outline */
     outline: #d86f95 solid !important;
   }
   

此 CSS 覆蓋了 todomvc-app-css npm 包提供的一些樣式，因此可以使鍵盤焦點可見。這在某種程度上解決了預設 TodoMVC 應用程式的主要可訪問性缺點之一。

您可以在終端中鍵入以下命令，同時位於 todomvc 目錄中，以開發模式啟動應用程式

ember server

這應該會為您提供類似於以下內容的輸出

Build successful (190ms) – Serving on https://:4200/

Slowest Nodes (totalTime >= 5%)          | Total (avg)
-----------------------------------------+-----------
BroccoliMergeTrees (17)                  | 35ms (2 ms)
Package /assets/vendor.js (1)            | 13ms
Concat: Vendor Styles/assets/vend... (1) | 12ms

開發伺服器在 https://:4200 上啟動，您可以在瀏覽器中訪問它以檢視您的工作成果。

如果一切正常，您應該會看到如下頁面

到目前為止一切順利。我們已經到了可以開始構建我們的示例 TodoMVC Ember 應用程式的階段。在下一篇文章中，我們將探討如何將應用程式的標記結構構建為一組邏輯元件。

• 上一頁
• 概述：瞭解客戶端 JavaScript 框架
• 下一頁