介绍
Narrator 是一个帮助开发人员创建交互式解释性指南的 npm 包。它可以使开发人员以两种不同的方式使用：
- 在应用程序中实时生成解释性对话框
- 为用户提供指南文档，帮助他们完成操作
在本教程中，我们将学习如何使用 Narrator 这个 npm 包。我们将详细介绍它的特性、如何安装和使用 Narrator，以及如何创建交互式解释性对话框。
特性
Narrator 具有以下主要特性：
- 可以用多种不同的方式创建指南文档，如 Markdown、HTML 等
- 可以直接在应用程序中生成解释性对话框，而无需在应用程序中嵌入指南文档
- 提供了丰富的配置选项，可以自定义对话框的样式、动画效果等
- 不依赖其他 JavaScript 库，可以与任何 Web 技术栈一起使用
安装和使用
安装
在安装 Narrator 之前，请确保你的项目已经安装了 Node.js 和 npm。
在命令行窗口中执行以下命令即可安装 Narrator：
npm install narrator --save
使用
要使用 Narrator，我们需要在应用程序中引入它并实例化一个新的 Narrator 对象。以下是一个基本的示例：
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- -------- - --- ---------- ------- - - --- ------------- ------ ---------- -------- ------------ - -- ------- ---- ---展开代码
我们在这里创建了一个新的 Narrator 对象，并使用 guides 配置选项指定了我们的指南文档。我们还指定了本地化设置 locale，这决定了 Narrator 在渲染指南文档时应该使用哪种语言。
我们可以在需要时调用 Narrator 对象的方法来显示指南，例如：
narrator.showGuide('guide-id-1');
一旦调用了 showGuide 方法，Narrator 将在屏幕上显示一个提示框或模态框，其中包含我们指定的指南文档。
创建交互式解释性对话框
现在我们已经了解了如何安装和使用 Narrator，我们可以尝试创建一个交互式解释性对话框了。
首先，我们需要定义解释性对话框的内容。我们可以使用 Markdown 或 HTML 格式来创建指南文档。
以下是一个使用 Markdown 格式的示例：
-- -------------------- ---- ------- - ---- --------- -- -- -------- -------------------- --- --------------------- - ---------------- - ------------------ -- ----- ----------------- --------- ------- --- ------- -------- ------展开代码
API 文档
可以在 Github 中查看 Narrator 的 API 文档。
-- -------------------- ---- ------- ----------------------------------------------------- ------------- ------ -------- ---- ----------- ----- -------- - --- ---------- ------- - - --- ------------- ------ ----- ----------- -------- -------------- -------- - - ------ ------- ------- -- -- - --------------------------------- ------- - -- - ------ ------ ------- -- -- - --------------------------------- - - - -- - --- ------------- ------ ----- -------- - ----- -------- ---------------- -------- - - ------ ------ ------- -- -- - --------------------------------- - -- - ------ ----- ------- -- -- - --------------------------------- ------- - - - - -- ------- ------- --- -- ------------------ -- ------------------------------------ - --------------------------------- -展开代码
在这个示例中，我们定义了两个指南文档，并在其 actions 配置选项中定义了一些交互行为。在第一个指南文档中，当用户点击 不再显示 时，我们将使用 localStorage 设置一个布尔值，以便下次不再显示该指南文档。当用户点击 下一步 时，我们将调用 showGuide 方法，从而显示第二个指南文档。
在第二个指南文档中，当用户点击 上一步 时，我们将返回第一个指南文档。当用户点击 完成 时，我们将使用 localStorage 设置一个布尔值，以便下次不再显示该指南文档。
最后，在上述示例的最后一行，我们检查用户是否关闭了指南文档；如果没有关闭，我们将显示第一个指南文档。
结论
在本文中，我们学习了如何使用 Narrator 这个 npm 包来创建解释性对话框。我们了解了 Narrator 的特性、安装和使用方法，并通过示例代码学习了如何创建交互式解释性对话框。希望本文可以帮助你了解 Narrator，并在你的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80924
