5分钟吃透Reveal源码，手写实现核心逻辑不踩坑

面试被问“Reveal.js 源码是怎么实现页面切换动画的”，你答得上来吗？别慌，很多后端转全栈的兄弟都栽在这。不是让你背代码，而是得懂那套手写实现背后的设计思想。以前我带新人，总说框架黑盒不用管，直到有一次现场演示，动画卡死，问到底层状态机怎么流转的，新人傻眼。那一刻我就明白，不懂原理，只能等着被坑。

今天就把 Reveal.js 的核心源码拆开揉碎。这玩意儿是 HTML5 演示文稿神器，GitHub 上 30k+ Star，很多大厂技术分享都用它。我们不搞虚的，直接看它怎么把“幻灯片”变成可交互的代码。

入口定位：从 main.js 开始

Reveal 的入口很简单，就在 js/reveal.js 里。但直接看源码会晕，因为它模块化太重了。我们先抓主线：配置 → 初始化 → 渲染 → 事件绑定。

打开源码，第一眼看到的是 Reveal 对象定义。它不是一个简单的函数，而是一个类实例化的结果。核心入口在 Reveal.initialize() 方法里。

// 伪代码简化版，实际源码更复杂
Reveal.initialize = function( config ) {// 1. 合并默认配置this.config = util.extend( this.defaults, config );// 2. 获取 DOM 节点this.slides = document.querySelectorAll( 'section > section' );// 3. 初始化状态this.state = 'ready';// 4. 绑定事件this.bindEvents();// 5. 渲染第一页this.slide( 0, 0 );
}

看到没？状态机是核心。Reveal 内部维护了一个 state 变量，记录当前是“加载中”、“准备就绪”还是“动画中”。这个设计避免了并发冲突，比如你快速按左右键，它不会叠加多个动画。

核心片段：动画与状态流转

Reveal 的魔力在于 CSS 动画与 JS 状态同步。它不用 jQuery，纯原生 DOM 操作。我们看最关键的一段：页面切换逻辑。

在 slide() 方法里，它做了三件事：计算目标索引、触发过渡类、更新哈希。

// 简化自 js/reveal.js 的 slide 方法
Reveal.slide = function( h, v ) {// 1. 计算水平和垂直索引let indexH = h !== undefined ? h : this.indexh;let indexV = v !== undefined ? v : this.indexv;// 2. 获取当前和目标幻灯片元素let currentSlide = this.getSlide( indexH, indexV );let nextSlide = this.getSlide( indexH, indexV ); // 这里简化了垂直查找// 3. 触发 CSS 类切换currentSlide.classList.add( 'past' );nextSlide.classList.add( 'future' );// 4. 更新状态this.state = 'animating';// 5. 监听动画结束currentSlide.addEventListener( 'transitionend', () => {this.state = 'ready';// 更新 URL 哈希window.location.hash = '#' + indexH + '/' + indexV;}, { once: true } );
}

逐行拆解：

第 2-3 行：indexh 和 indexv 是二维坐标。Reveal 支持垂直嵌套幻灯片（如子页面），所以用两个索引定位。
第 5-7 行：关键！它不加 active 类，而是加 past 和 future。CSS 里定义了 .past 向左滑出，.future 从右滑入。类名即状态，这是 CSS 驱动动画的精髓。
第 9 行：状态锁。动画期间 state 变为 animating，此时再按左右键会被忽略，防止动画撕裂。
第 11-15 行：transitionend 事件监听。动画结束后解锁状态，并更新浏览器哈希。这样刷新页面能回到当前页，SEO 友好。

Stack Overflow 上有个高赞回答指出，很多人卡在 transitionend 不触发，原因是 CSS 里没设 transition 属性。记住：JS 只改类名，动画全靠 CSS。

设计思想：解耦与可扩展

Reveal 的架构设计很老派，但很稳。它坚持关注点分离：

配置层：用户传参，合并默认值。
状态层：维护 indexh, indexv, state。
渲染层：操作 DOM，添加/移除类。
插件层：通过 Reveal.registerPlugin() 扩展功能。

这种设计让核心代码极小（< 1000 行核心逻辑），插件可以独立加载。比如 reveal.js-plugins 里的 notes 插件，只负责演讲者备注，不干扰主流程。

避坑指南：

别在 onReady 回调里做重计算，会阻塞渲染。
自定义 CSS 时，务必覆盖 .reveal .slides section 的默认样式，否则动画失效。
移动端触摸事件，Reveal 已内置 hammer.js，别自己加 touchstart。

手写简化版：50 行代码复刻核心

想真正懂，得动手。下面用 50 行 JS + CSS，手写一个迷你 Reveal，支持左右切换、动画、哈希同步。

// mini-reveal.js
class MiniReveal {constructor() {this.slides = document.querySelectorAll('.slide');this.current = 0;this.state = 'ready';this.bindEvents();this.show(0);}bindEvents() {document.addEventListener('keydown', (e) => {if (this.state !== 'ready') return;if (e.key === 'ArrowRight') this.next();if (e.key === 'ArrowLeft') this.prev();});}next() {if (this.current < this.slides.length - 1) this.show(this.current + 1);}prev() {if (this.current > 0) this.show(this.current - 1);}show(index) {// 移除所有 active 类this.slides.forEach(s => s.classList.remove('active'));// 添加 active 类this.slides[index].classList.add('active');// 更新状态和哈希this.current = index;this.state = 'animating';window.location.hash = index + 1;// 模拟动画结束（实际应监听 transitionend）setTimeout(() => {this.state = 'ready';}, 300);}
}// 初始化
new MiniReveal();

/* mini-reveal.css */
.slide {position: absolute;opacity: 0;transform: translateX(100%);transition: all 0.3s ease;
}.slide.active {opacity: 1;transform: translateX(0);
}

对比 Reveal 源码：