前言
在 Ember.js 的开发中，我们经常会使用到不同的 Ember 插件，这些插件通常以 npm 包的形式存在。其中一个非常有用的 npm 包就是 @ember/optional-features，它为我们提供了一种简单的方式来开启和关闭各种 Ember 插件的特性。
在本文中，我们将学习如何通过 @ember/optional-features 包来管理和配置不同的 Ember 插件特性，并以此来加深理解 Ember.js 应用开发的相关知识。
安装
要开始使用 @ember/optional-features 包，我们需要先将其安装到我们的 Ember.js 应用中。我们可以使用以下命令在应用目录下进行安装：
ember install @ember/optional-features
如果一切顺利，你会看到类似以下语句的输出：
installing addon @ember/optional-features installing addon-dev @ember/optional-features ...
配置
一旦我们安装了 @ember/optional-features 包，我们就可以开始在应用中配置和管理不同的 Ember 插件特性了。
在应用的 config/environment.js 文件中，我们可以通过以下方式来配置 @ember/optional-features 包：
-- -------------------- ---- ------- --- --- - - -- --- ---- --- ------------------ - ---------------- ---- -- ------------------ - ------------ ----- -- ----------------------- - ------ ----- -- --------------------------- - --------------------------- ----- --------------------- ----- ------------------------------ ---- - --展开代码
在上述配置中，我们为 @ember/optional-features 包设置了三个不同的特性：
applicationTemplateWrapper：开启该特性后，Ember.js 将会使用应用模板来包括应用中所有的路由模板，默认情况下，Ember.js 使用{{outlet}}来提供一个默认的路由模板。defaultSerialization：开启该特性后，Ember.js 将支持将未知 JSON 对象序列化为 Ember 对象。templateOnlyGlimmerComponents：开启该特性后，Ember.js 将会支持将组件定义为 Glimmer 模板组件，这种组件不需要控制器和视图，只具有一个 Glimmer 模板。
我们也可以根据需要添加或删除其它不同的特性来满足我们的开发需求。
示例代码
在我们学习完如何配置 @ember/optional-features 包之后，下面我们将通过一个简单的示例代码来演示如何使用该包来加深理解。
首先，我们需要创建一个新的 Ember.js 应用。在终端中运行以下命令：
ember new demo-optional-features
在创建完应用后，我们可以在应用的根目录下找到 config/environment.js 文件，将其配置修改为如下：
-- -------------------- ---- ------- --- --- - - ------------- ------------------------- ------------ ------------ -------- ---- ------------- ------- ------------------ - ---------------- ---- -- --------------------------- - --------------------------- ----- --------------------- ----- ------------------------------ ---- -- -- --- ---- - -- --- - --展开代码
现在，在我们的应用中，我们可以使用以下方法来演示 @ember/optional-features 包的不同特性：
应用模板包装特性
我们首先来演示应用模板包装特性，它可以让 Ember.js 使用应用模板来包裹整个应用。我们可以在 app/templates/application.hbs 文件中添加以下代码：
<h1>Welcome to my Ember.js app!</h1> {{outlet}}
在上述代码中，我们可以看到我们使用了 <h1> 元素来添加一个应用级标题，并使用 {{outlet}} 来展示应用中所有的路由。
现在，我们可以使用以下命令来在本地启动应用，并使用浏览器打开 http://localhost:4200 来访问应用：
ember serve如果一切顺利，我们将会看到应用标题被包裹在 <h1> 元素中，并且所有路由被展示在 {{outlet}} 中。
默认序列化特性
接下来，我们将演示默认序列化特性，它可以让 Ember.js 将未知 JSON 对象序列化为 Ember 对象。我们可以使用以下命令来创建一个简单的 JSON 文件：
touch app/data/demo.json
将以下代码添加到 demo.json 文件中：
-- -------------------- ---- ------- - ----- -- ------- ------- ------ --- --------- - --------- ------------- --------- ----------- --------- ----- - -展开代码
接下来，我们可以在 app/controllers/application.js 文件中添加以下代码：
-- -------------------- ---- ------- ------ ---------- ---- -------------------- ------ - ------ - ---- ---------------- ------ ------- ----- --------------------- ------- ---------- - ------- ---------- - --- ---- - ------- -- ------- ------ ------ ----- --- ------ - ----------------- -------------------- - -展开代码
在上述代码中，我们首先定义了 showJson 方法，用来在控制台中输出 JSON 对象。然后我们进行了一个 JSON 解析，将 JSON 字符串转化为 JavaScript 对象，并将该对象输出到控制台中。
在最后的一步中，我们需要在应用中添加一个链接，用来触发控制器中的 showJson 方法。我们可以在 app/templates/application.hbs 文件中添加以下代码：
<h1>Welcome to my Ember.js app!</h1> {{outlet}} <button type="button" onclick={{action "showJson"}}>Show JSON</button>
在上述代码中，我们为按钮添加了一个 onclick 事件，用来触发 showJson 方法。
现在，我们可以使用以下命令来在本地启动应用，并使用浏览器打开 http://localhost:4200 来访问应用：
ember serve如果一切顺利，我们将会看到一个带有文本 Show JSON 的按钮。当我们点击该按钮时，控制台中将会输出 JSON 对象，该对象中包含了名为 Jack 的 JSON 对象。
Glimmer 模板组件特性
最后，我们来演示 Glimmer 模板组件特性，它让我们可以开发没有控制器和视图的组件。我们可以在 app/templates/components/hello-world.hbs 文件中添加以下代码：
<h1>{{@message}}</h1>
在上述代码中，我们定义了一个带有 @message 参数的 Glimmer 模板组件。Glimmer 组件和传统组件的区别在于它们只包含一个 Glimmer 模板，而没有控制器和视图。
接下来，我们可以在 app/templates/application.hbs 文件中添加以下代码：
<h1>Welcome to my Ember.js app!</h1> {{outlet}} {{hello-world message="Hello World!"}}
在上述代码中，我们使用了 {{hello-world}} 组件，并向其传递了一个名为 message 的参数。
现在，我们可以使用以下命令来在本地启动应用，并使用浏览器打开 http://localhost:4200 来访问应用：
ember serve如果一切顺利，我们将会看到所有的文本都被包裹在 <h1> 元素中，并且 Hello World! 这条消息将会被展示在应用的顶部。
结论
通过本文的学习，我们已经了解了如何使用 @ember/optional-features 包来管理和配置不同的 Ember 插件特性。我们演示了包装应用模板、默认序列化和 Glimmer 模板组件这三个特性，并为每一个特性提供了相应的示例代码。这样可以让我们更深入地理解 Ember.js 应用开发的相关知识，并在实践中灵活地使用这些技巧和工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ember-optional-features
