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

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

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

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

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

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

關(guān)鍵要點(diǎn)

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

介紹 ember-cli

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

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

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

$ npm install -g ember-cli

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

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

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

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

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

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

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

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

$ npm install -g ember-cli

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

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

讓我們?cè)囋嚳矗?

初始頁(yè)面已經(jīng)告訴我們?cè)撟鍪颤N了，所以讓我們更改主頁(yè)面並看看會(huì)發(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
... (安裝過(guò)程輸出) ...

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

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

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

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

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

請(qǐng)注意，輸出中提到了 PhantomJS。這是因?yàn)橥耆С衷跒g覽器中運(yùn)行的集成測(cè)試，默認(rèn)情況下，這些測(cè)試在 PhantomJS 瀏覽器中無(wú)頭運(yùn)行。如果您願(yuàn)意，可以完全支持在其他瀏覽器中運(yùn)行它們，並且在設(shè)置持續(xù)集成 (CI) 時(shí)，值得這樣做，以確保您的應(yīng)用程序在所有受支持的瀏覽器中都能正常工作。

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

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