在现代 Web 开发领域，演示文稿已经逐渐成为了交流、推广、学习等方面不可或缺的工具。而在这个时代，我们往往不再满足于使用 PowerPoint、Keynote 等传统软件来进行演示，拥有在一系列 Web 技术基础之上构建的演示工具已经成为了大势所趋。其中，Reveal.js 便是一款非常受欢迎的开源项目，早在 2011 年便由 Hakim El Hattab 发布。使用 Reveal.js 等 Web 技术可以构建出更加轻量级、可定制、可在线共享的演示文稿。
但是，要从零开始搭建 Reveal.js 实现个性化定制、实现复杂功能会比较困难。因此，本文介绍一款名为 ember-reveal-js 的 npm 包，可以帮助你更快速地构建出基于 Reveal.js 的个性化演示文稿，并将其嵌入到您的 Ember.js 应用程序中。本篇文档的核心在于深入理解 ember-reveal-js 的功能和设计思路。
ember-reveal-js 的使用
在安装 ember-reveal-js 时，您需要保证您在本地已安装了 Node.js 和 npm。在项目目录下，您可以使用以下命令：
npm install --save ember-reveal-js
安装过程可能需要一些时间。
安装完成后，我们需要把 ember-reveal-js 添加到我们的 ember-cli-build.js 文件中。在这个名为 ember-cli-build.js 的文件中我们可以定义许多应用程序构建时需要的详情。让我们添加一些第三方插件和 Reveal.js 核心模块：
-- -------------------- ---- -------
---
--- --- - --- ------------------ -
------------------ -
------ -------- -- -------
-------- -
------- -------- ------------
-- -- ---- --------- ---
-------------- -
--------- -----
--------- -----
------- -----
-------------------- --
------------- -----
-- -- -- --------- -----
--
------------------ -
------------ ----- -- ----------
--
------------------- -
-------- ----- -- -- ---------
--
------------ -
---- -
----- -------------
--- --------------------------
---- -
---
-
--
------- -
---
-
-
---
---
-------------- - -------------在此处，我们只需要关心被注释文本所标示的区域和 ember-reveal-js 的配置项。我们需要选择一个主题背景，加载一些插件，以及上传 Reveal.js 的配置项以跟随我们的演示文稿需求。关于配置选项，您可以访问 Reveal.js 的官方文档查看。
在轻松设置好 ember-reveal-js 并准备好添加内容的情况下，我们可以开始编辑您的演示文稿的内容。我们可以在您的 app/hbs 文件夹中创建一个 .md 文件：
演示标题
演示主题 1
演示主题 1.1
演示主题 1.2
演示主题 2
我们可以简单地使用句点和空格分隔不同级别的标题。每个标题都以 > 记号和一个空格开始，之后是标题的文本。之后可以添加更多的文本到每个主题。
演示列表
- 第一个演示列表项
- 第二个演示列表项
JavaScript 代码段
(function(i) {
console.log(i * 2);
})(2);如上所见，在每一个主题之后都需要添加一个水平线以区分演示内容。添加代码块时，您可以使用三反引号作为开始和结束标识。
最后，为了在您的应用程序中显示编辑的演示文稿，请添加以下内容到你的路由文件中：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
------------- -
--------- -----
--
-------- -
------------------- -
------------------ ------- --- ------------------------------
--
--
---在我们的控制器中，我们传递 revealConfig 对象和一个名为 slideChanged 的 action。该对象将被传递给组件，并用于组件的配置。slideChanged action 在访问者导航演示的时候被触发。
理解 ember-reveal-js 设计思路
ember-reveal-js 可以视为是一个内置有 Reveal.js 基本部件集的组件剪切板。它以纯 HTML 为输入，并将其转换为为一系列可交互的页面。 Reveal.js 库不止具备了动态效果，还包括了与不同数据源交互的功能，例如通过 url 进行页面跳转、适用于任何搜索引擎的设计结构、可以拓展很多其他可定制的功能。
在 ember-reveal-js 中，所有的“演讲内容”都必须是在单个 HTML/Markdown 文件中定义完成后再集成到应用程序中。因此，您必须对演示文稿的结构有所了解，并且需要在您的内容中使用一些内置的 HTML 布局。ember-reveal-js 还允许用户逐页跳转（通过“上一页”、“下一页”链接或左右箭头），或者可以通过 URL 直接打开某个页面。
ember-reveal-js 从核心上涉及的部件只有两个：配置对象和 Reveal.js 插件集合。配置对象是用于传递各种自定义功能的，比如控制播放时间、位置和控制器。插件集合是为了允许我们在演示文稿中插入 Reveal.js 插件，例如：zoom，highlight 和 notes 等。在最终应用程序中，它们将被链接到某个演示文稿的特定页面。
ember-reveal-js 组件作为一个典型的 Ember.js 插件，实现了针对演示模块的模块化组件体系。组件接受到一个 HTML 入口和一个选项（即包含了启用了哪些 Reveal.js 插件，并且需要不需要以演示模式来启动等），通过调用函数 addEventListeners 来将事件响应正确地实现。
在实现 ember-reveal-js 的过程中，许多关于 ECMAScript ES6 和 ES7 的典型概念被广泛运用：箭头函数、迭代器、Proxies 和 Symbol 等。
结论
ember-reveal-js 是一个具备扩展性的插件系统，内置于 Reveal.js 基础组件，可以让我们更加便利地引导教学、推销产品，进行在线展示等等。能够获得这些效果的核心源自于在使用过程中掌握灵活运用 HTML 布局。在使用 ember-reveal-js 的过程中，我们将对如何进行页面排版操作更加熟悉，以及在 Ember.js 单页应用程序内实现这一目标，我们需要了解一些较为繁琐的配置数据和插件集合设置。通过此篇文章的介绍，您应当了解到了这些核心点，并且深入理解其实现思路。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecbfd