本文档介绍了 reveal.js 中的插件架构,详细说明了插件如何注册、加载以及与核心演示框架集成。它涵盖了插件系统的设计、提供给插件开发者的 API,以及插件如何扩展 reveal.js 的功能。
有关创建自己的插件的信息,请参阅 创建自定义插件。有关特定内置插件的详细信息,请参阅其专用页面:Markdown 插件、语法高亮插件、演讲者备注插件、数学插件 或 搜索插件。
reveal.js 的插件架构提供了一种灵活的方式来扩展核心功能,而无需修改框架本身。插件在初始化期间动态加载,并可以通过定义良好的 API 与演示进行交互。
来源:js/reveal.js122-126 js/reveal.js165-166
插件控制器在 reveal.js 初始化期间创建,并负责管理插件的注册、加载和执行。它提供了插件操作的方法,并处理插件的生命周期事件。
插件控制器负责
来源:js/reveal.js122 js/reveal.js165-166 js/reveal.js622
在 reveal.js 初始化期间,框架会加载配置的插件并解析它们的依赖关系。此过程是异步的,并返回一个 Promise,该 Promise 在所有插件完全加载时解析。
插件加载过程
initialize() 时,它会获取插件配置plugins.load() 方法来源:js/reveal.js131-168 js/reveal.js195-248
每个 reveal.js 插件都必须遵循特定的接口才能与框架正确集成。至少,插件必须有一个 ID 和一个初始化函数。
这是必需的插件接口
| 属性/方法 | 类型 | 必填 | 描述 |
|---|---|---|---|
id | 字符串 | 是 | 插件的唯一标识符 |
init(reveal) | 功能 | 是 | 接收 reveal 实例的初始化函数 |
destroy() | 功能 | 否 | 可选的清理方法,在 reveal.js 销毁时调用 |
插件初始化可以是同步的,也可以是异步的。异步插件应返回一个 Promise,该 Promise 在初始化完成后解析。
示例插件结构
来源:plugin/markdown/plugin.js29-489 plugin/markdown/plugin.js418-487
下图展示了 Markdown 插件如何注册并集成到 reveal.js 中
此示例展示了
来源:plugin/markdown/plugin.js418-487 plugin/markdown/plugin.js207-258 js/reveal.js165-166
插件注册后,可以通过 reveal.js API 访问它们。插件还可以通过 reveal 实例与其他插件进行交互。
插件交互示例
reveal.getPlugin('plugin-id') 访问另一个插件来源:js/reveal.js622 js/reveal.js673-686 js/reveal.js715-730
Reveal.js 附带了几个内置插件,它们演示了插件架构并提供了基本功能
| 插件 | ID | 目的 |
|---|---|---|
| Markdown | markdown | 启用以 Markdown 格式编写内容 |
| 备注 | notes | 添加演讲者备注功能 |
| Highlight | highlight | 为代码提供语法高亮 |
| 数学 | math | 启用数学公式渲染 |
| 搜索 | search | 为演示文稿添加搜索功能 |
每个内置插件都遵循相同的插件架构,并作为自定义插件的参考实现。
来源:plugin/markdown/plugin.js419 js/reveal.js122-126
插件可以通过 reveal.js 的初始化选项进行配置。每个插件都可以拥有自己的配置命名空间。
配置示例
插件通过 reveal.getConfig() 访问其配置
来源:plugin/markdown/plugin.js97-108 plugin/markdown/plugin.js429-476
插件可以通过 reveal.js 的事件系统订阅和触发事件。这使得插件能够响应并与核心演示流程集成。
插件可能使用的常见事件包括
| 事件 | 描述 |
|---|---|
ready | reveal.js 初始化后触发 |
slidechanged | 活动幻灯片更改时触发 |
fragmentshown | 片段显示时触发 |
fragmenthidden | 片段隐藏时触发 |
overviewshown | 显示概览模式时触发 |
overviewhidden | 隐藏概览模式时触发 |
paused | 演示文稿暂停时触发 |
resumed | 恢复演示文稿时触发 |
插件使用 on 方法订阅事件
插件也可以触发自己的自定义事件供其他插件监听
来源:js/reveal.js673-686 js/reveal.js715-730 js/reveal.js737-768
当 reveal.js 实例被销毁时,所有已注册的插件都会调用其 destroy 方法(如果它们提供了该方法)。这允许插件清理资源、删除事件监听器并恢复任何已修改的状态。
插件清理由 reveal.js 的销毁过程自动处理
来源:js/reveal.js607-667 js/reveal.js622
reveal.js 的插件架构提供了一种灵活而强大的方式来扩展演示框架的核心功能。通过遵循插件接口并利用提供的 API,开发人员可以创建与 reveal.js 无缝集成的自定义插件。
插件系统遵循以下关键原则
理解此架构对于有效使用内置插件和开发自定义插件以扩展 reveal.js 的新功能至关重要。