Ember 入门

Ember 简介

Ember 是一个组件-服务框架，专注于整体的 Web 应用程序开发体验，最大限度地减少应用程序之间琐碎的差异——同时作为原生 JavaScript 之上现代且轻量的一层。Ember 还具有巨大的向后和向前兼容性，帮助企业及时更新到最新版本的 Ember 和最新的社区驱动的约定。

成为一个组件-服务框架意味着什么？组件是行为、样式和标记的独立捆绑，类似于其他前端框架（如 React、Vue 和 Angular）提供的内容。服务侧提供长寿命的共享状态、行为以及与其他库或系统集成的接口。例如，路由器（本教程稍后会提到）就是一个服务。组件和服务构成了大多数 EmberJS 应用程序。

用例

通常，EmberJS 适用于构建具有以下一个或两个特性的应用程序：

• 单页应用程序，包括类原生 Web 应用程序和渐进式 Web 应用程序 (PWA)

  • 当 Ember 构成应用程序的整个前端时，它的表现最佳。

• 提高多个团队技术栈的凝聚力

  • 社区支持的“最佳实践”可加快长期的开发速度。
  • Ember 具有明确的约定，有助于强制执行一致性并帮助团队成员快速上手。

Ember 与插件

EmberJS 具有插件架构，这意味着可以安装插件并在无需太多配置的情况下提供额外的功能。

示例包括

• PREmber：用于博客或营销内容的静态网站渲染。
• empress-blog：使用 markdown 编写博客文章，并通过 PREmber 优化 SEO。
• ember-service-worker：配置 PWA，使应用程序可以像设备各自的应用商店中的应用程序一样安装在移动设备上。

理念

EmberJS 是现有的最具有“主见”（opinionated）的前端框架之一。但是，有主见意味着什么呢？在 Ember 中，主见是一系列约定，通过学习这些约定，可以提高开发人员的效率。随着约定的定义和共享，支持这些主见的约定有助于减少应用程序之间的琐碎差异——这是所有有主见的框架（无论何种语言和生态系统）的共同目标。开发人员可以更容易地在项目和应用程序之间切换，而无需完全重新学习架构、模式、约定等。

在完成本系列教程时，您会注意到 Ember 的“主见”——例如组件文件的严格命名约定。

Ember 与原生 JavaScript 的关系

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 演示了不到 20% 的 JavaScript 代码是 Ember 特有的。

入门

您在此处找到的其余 Ember 材料包含一个多部分教程，其中我们将制作经典 TodoMVC 示例应用程序的一个版本，在此过程中教您如何使用 Ember 框架的基本要素。TodoMVC 是一个用许多不同技术实现的简单待办事项跟踪应用程序。

这是已完成的 Ember 版本，供参考。

关于 TodoMVC 和可访问性的注意事项

TodoMVC 项目在遵守可访问/默认 Web 实践方面存在一些问题。在 TodoMVC 系列项目中，有一些关于此的 GitHub 问题是开放的：

• 为演示添加键盘访问
• 重新启用可聚焦元素的轮廓

Ember 坚定致力于默认情况下是可访问的，并且在Ember 指南中有一个关于可访问性的完整部分，阐述了它对网站/应用程序设计意味着什么。

也就是说，由于本教程侧重于制作小型 Web 应用程序的 JavaScript 方面，TodoMVC 的价值在于提供预制的 CSS 和推荐的 HTML 结构，这消除了实现之间的小差异，从而更容易进行比较。在教程的后面，我们将重点为我们的应用程序添加代码以修复 TodoMVC 的一些最大缺陷。

安装 Ember 工具

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 项目

在继续与您的全新项目互动之前，您需要一个代码编辑器。如果您还没有配置好，The Ember Atlas 提供了一些关于如何设置各种编辑器的指南。

安装 TodoMVC 项目的共享资产

安装共享资产，正如我们接下来将要做的，通常不是新项目所需的步骤，但它允许我们使用现有的共享 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 Guides 中有一页关于插件和依赖项。

6. 最后，找到位于 `app/styles/app.css` 的 `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` 启动，您可以在浏览器中访问它，查看您目前的工作成果。

如果一切正常，您应该会看到如下页面

总结

目前为止都很好。我们已经到了可以开始在 Ember 中构建我们的 TodoMVC 示例应用程序的程度。在下一篇文章中，我们将着手构建应用程序的标记结构，将其组织成一组逻辑组件。

• 概述：JavaScript 框架和库
• 下一页