控制器系统

相关源文件

• js/controllers/autoanimate.js
• js/controllers/backgrounds.js
• js/controllers/controls.js
• js/controllers/focus.js
• js/controllers/fragments.js
• js/controllers/keyboard.js
• js/controllers/overview.js
• js/controllers/pointer.js
• js/controllers/progress.js
• js/controllers/slidecontent.js
• js/index.js
• js/reveal.js
• js/utils/util.js

控制器系统是 reveal.js 的架构骨干，它提供了管理演示框架特定方面的专用模块。每个控制器负责一个特定的功能或行为，从而实现模块化和可维护的代码库。本文档介绍了控制器架构、生命周期以及为 reveal.js 演示提供支持的关键控制器。

有关与这些控制器交互的主 API 的信息，请参阅 Reveal.js 主 API。有关事件如何流经系统的详细信息，请参阅 事件处理。

控制器架构

reveal.js 演示框架使用基于控制器的模块化架构。每个控制器都由主 Reveal 对象实例化，并管理演示的特定方面。

架构概述

来源：js/reveal.js105-126 js/controllers/slidecontent.js10-500 js/controllers/keyboard.js6-414 js/controllers/autoanimate.js11-626 js/controllers/backgrounds.js7-470 js/controllers/fragments.js8-374 js/controllers/controls.js17-286 js/controllers/overview.js8-254 js/controllers/progress.js4-109

控制器生命周期

reveal.js 中的控制器遵循一致的生命周期模式。

来源：js/reveal.js131-168 js/reveal.js558-601 js/reveal.js607-667

控制器初始化

控制器在 Reveal.js 初始化过程中被实例化。每个控制器都会接收到对主 Reveal 实例的引用，使它们能够在需要时访问配置设置和其他控制器。

来源：js/reveal.js105-126

关键控制器

reveal.js 框架包含许多控制器，每个控制器负责演示的特定方面。以下是最重要的控制器及其职责。

内容控制器

SlideContent

SlideContent 控制器负责加载、卸载和播放幻灯片内容，如图像、视频和 iframe。

主要职责

• 在幻灯片进入视图时加载幻灯片内容
• 在幻灯片隐藏时卸载内容
• 启动和停止嵌入式媒体（视频、音频、iframe）
• 格式化嵌入式内容以正确显示

关键方法

• load(slide, options)：为幻灯片加载内容
• unload(slide)：从幻灯片卸载内容
• startEmbeddedContent(element)：启动嵌入式媒体播放
• stopEmbeddedContent(element, options)：停止嵌入式媒体播放

来源：js/controllers/slidecontent.js10-500

背景

Backgrounds 控制器创建和管理幻灯片背景，包括图像、视频和纯色背景。

主要职责

• 为幻灯片创建背景元素
• 根据当前幻灯片更新背景可见性
• 管理背景过渡
• 处理视差背景效果

关键方法

• render()：创建背景容器
• create()：为所有幻灯片创建背景元素
• sync(slide)：根据幻灯片属性更新其背景
• update(includeAll)：根据当前幻灯片更新背景可见性
• updateParallax()：更新视差背景的位置

来源：js/controllers/backgrounds.js7-470

导航控制器

键盘

Keyboard 控制器处理演示的所有键盘交互。

主要职责

• 处理键盘事件
• 将按键映射到导航操作
• 支持自定义按键绑定

关键方法

• configure(config, oldConfig)：根据配置更新键盘快捷方式
• bind()：开始监听键盘事件
• unbind()：停止监听键盘事件
• addKeyBinding(binding, callback)：添加自定义按键绑定
• removeKeyBinding(keyCode)：删除自定义按键绑定
• triggerKey(keyCode)：以编程方式触发键盘事件

来源：js/controllers/keyboard.js6-414

控制

Controls 控制器管理演示中显示的导航箭头控件。

主要职责

• 渲染导航控件
• 处理控件点击事件
• 根据可用的导航路径更新控件状态

关键方法

• render()：创建控件元素
• bind()：将事件监听器附加到控件
• unbind()：从控件移除事件监听器
• update()：更新控件状态（启用/禁用）

来源：js/controllers/controls.js17-286

片段

Fragments 控制器负责管理幻灯片内分步显示的片段（fragments）的显示和导航。

主要职责

• 管理片段可见性
• 按索引对片段进行排序
• 片段之间的导航

关键方法

• sort(fragments, grouped)：按索引排序片段
• update(index, fragments, slide)：更新片段可见性
• next()：前进到下一个片段
• prev()：移到上一个片段

来源：js/controllers/fragments.js8-374

视觉效果控制器

AutoAnimate

AutoAnimate 控制器提供匹配元素之间的幻灯片自动动画。

主要职责

• 识别幻灯片之间匹配的元素
• 应用 FLIP（First, Last, Invert, Play）动画
• 管理动画时间和缓动

关键方法

• run(fromSlide, toSlide)：启动幻灯片之间的动画
• reset()：清除任何活动的动画
• getAutoAnimatableElements(fromSlide, toSlide)：查找匹配的元素
• autoAnimateElements(from, to, elementOptions, animationOptions, id)：在两个元素之间进行动画

来源：js/controllers/autoanimate.js11-626

概述

Overview 控制器管理概览模式，该模式显示所有幻灯片的鸟瞰图。

主要职责

• 显示所有幻灯片的缩略图视图
• 在概览模式下处理导航
• 管理概览显示的视口

关键方法

• activate()：进入概览模式
• deactivate()：退出概览模式
• toggle(override)：切换概览模式
• update()：更新概览显示

来源： js/controllers/overview.js8-254

UI Controllers

Progress

The Progress controller creates and updates the progress bar for the presentation.

主要职责

• Displaying presentation progress
• Handling clicks on the progress bar for navigation

关键方法

• render(): Creates the progress elements
• update(): Updates the progress bar based on current slide
• onProgressClicked(event): Handles navigation when the progress bar is clicked

来源： js/controllers/progress.js4-109

Pointer

The Pointer controller manages mouse pointer visibility and mouse wheel navigation.

主要职责

• Hiding the cursor when inactive
• Handling mouse wheel navigation

关键方法

• showCursor(): Makes the cursor visible
• hideCursor(): Hides the cursor
• onDocumentMouseScroll(event): Handles mouse wheel navigation

来源： js/controllers/pointer.js4-126

Controller Relationships

Controllers often interact with each other to provide coordinated functionality. Below is a diagram showing key relationships between controllers

来源： js/reveal.js105-126 js/reveal.js542-551 js/controllers/backgrounds.js362-367

Using the Controller System

While most interaction with controllers happens through the main Reveal.js API, you can access controllers directly through the Reveal instance for advanced use cases.

Accessing Controllers

来源： js/index.js13-56

Controller Configuration

Controllers are configured through the main Reveal configuration object. Many controllers have dedicated configuration options that modify their behavior.

来源： js/reveal.js542-551

Extending the Controller System

The controller architecture of reveal.js makes it extensible. You can create custom controllers to add new functionality to your presentations.

Custom Controller Template

A custom controller typically follows this pattern

The modular controller architecture makes reveal.js highly extensible and maintainable, allowing each controller to focus on a specific aspect of the presentation framework.