driver.js：一个功能强大且高度可定制新用户引导库

driver.js 是一个功能强大且高度可定制新用户引导库，相比较于同类型功能库 Intro.js^[1]，driver.js 遵循 MIT 协议，可以免费商用。

官网地址：https://driverjs.com/

下面我们就来介绍 driver.js 的基础使用。

安装

driver.js 支持 npm 包（npm install driver.js） + CDN 方式使用，为了方便，我们以 CDN 方式来说明使用。HTML 中引入 driver.js 相关的 JS 和 CSS 资源就行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
  </head>

  <body>
    <script>
      // your code here
    </script>
  </body>

</html>

再加点简单的样式。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css" />
  <style>
    body {
      min-height: 100vh;
      overflow: hidden;
    }

    .nav {
      display: flex;
      gap: 1rem;
    }

    .container {
      max-width: 768px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="nav">
      <a href="https://github.com/kamranahmedse/driver.js">Github</a>
      <a href="https://github.com/kamranahmedse/driver.js/issues">Issues</a>
      <a href="https://github.com/kamranahmedse/driver.js/blob/master/LICENSE">License</a>
    </div>
    <div class="main">
      <h1>Hello Driver.js</h1>
      <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, quisquam!</p>
      </div>
    </div>
  </div>


  <script>
    // your code here
  </script>
</body>

</html>

查看效果。

然后，我们就可以通过 window 下挂在的 window.driver.js.driver 变量使用 driver.js 了。

<script>
  const d = driver.js.driver

  // your code here
</script>

简单使用

我们先选中包含“Hello Driver.js”文本的 <h1> 标签看看效果。

<script>
  const d = driver.js.driver

  // (1)
  d().highlight({ // (2)
    element: document.querySelector('h1'), // (3)
    popover: { // (4)
      title: 'Hello Driver.js',
      description: 'This is a popover description',
    }
  })
</script>

(1) 首先初始化 Driver.js 实例对象，然后调用高亮方法 d().highlight()
(2) 高亮方法内部接收一个对象选项参数
(3) 通过 element 字段指定高亮元素
(4) 通过 popover 对象指定指引文案，文案分标题和描述部分 { title: 'xx', description: 'xx' }。

下面来看下效果。

效果还是不错的。

多个元素

当然，我们还可以高亮多个元素，这部分的 API 就跟前一步不太一样了。

<script>
  const d = driver.js.driver

  d({
    steps: [
      {
        element: document.querySelector('h1'),
        popover: {
          title: 'Hello Driver.js',
          description: 'This is a popover description',
        }
      },
      {
        element: document.querySelector('.nav'),
        popover: {
          title: 'Menu',
          description: 'This is menu's description',
        }
      }
    ]
  })/* (1) */.drive() // (2)
</script>

(1) 针对高亮多个元素，我们在初始化 Driver.js 实例对象的时候，就要传入包含 steps 数组的配置对象 d({ steps: [] })，steps 中的每个成员都是前一步传入 highlight() 方法的参数对象 { element: x, popover: {} }
(2) 这里就不调用 highlight() 方法了，直接开车 dirve()。

多了一个到前一步、下一步的导航。

点击 Done 后，导航就结束了。

当然，我们在初始化 Driver.js 实例对象时，还可以传入 showProgress: true 参数，展示当前导航进度。

<script>
  const d = driver.js.driver

  d({
+    showProgress: true,
     steps: [
       // ....
     ]
  }).drive()
</script>

查看效果：

中文国际化

因为 Driver.js 组件内置是英文，我们也可以初始化 Driver.js 实例对象的时候，将上一步/下一步/完成按钮的文本你设置中文的。

<script>
  const d = driver.js.driver

  d({
     showProgress: true,

+   // Text to show in the buttons. `doneBtnText`
+    // is used on the last step of a tour.
+    nextBtnText: '下一步',
+    prevBtnText: '上一步',
+    doneBtnText: '完成',
     
     steps: [
       // ....
     ]
  }).drive()
</script>

查看效果：

前端框架中使用

Driver.js 没有针对特定前端框架的封装，不过想要在前端框架中引入也比较简单。以 React 为例。

// Import the required JavaScript and CSS on top of the component
import * as Driver from 'driver.js'; // (1)
import 'driver.js/dist/driver.min.css'; (1)

// In your react component
useEffect(() => { // (2)
  // Run Driver on component mount

  // then add a click handler or however you
  // might want to trigger it and initialize the Driver
  const driver = new Driver();
  driver.highlight({
    element: '#title-item',
    stageBackground: 'blue'
  });
}, []);