在开发 Web 应用时，引导用户使用已有功能或新功能往往是必要的。而 Ember.js 是一个流行的前端框架，提供了许多方便的工具来使这个过程更加容易和直观。其中之一就是现成的 npm 包 ember-onboarding，它为用户提供了引导创建新帐户、完成主要任务或探索新功能的工具。
在本文章中，我们将介绍使用 ember-onboarding 的步骤，探讨它的设计和实现，引导开发者利用这个库为自己的应用添加引导功能。
基本使用
首先，我们需要安装 ember-onboarding。打开终端，进入你的 Ember.js 项目根目录，运行以下命令：
npm install ember-onboarding --save-dev
安装完成后，在你的 template 布局文件中加入组件。例如，我们的引导提示要放在“创建帐户”按钮旁边。我们会把这段代码添加到 login.hbs 中：
{{#on-boarding tipTarget=".create-account" isActive=true}}
<div class="onboarding-step">
<h3>创建新帐户</h3>
<p>点击此按钮创建新帐户</p>
<button class="next-button" {{action (on-board-next)}}>下一个</button>
</div>
{{/on-boarding}}
<button class="create-account">创建帐户</button>其中，tipTarget=".create-account" 为提示目标的 CSS 选择器，指定“创建帐户”按钮是提示的目标区域，action (on-board-next) 为下一个按钮的操作函数。此外，最外层的 isAtive=true 属性声明了默认启用引导提示。
完成这一步后，我们就可以看到一个浮窗式提示框，提示用户点击创建帐户按钮。
进一步探究
上面的示例告诉了我们使用了 on-boarding 组件，引导作用由其嵌套的 onboarding-step 成为可能。接下来看它们的代码实现。
我们的提示框组件部分代码如下：
-- -------------------- ---- -------
-- -----------------------------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ - ------- - ---- --------------------
------ - -------- - ---- -----------------
------ ------- ----- ------------------- ------- --------- -
-------- ----------- - --
-------- -------- - ------
-------- ----- - ---
-------
------------------ -
----------------------------
------------------ -- -- -
---------------------------
---
-
--------------------- -
------------------------- ------ -- -
------------- - ------
-- ------ --- ----------------- -
------------- - -----
-
---
-
-------
------------------ -
---------------- -- --
------------------ -- -- -
---------------------------
---
-
-该组件定义了 currentStep、isActive 和 steps 等变量，并提供了三个操作函数：registerStep、activateCurrentStep 和 activateNextStep。
其中，currentStep 跟踪当前激活的提示步骤。isActive 初始为 false，当 isActive 变为 true 时，该组件渲染并激活相应的 onboarding-step 子组件。
registerStep 方法将每个子组件添加到 steps 数组中，并使用 Ember 的 schedule 来确保组件的渲染顺序。activateCurrentStep 方法循环子组件数组，将除当前激活的组件外的所有组件的 isActive 属性设置为 false，激活当前步骤。最后，activateNextStep 方法更新 currentStep 变量并重新调用 activateCurrentStep 方法激活下一个步骤。
在 onboarding-step 组件中，isActive 和 registerStep 方法的实现都很简单：
-- -------------------- ---- -------
-- ---------------------------------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- ----------------------- ------- --------- -
-------- - ------
-------
---------- -
---------------------------
-
-当 isActive 变量从 on-boarding 中的 activateCurrentStep 方法更新时，组件将向 DOM 中添加 CSS 类以显示或隐藏提示框。
最后，我们在 login.hbs 中用到的 on-boarding 定义如下：
{{yield (hash
onRegister=(action registerStep)
onNext=(action activateNextStep)
)}}这个 yield 语句接受两个操作函数：registerStep 和 activateNextStep。前者通过 register 函数将每个 onboarding-step 组册到 on-boarding 子组件中；后者向下一个提示窗口切换。
结语
ember-onboarding 是一个非常实用的 npm 包，提供了 Ember.js 应用中的引导提示功能，减少了开发者的工作量。我们可以用这个包来加快应用的功能探索速度，优化用户的使用体验。通过本文，希望读者了解了如何使用 ember-onboarding，以及它的实现原理。在实践中，还应更进一步探究代码背后的原理并尝试拓展或改进它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca13