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 安装来完成，如下所示：

$ npm install -g ember-cli

我们可以通过运行以下命令来检查它是否已成功安装：

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

创建您的第一个 Ember.js 应用

安装 ember-cli 后，您就可以开始创建应用程序了。这是我们将首次使用 Ember.js CLI 工具的地方——它创建整个应用程序结构，设置好所有内容以便运行。

$ ember new dice-roller
... (安装过程输出) ...

这将创建一个完整的应用程序，可以立即运行。它甚至设置了 Git 作为源代码控制来跟踪您的工作。

注意：如果需要，可以禁用 Git 集成，也可以选择使用 Yarn 而不是 npm。该工具的帮助文档对此以及更多内容进行了描述。

现在，让我们看看它是什么样的。使用 ember-cli 启动 Ember 应用程序进行开发：

$ npm install -g ember-cli

现在我们准备好了。应用程序正在 https://www.php.cn/link/988aaaa9bd19c1e0f8043a132bbf1af3 上运行，如下所示：

它还运行着一个 LiveReload 服务，该服务会自动监视文件系统的更改。这意味着在调整网站设计时，您可以拥有非常快的周转时间。

让我们试试看？

初始页面已经告诉我们该做什么了，所以让我们更改主页面并看看会发生什么。我们将更改 app/templates/application.hbs 文件，使其如下所示：

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

注意：{{outlet}} 标签是 Ember 路由工作方式的一部分。稍后我们将介绍它。

首先要注意的是 ember-cli 的输出，它应该如下所示：

$ ember new dice-roller
... (安装过程输出) ...

这告诉我们它已经发现我们更改了模板并重新构建并重新启动了所有内容。我们对这部分内容没有任何参与。

现在让我们看看浏览器。如果您安装并运行了 LiveReload，则甚至不需要刷新浏览器即可拾取它，否则，您需要重新加载当前页面。

虽然不是很有趣，但我们几乎没有付出任何努力就实现了这一点。

此外，我们还获得了一个完全设置好的测试套件，可以运行。不出所料，这也是使用 Ember 工具运行的：

$ cd dice-roller
$ ember serve
... (启动过程输出) ...

请注意，输出中提到了 PhantomJS。这是因为完全支持在浏览器中运行的集成测试，默认情况下，这些测试在 PhantomJS 浏览器中无头运行。如果您愿意，可以完全支持在其他浏览器中运行它们，并且在设置持续集成 (CI) 时，值得这样做，以确保您的应用程序在所有受支持的浏览器中都能正常工作。

...(剩余内容与原文类似，可根据需要调整部分语句，保持整体意思不变，并保留图片格式及位置)

以上是ember.js：Web应用程序的理想框架的详细内容。更多信息请关注PHP中文网其他相关文章！