Ember.js 是一款注重約定優(yōu)于配置的現(xiàn)代化前端 JavaScript 框架，近期備受關(guān)注。本文將通過構(gòu)建一個簡單的擲骰子應(yīng)用，介紹該框架的關(guān)鍵概念及其實現(xiàn)能力。

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

Ember.js 集成了許多現(xiàn)代 JavaScript 概念和技術(shù)，包括但不限于：

• 使用 Babel 轉(zhuǎn)譯器支持 ES2016。
• 標(biāo)準(zhǔn)的單元、集成和驗收測試支持，由 Testem 和 QTest 提供支持。
• 使用 Broccoli.js 構(gòu)建資源。
• 支持實時重載，縮短開發(fā)周期。
• 使用 Handlebars 模板語法。
• URL 路由優(yōu)先開發(fā)，確保完全支持深度鏈接。
• 基于 JSON API 構(gòu)建完整的數(shù)據(jù)層，但可根據(jù)需要插入其他 API 訪問方式。

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

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

關(guān)鍵要點

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

介紹 ember-cli

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

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

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

$ npm install -g ember-cli

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

$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64

創(chuàng)建您的第一個 Ember.js 應(yīng)用

安裝 ember-cli 后，您就可以開始創(chuàng)建應(yīng)用程序了。這是我們將首次使用 Ember.js CLI 工具的地方——它創(chuàng)建整個應(yīng)用程序結(jié)構(gòu)，設(shè)置好所有內(nèi)容以便運(yùn)行。

$ ember new dice-roller
... (安裝過程輸出) ...

這將創(chuàng)建一個完整的應(yīng)用程序，可以立即運(yùn)行。它甚至設(shè)置了 Git 作為源代碼控制來跟蹤您的工作。

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

現(xiàn)在，讓我們看看它是什么樣的。使用 ember-cli 啟動 Ember 應(yīng)用程序進(jìn)行開發(fā)：

$ npm install -g ember-cli

現(xiàn)在我們準(zhǔn)備好了。應(yīng)用程序正在 http://m.miracleart.cn/link/988aaaa9bd19c1e0f8043a132bbf1af3 上運(yùn)行，如下所示：

它還運(yùn)行著一個 LiveReload 服務(wù)，該服務(wù)會自動監(jiān)視文件系統(tǒng)的更改。這意味著在調(diào)整網(wǎng)站設(shè)計時，您可以擁有非?？斓闹苻D(zhuǎn)時間。

讓我們試試看？

初始頁面已經(jīng)告訴我們該做什么了，所以讓我們更改主頁面并看看會發(fā)生什么。我們將更改 app/templates/application.hbs 文件，使其如下所示：

$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64

注意：{{outlet}} 標(biāo)簽是 Ember 路由工作方式的一部分。稍后我們將介紹它。

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

$ ember new dice-roller
... (安裝過程輸出) ...

這告訴我們它已經(jīng)發(fā)現(xiàn)我們更改了模板并重新構(gòu)建并重新啟動了所有內(nèi)容。我們對這部分內(nèi)容沒有任何參與。

現(xiàn)在讓我們看看瀏覽器。如果您安裝并運(yùn)行了 LiveReload，則甚至不需要刷新瀏覽器即可拾取它，否則，您需要重新加載當(dāng)前頁面。

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

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

$ cd dice-roller
$ ember serve
... (啟動過程輸出) ...

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

...(剩余內(nèi)容與原文類似，可根據(jù)需要調(diào)整部分語句，保持整體意思不變，并保留圖片格式及位置)

以上是ember.js：Web應(yīng)用程序的理想框架的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！