菜单

插件架构

相关源文件

目的与范围

本文档介绍了 reveal.js 中的插件架构,详细说明了插件如何注册、加载以及与核心演示框架集成。它涵盖了插件系统的设计、提供给插件开发者的 API,以及插件如何扩展 reveal.js 的功能。

有关创建自己的插件的信息,请参阅 创建自定义插件。有关特定内置插件的详细信息,请参阅其专用页面:Markdown 插件语法高亮插件演讲者备注插件数学插件搜索插件

插件系统概述

reveal.js 的插件架构提供了一种灵活的方式来扩展核心功能,而无需修改框架本身。插件在初始化期间动态加载,并可以通过定义良好的 API 与演示进行交互。

来源:js/reveal.js122-126 js/reveal.js165-166

插件控制器

插件控制器在 reveal.js 初始化期间创建,并负责管理插件的注册、加载和执行。它提供了插件操作的方法,并处理插件的生命周期事件。

插件控制器负责

  1. 根据配置加载插件
  2. 解析插件依赖关系
  3. 使用 reveal 实例初始化插件
  4. 提供对已注册插件的访问
  5. 在 reveal.js 销毁时清理插件

来源:js/reveal.js122 js/reveal.js165-166 js/reveal.js622

插件注册和加载

在 reveal.js 初始化期间,框架会加载配置的插件并解析它们的依赖关系。此过程是异步的,并返回一个 Promise,该 Promise 在所有插件完全加载时解析。

插件加载过程

  1. Reveal.js 在初始化期间创建插件控制器
  2. 调用 initialize() 时,它会获取插件配置
  3. 调用带有所配置插件和依赖项的 plugins.load() 方法
  4. 首先加载依赖项(例如 CSS、JavaScript 库)
  5. 每个插件都会与 reveal 实例进行注册和初始化
  6. 所有插件加载完成后,演示文稿开始

来源: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 中

此示例展示了

  1. Markdown 插件脚本被加载
  2. 插件包含在 reveal.js 初始化配置中
  3. 插件控制器注册并初始化插件
  4. 插件访问其特定配置
  5. 插件处理演示文稿中的 Markdown 内容
  6. 完成后,它会发出完成信号,演示文稿开始

来源:plugin/markdown/plugin.js418-487 plugin/markdown/plugin.js207-258 js/reveal.js165-166

插件访问和交互

插件注册后,可以通过 reveal.js API 访问它们。插件还可以通过 reveal 实例与其他插件进行交互。

插件交互示例

  1. 直接访问:插件可以使用 reveal.getPlugin('plugin-id') 访问另一个插件
  2. 基于事件的通信:插件可以通过在 reveal 实例上分发和监听事件来进行通信
  3. DOM 操作:插件可以修改演示文稿的 DOM,其他插件可以响应这些更改

来源:js/reveal.js622 js/reveal.js673-686 js/reveal.js715-730

内置插件

Reveal.js 附带了几个内置插件,它们演示了插件架构并提供了基本功能

插件ID目的
Markdownmarkdown启用以 Markdown 格式编写内容
备注notes添加演讲者备注功能
Highlighthighlight为代码提供语法高亮
数学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 的事件系统订阅和触发事件。这使得插件能够响应并与核心演示流程集成。

插件可能使用的常见事件包括

事件描述
readyreveal.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 无缝集成的自定义插件。

插件系统遵循以下关键原则

  1. 模块化:每个插件都是独立的,专注于特定功能
  2. 非侵入性:插件在不修改核心的情况下进行扩展
  3. 生命周期管理:插件具有明确的初始化和清理流程
  4. 配置:插件可以通过中央 reveal.js 配置进行配置
  5. 事件驱动:插件可以响应和触发事件以进行集成

理解此架构对于有效使用内置插件和开发自定义插件以扩展 reveal.js 的新功能至关重要。