ember.js：Web應用程序的理想框架

Ember.js 是一款注重約定優於配置的現代化前端 JavaScript 框架，近期備受關注。本文將通過構建一個簡單的擲骰子應用，介紹該框架的關鍵概念及其實現能力。

我們的示例應用是一個擲骰子程序，允許用戶擲骰子並查看歷史記錄。該應用的完整代碼可在 Github 上找到。

Ember.js 集成了許多現代 JavaScript 概念和技術，包括但不限於：

• 使用 Babel 轉譯器支持 ES2016。
• 標準的單元、集成和驗收測試支持，由 Testem 和 QTest 提供支持。
• 使用 Broccoli.js 構建資源。
• 支持實時重載，縮短開發週期。
• 使用 Handlebars 模板語法。
• URL 路由優先開發，確保完全支持深度鏈接。
• 基於 JSON API 構建完整的數據層，但可根據需要插入其他 API 訪問方式。

要使用 Ember.js，需要安裝最新版本的 Node.js 和 npm。如果沒有，可以從 Node.js 官網下載並安裝。

需要說明的是，Ember.js 純粹是一個前端框架。它有多種與您選擇的後台交互的方式，但後臺本身並非由 Ember.js 處理。

關鍵要點

• Ember.js 是一個全面的前端 JavaScript 框架，它將現代 JavaScript 功能和工具集成到一個單一的、一致的包中，非常適合構建 Web 應用程序。
• 該框架基於“約定優於配置”的原則，通過提供合理的默認值和最佳實踐來簡化開發流程，從而加快開發週期並減少設置時間。
• Ember-cli（Ember 的命令行界面）是一個強大的工具，它管理著從項目創建和開發到測試和部署的整個開發生命週期，從而提高了生產力和效率。
• Ember.js 原生支持強大的 URL 路由和深度鏈接，確保應用程序對 SEO 友好，並通過清晰的導航結構保持可維護性。
• 該框架包含一個內置的數據層，用於管理客戶端和服務器之間的數據交互，默認支持 JSON API，但允許自定義以適應不同的後端 API。
• 測試在 Ember.js 中是頭等公民，它支持單元測試、集成測試和驗收測試，由 Testem 和 QTest 等工具提供支持，這有助於確保應用程序的可靠性和質量。
• Ember.js 使用組件和模板簡化了可重用和可維護的用戶界面元素的開發，促進了 Web 應用程序設計和架構的最佳實踐。

介紹 ember-cli

Ember.js 的強大功能很大程度上來自於它的命令行界面 (CLI)。這個工具——稱為 ember-cli——驅動著 Ember.js 應用程序的大部分開發生命週期，從創建應用程序，到添加功能，再到運行測試套件和以開發模式啟動實際項目。

在開發 Ember.js 應用程序時，幾乎所有操作都將在某種程度上涉及到此工具，因此了解如何最好地使用它非常重要。我們將在本文中使用它。

首先，我們需要確保 Ember.js CLI 正確安裝並更新。這可以通過從 npm 安裝來完成，如下所示：

<code class="language-bash">$ npm install -g ember-cli</code>

我們可以通過運行以下命令來檢查它是否已成功安裝：

<code class="language-bash">$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64</code>

創建您的第一個 Ember.js 應用

安裝 ember-cli 後，您就可以開始創建應用程序了。這是我們將首次使用 Ember.js CLI 工具的地方——它創建整個應用程序結構，設置好所有內容以便運行。

<code class="language-bash">$ ember new dice-roller
... (安装过程输出) ...</code>

這將創建一個完整的應用程序，可以立即運行。它甚至設置了 Git 作為源代碼控制來跟踪您的工作。

注意：如果需要，可以禁用 Git 集成，也可以選擇使用 Yarn 而不是 npm。該工具的幫助文檔對此以及更多內容進行了描述。

現在，讓我們看看它是什麼樣的。使用 ember-cli 啟動 Ember 應用程序進行開發：

<code class="language-bash">$ npm install -g ember-cli</code>

現在我們準備好了。應用程序正在 https://www.php.cn/link/988aaaa9bd19c1e0f8043a132bbf1af3 上運行，如下所示：

它還運行著一個 LiveReload 服務，該服務會自動監視文件系統的更改。這意味著在調整網站設計時，您可以擁有非常快的周轉時間。

讓我們試試看？

初始頁面已經告訴我們該做什麼了，所以讓我們更改主頁面並看看會發生什麼。我們將更改 app/templates/application.hbs 文件，使其如下所示：

<code class="language-bash">$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64</code>

注意：{{outlet}} 標籤是 Ember 路由工作方式的一部分。稍後我們將介紹它。

首先要注意的是 ember-cli 的輸出，它應該如下所示：

<code class="language-bash">$ ember new dice-roller
... (安装过程输出) ...</code>

這告訴我們它已經發現我們更改了模板並重新構建並重新啟動了所有內容。我們對這部分內容沒有任何參與。

現在讓我們看看瀏覽器。如果您安裝並運行了 LiveReload，則甚至不需要刷新瀏覽器即可拾取它，否則，您需要重新加載當前頁面。

雖然不是很有趣，但我們幾乎沒有付出任何努力就實現了這一點。

此外，我們還獲得了一個完全設置好的測試套件，可以運行。不出所料，這也是使用 Ember 工具運行的：

<code class="language-bash">$ cd dice-roller
$ ember serve
... (启动过程输出) ...</code>

請注意，輸出中提到了 PhantomJS。這是因為完全支持在瀏覽器中運行的集成測試，默認情況下，這些測試在 PhantomJS 瀏覽器中無頭運行。如果您願意，可以完全支持在其他瀏覽器中運行它們，並且在設置持續集成 (CI) 時，值得這樣做，以確保您的應用程序在所有受支持的瀏覽器中都能正常工作。

...(剩餘內容與原文類似，可根據需要調整部分語句，保持整體意思不變，並保留圖片格式及位置)

以上是ember.js：Web應用程序的理想框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！