「周更第12期」实用JS库推荐：Driver.js

引言

在产品上线与迭代中，用户引导与功能讲解是提升转化与留存的关键环节。相比自研遮罩与弹层，Driver.js 提供了轻量、零依赖、可高度定制的引导引擎，能够在页面中高亮关键元素并展示说明弹层，帮助用户循序掌握核心功能。本期我们聚焦 Driver.js，从特性、安装使用、实际应用到最佳实践与常见陷阱，为你提供一套可落地的方案。

库介绍

基本信息

库名称：Driver.js
GitHub 地址 ：github.com/kamranahmed...
npm 地址 ：www.npmjs.com/package/dri...
官方文档 ：driverjs.com/docs/instal...
GitHub Stars：约 25k ⭐（以目前时间为准）
最新版本：1.3.6（npm 页面显示）
包大小：约 5KB gzipped（官方发布说明）
维护状态：活跃维护（最新 Issue/Release 持续更新）
依赖关系：零依赖，Vanilla TypeScript 编写

主要特性

🚀 轻量与零依赖：核心功能精简，加载成本极低，适合任意前端栈
💡 高度可定制：Popover 样式与交互可灵活配置，支持自定义主题与按钮
🔄 步骤驱动：内置步骤引导、进度展示与前后导航，支持单元素高亮与多步骤导览
⏱ 异步可控：可拦截下一步并在任务完成后继续，适用于异步加载与校验场景
🧩 框架无关：适配任意前端框架或原生开发，TypeScript 友好

兼容性

浏览器支持：现代浏览器（建议 Chrome/Firefox/Edge 的最近版本）
Node.js 支持：主要用于浏览器端，Node 环境下建议以 SSR 动态加载方式集成
框架兼容：可与 React/Vue/Angular 等框架无缝结合
TypeScript 支持：提供类型定义，开发体验优秀

安装使用

安装方式（统一使用 pnpm）

bash 复制代码

pnpm add driver.js

同时确保样式文件已引入：

javascript 复制代码

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'

或使用 CDN（无需打包环境）：

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css"/>

基础使用

单元素高亮与说明：

javascript 复制代码

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'

// 创建实例并高亮单个元素
const runSingleHighlight = () => {
  const d = driver()
  d.highlight({
    element: '#create-btn',
    popover: {
      title: '创建内容',
      description: '点击这里新建一个条目，开始你的工作流',
      side: 'bottom',
      align: 'start'
    }
  })
}

多步骤引导（带进度与导航）：

javascript 复制代码

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'

const runTour = () => {
  const d = driver({ showProgress: true })
  d.drive({
    steps: [
      {
        element: '#create-btn',
        popover: { title: '创建', description: '从这里发起新建流程' }
      },
      {
        element: '#filter-input',
        popover: { title: '筛选', description: '输入关键字快速定位内容' }
      },
      {
        element: '#export-link',
        popover: { title: '导出', description: '完成后可导出为 CSV/Excel' }
      }
    ]
  })
}

常用配置选项

javascript 复制代码

const d = driver({
  showProgress: true,      // 显示步骤进度
  overlayColor: 'rgba(0,0,0,0.5)', // 背景遮罩颜色
  smoothScroll: true,      // 平滑滚动至目标元素
  allowClose: true,        // 允许点击遮罩关闭
  popoverClass: 'driverjs-theme' // 自定义主题类名
})

实际应用

应用场景 1：新手引导（首访触发）

在用户首次进入系统时，触发多步骤导览并引导完成关键操作；结束后写入本地存储避免重复打扰。

javascript 复制代码

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'

/**
 * 首次访问启动引导
 */
const bootstrapOnboarding = () => {
  const visited = localStorage.getItem('onboarding:done')
  if (visited) return
  const d = driver({ showProgress: true })
  d.drive({
    steps: [
      { element: '#nav-dashboard', popover: { title: '总览', description: '查看系统状态与关键指标' } },
      { element: '#create-btn', popover: { title: '创建', description: '新建任务或项目' } },
      { element: '#help-link', popover: { title: '帮助', description: '遇到问题？查看文档或联系支持' } }
    ],
    onDestroyed: () => localStorage.setItem('onboarding:done', '1')
  })
}

应用场景 2：异步校验后再进入下一步

在某一步需要请求服务器或等待资源准备时，拦截"下一步"，完成后再继续流转。

javascript 复制代码

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'

/**
 * 带异步拦截的导览
 */
const runAsyncTour = () => {
  const d = driver({ showProgress: true })
  d.drive({
    steps: [
      { element: '#profile', popover: { title: '资料', description: '完善你的个人信息' } },
      { element: '#verify', popover: { title: '校验', description: '系统正在验证你的权限' } },
      { element: '#done', popover: { title: '完成', description: '恭喜，全部设置就绪' } }
    ],
    onNextClick: async ({ prevent, moveNext, step }) => {
      if (step?.element === '#verify') {
        prevent()
        await fetch('/api/verify')
        moveNext()
      }
    }
  })
}

优缺点分析

优点 ✅

体积小、零依赖，集成与按需加载友好
API 简洁直观，类型完善，学习成本低
主题/按钮/定位等可高度定制，适应复杂 UI
支持多步骤进度、单元素高亮、异步拦截等常见需求

缺点 ❌

需要同时引入 CSS，否则弹层样式不可用
SSR 需在客户端动态初始化，服务端阶段不可渲染
复杂流程（分支/回退）需自行管理状态与导航

最佳实践

按需与懒加载：首屏不使用时建议异步加载 driver.js 以降低初始体积
自定义主题与 Less 变量：通过 popoverClass 与 Less 全局变量统一色彩与间距
退出确认：在关键引导中通过 onDestroyStarted 自定义确认以避免误退出
无障碍与可用性：控制遮罩透明度与焦点顺序，避免阻断核心任务

常见陷阱

忘记引入 driver.css：导致弹层不可见或样式缺失
容器 overflow/z-index 异常：可能遮挡或错位，需调整层级
动态内容未渲染：高亮前确保元素已存在，必要时启用 smoothScroll

总结

Driver.js 以超小体积与直观 API 成为产品引导的不二之选。若你正在为新功能上手、工作流说明或关键路径引导寻找一套通用方案，它几乎可以做到"开箱即用 + 深度定制"。

「周更第12期」实用JS库推荐：Driver.js

引言

库介绍

基本信息

主要特性

兼容性

安装使用

安装方式（统一使用 pnpm）

基础使用

常用配置选项

实际应用

应用场景 1：新手引导（首访触发）

应用场景 2：异步校验后再进入下一步

优缺点分析

优点 ✅

缺点 ❌

最佳实践

常见陷阱

总结

推荐指数：⭐⭐⭐⭐⭐（5/5）

相关资源