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

今天给大家带来的主题是管理用户焦点的前端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/

思凡资源网

管理用户焦点的前端3大顶级库

1. Shepherd.js

2. Driver.js

3.Intro.js

4.本文总结

参考资料