# Driver.js 是什么

URL: https://caijiao.org/driver-js/01-intro/01-what-is-driver-js
Source: docs/driver-js/01-intro/01-what-is-driver-js.md
Description: 介绍 Driver.js 的定位、核心能力、适用场景与不适用场景，帮助初学者判断何时应该使用页面引导和元素高亮。

Driver.js 是一个用于创建页面引导的 JavaScript 库。它会在页面上生成遮罩层，高亮某个目标元素，并在目标旁边显示说明弹层。多个高亮步骤串起来，就形成了常见的产品导览。

与把说明写在页面顶部不同，Driver.js 的提示跟随具体界面元素出现，用户能直接看到“这个按钮在哪里”“下一步该点哪里”“这个字段为什么重要”。

## 核心能力

| 能力 | 用途 |
| --- | --- |
| 元素高亮 | 聚焦一个按钮、表单项、导航入口或任意 CSS 选择器匹配的元素 |
| 分步导览 | 用 `steps` 定义多个步骤，再用 `drive()` 启动 |
| 单点提示 | 用 `highlight()` 对一个元素做即时说明 |
| 弹层控制 | 设置标题、描述、位置、按钮文本、进度和关闭行为 |
| 生命周期 hooks | 在步骤切换、弹层渲染、销毁时执行自定义逻辑 |
| 样式定制 | 覆盖 CSS 变量或配置 `popoverClass` 做主题适配 |

## Driver.js 适合解决什么问题

Driver.js 更适合“用户已经在页面里，但不知道某个界面如何使用”的问题，例如：

- 后台管理系统首次登录后的功能导览。
- 数据看板中新图表、新筛选器的功能说明。
- 编辑器、低代码平台、设计工具中的区域介绍。
- 新版本发布后，对关键变化做一次性提示。
- 内部系统中替代一部分培训文档。

## 不适合什么场景

Driver.js 不是完整的帮助中心，也不应该替代清晰的信息架构。

| 不适合场景 | 更好的做法 |
| --- | --- |
| 页面本身非常混乱 | 先优化页面结构和文案 |
| 大段概念教学 | 写教程、文档或帮助中心 |
| 用户频繁重复执行的流程 | 把流程本身做得更短、更直观 |
| 移动端屏幕过小且元素密集 | 优先简化页面，减少弹层遮挡 |

## 一个最小示例

下面的代码高亮 `#create-project` 按钮，并显示一段说明。

```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();

driverObj.highlight({
  element: "#create-project",
  popover: {
    title: "创建项目",
    description: "从这里开始创建你的第一个项目。",
    side: "bottom",
    align: "start",
  },
});
```

## 学习建议

学习 Driver.js 时不要只记 API。更重要的是先想清楚引导目的：用户当前卡在哪里、完成什么动作才算成功、提示是否应该只出现一次。

一个好的页面引导通常很短，只解释用户当前最需要的信息。