大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是管理用户焦点的前端3大顶级开源库，话不多说，直接进入正题！

1. Shepherd.js

Shepherd 是一个 JavaScript 库，用于指导用户正常使用应用程序。 它使用另一个开源库 Floating UI 来呈现每个游览“步骤”的对话框。其中，Floating UI 可确保步骤永远不会超出屏幕或因溢出而被裁剪。

Shepherd 具有以下明显特征：

• 无障碍支持：Shepherd 具有完整的键盘导航支持、焦点捕获以及通过 aria 属性实现的 a11y 合规性。
• 高度可定制：Shepherd 风格保持简约，让开发者可以轻松定制外观和感觉，但仍然为开发者提供足够的空间，方便快速使用。
• 框架支持：Shepherd 已支持与大量前端框架集成，比如： React、Ember、Angular、Vue.js、ES 模块或纯 Javascript 等等

Shepherd.js的使用非常简单，首先引入相关的资源：

<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script src="shepherd.js/dist/js/shepherd.min.js"></script>

接着通过下面的方式直接调用即可：

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'class-1 class-2',
    scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  title: 'Creating a Shepherd Tour',
  text: `Creating a Shepherd tour is easy. too!\
  Just create a \`Tour\` instance, and add as many steps as you want.`,
  attachTo: {
    element: '.hero-example',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating'
});
tour.start();

目前 Shepherd.js 在 Github 上通过 MTI 协议开源，有超过 11.3k 的 star、0.8k 的 fork，是一个值得关注的前端开源项目。

2. Driver.js

Driver.js 是功能强大、高度可定制的原生 JavaScript 引擎，可驱动用户在整个页面上的注意力，同时无外部依赖、轻量级、支持所有主流浏览器且高度可定制。

Driver.js 的典型特征包括：

• 简单：使用简单，完全没有外部依赖。
• 轻量级：与其他经过 +12kb gzip 压缩的库相比，仅 5kb gzip 压缩。
• 高度可定制：拥有强大的 API，可以随心所欲地使用
• 突出显示任何内容：突出显示页面上的任何（实际上是任何）元素
• 丰富的功能介绍：为 Web 应用程序创建强大的功能介绍
• 焦点转移器：为用户添加焦点转移器
• 用户友好：一切都可以通过键盘控制
• 友好的 TypeScript 支持：用 TypeScript 编写
• 一致的行为：可在所有浏览器中使用
• MIT 许可：免费供个人和商业使用

Driver.js 不仅仅是一个导航库，导航只是众多用例之一，Driver.js 可以在任何页面需要某种覆盖的地方使用， 一些常见的用例包括：

• 通过解释如何使用产品并回答常见问题来吸引用户
• 通过突出显示功能，可以消除干扰并将用户的注意力集中在重要的事情上
• 为用户提供上下文帮助，解释如何使用产品并回答常见问题
• 突出显示新功能，解释如何使用它们并确保用户不会错过它们

Driver.js 使用 Vanilla TypeScript 编写，具有零依赖性并且高度可定制。 它有几个选项允许开发者更改其行为方式，并且还提供了在突出显示、即将突出显示或取消选择元素时操作元素的钩子。另外，将 Driver.js 的大小与其他库进行比较，它是最轻量级的，gzip 后只有 ~5kb，而其他库则为 12kb 以上。

使用 Driver.js 也是非常简单，首先通过 NPM 安装 driver.js 或者引入CDN即可。

<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"/>

接着调用 Driver.js 的相关方法即可：

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

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

目前 Driver.js 在 Github 上通过 MTI 协议开源，有超过 15.5k 的 star、0.9k 的 fork、13.7k 的项目依赖量、是一个值得关注的前端开源项目。

3.Intro.js

Intro.js 是一个开源普通 Javascript / CSS 库，用于添加分步介绍或提示。

Intro.js API 的简单性可帮助开发者为产品开发高级入门教程， Intro.js 是轻量级的，只有 10kB 并且没有外部依赖！

Intro.js具有以下显著特征：

• 便于使用：使用简单，且保持轻量，只有 10kB 并且没有任何外部依赖！
• 可定制：Intro.js 提供了多种方法来配置产品入门并自定义导航的每一个步骤。
• 开源：Intro.js 是免费且开源的，在 AGPL 许可下发布， 同时还提供商业许可，支持其他团队成功集成Intro.js。

目前 Intro.js 在 Github 上通过 AGPL 协议开源，有超过 22.1k 的 star、2.6k 的 fork，5.5k的项目依赖量、代码贡献者100+，是一个值得关注的前端开源项目。

Intro.js的使用也非常简单，可以使用 data-intro 和 data-title HTML 属性创建产品导览。只需将这些属性添加到元素并调用 introJs().start() 即可，比如下面的例子：

<div data-title="Welcome!" data-intro="Hello World! " class="card-demo">
  <div class="card shadow--md">
    <div class="card__image" data-intro="Intro.js can highlight on elements">
      <img
        src="..."
        alt="Image alt text"
        title="Logo Title Text 1"
      />
    </div>
    <div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
      <h4>Quaco Lighthouse</h4>
      <small>
        The Quaco Head Lighthouse is a well maintained lighthouse close to St.
        Martins. It is a short, beautiful walk to the lighthouse along the
        seashore.
      </small>
    </div>
  </div>
</div>

接着调用下面的方法即可：

// Intro.js scans the webpage and finds all elements with `data-intro` attribute
introJs().start();

4.本文总结

本文主要和大家聊聊管理用户焦点的前端3大顶级开源库，如：Shepherd.js 、Driver.js 、Intro.js。相信通过本文的阅读，大家对 Shepherd.js 、Driver.js 、Intro.js 会有一个初步的了解，同时也会有自己的看法。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/kamranahmedse/driver.js

https://github.com/shipshapecode/shepherd

https://shepherdjs.dev/

https://driverjs.com/

http://introjs.com/

https://driverjs.com/docs/installation/