关于前端:不使用第三方库怎么实现前端引导页功能

前言

随着利用性能越来越多，繁多而具体的性能应用和阐明文档，曾经不能满足时代谋求疾速的需要，而 疏导页（或分步疏导） 实质就是 化繁为简，将外围性能以更简略、简短、明了的文字指引用户去应用对应的性能，特地是 ToB 的我的项目，各种新性能需要迭代十分快，免不了须要 疏导页 的性能来疾速帮忙用户疏导。

上面咱们通过两个方面来围绕着【前端疏导页】进行开展：

哪些第三方库能够间接应用疾速实现性能？
如何本人实现前端疏导页的性能？

第三方库的抉择

如果你不晓得如何做技术选型，能够看看 山月大佬 的这一篇文章在前端中，如何更好地做技术选型？，上面就简略列举几个相干的库进行简略介绍，具体需要具体分析抉择，其余和 API 应用、具体实现成果能够通过官网文档或对应的 README.md 进行查看。

vue-tour

vue-tour 是一个轻量级、简略且可自定义的 Tour 插件，配置也算比较简单清晰，但只实用于 Vue2 的我的项目，具体成果能够间接参考对应的后面链接对应的内容。

driver.js

driver.js 是一个弱小而轻量级的一般 JavaScript 引擎，可在整个页面上驱动用户的注意力，只有 4kb 左右的体积，并且没有内部依赖，不仅高度可定制，还能够反对所有支流浏览器。

shepherd.js

shepherd.js 蕴含的 API 泛滥，大多场景都能够通过其对应的配置失去，毛病就是整体的包体积较大，并且配置也比较复杂，配置简单的内容个别都须要进行二次封装，将可变和不可变的配置项进行抽离，具体成果可见其 官网文档。

intro.js

intro.js 是是一个开源的 vanilla Javascript/CSS 库，用于增加分步介绍或提醒，大小在 10kB左右，属于轻量级的且无内部依赖，详情可见 官网文档。

实现疏导页性能

疏导页外围性能其实就两点：

一是 高亮局部
二是 疏导局部

而这两点其实真的不难实现，无非就是 疏导局部 跟着 高亮局部 挪动，并且增加一些简略的动画或过渡成果即可，也分为 蒙层疏导 和 无蒙层疏导，这里介绍绝对比较复杂的 蒙层疏导，上面就简略介绍两种简略的实现计划。

cloneNode + position + transition

外围实现：

高亮局部 通过 el.cloneNode(true) 复制对应指标元素节点，并将克隆节点增加到蒙层上
- 通过 margin（或 tranlate、position 等）实现克隆节点的地位与指标节点重合
疏导局部 通过 position: fixed 实现定位成果，并通过动静批改 left、top 属性实现疏导弹窗追随指标挪动
过渡动画 通过 transition 实现地位的平滑挪动
页面 地位/内容 发生变化时（如：resize、scroll 事件），须要从新计算地位信息

毛病：

指标节点须要被深度复制
不能实现边疏导边操作

成果演示：

外围代码：

// 外围配置参数const selectors = [  {    selector: "#btn1",    message: "点此【新增】数据！",  },  {    selector: "#btn2",    message: "小心【删除】数据！",  },  {    selector: "#btn3",    message: "可通过此按钮【批改】数据！",  },  {    selector: "#btn4",    message: "一键【实现】所有操作！",  },];// Guide.vue<script setup>import { computed, onMounted, ref } from "vue";const props = defineProps({  selectors: Array,});const guideModalRef = ref(null);const guideBoxRef = ref(null);const index = ref(0);const show = ref(true);let cloneNode = null;let currNode = null;let message = computed(() => {  return props.selectors[index.value]?.message;});const genGuide = (hasChange = true) => {  // 前置操作  cloneNode && guideModalRef.value?.removeChild(cloneNode);  // 所有指引结束  if (index.value > props.selectors.length - 1) {    show.value = false;    return;  }  // 获取指标节点信息  currNode =    currNode || document.querySelector(props.selectors[index.value].selector);  const { x, y, width, height } = currNode.getBoundingClientRect();  // 克隆节点  cloneNode = hasChange ? currNode.cloneNode(true) : cloneNode;  cloneNode.id = currNode.id + "_clone";  cloneNode.style = `  margin-left: ${x}px;  margin-top: ${y}px;  `;  // 指引相干  if (guideBoxRef.value) {    const halfClientHeight = guideBoxRef.value.clientHeight / 2;    guideBoxRef.value.style = `   left:${x + width + 10}px;   top:${y <= halfClientHeight ? y : y - halfClientHeight + height / 2}px;  `;    guideModalRef.value?.appendChild(cloneNode);  }};// 页面内容发生变化时，从新计算地位window.addEventListener("resize", () => genGuide(false));window.addEventListener("scroll", () => genGuide(false));// 上一步/下一步const changeStep = (isPre) => {  isPre ? index.value-- : index.value++;  currNode = null;  genGuide();};onMounted(() => {  genGuide();});</script><template>  <teleport to="body">    <div v-if="show" ref="guideModalRef" class="guide-modal">      <div ref="guideBoxRef" class="guide-box">        <div>{{ message }}</div>        <button class="btn" :disabled="index === 0" @click="changeStep(true)">          上一步        </button>        <button class="btn" @click="changeStep(false)">下一步</button>      </div>    </div>  </teleport></template><style scoped>.guide-modal {  position: fixed;  z-index: 999;  left: 0;  right: 0;  top: 0;  bottom: 0;  background-color: rgba(0, 0, 0, 0.3);}.guide-box {  width: 150px;  min-height: 10px;  border-radius: 5px;  background-color: #fff;  position: absolute;  transition: 0.5s;  padding: 10px;  text-align: center;}.btn {  margin: 20px 5px 5px 5px;}</style>

z-index + position + transition

外围实现：

高亮局部 通过管制 z-index 的值，让指标元素展现在蒙层之上
疏导局部 通过 position: fixed 实现定位成果，并通过动静批改 left、top 属性实现疏导弹窗追随指标挪动
过渡动画 通过 transition 实现地位的平滑挪动
页面 地位/内容 发生变化时（如：resize、scroll 事件），须要从新计算地位信息

毛病：

当指标元素的父元素 position: fixed | absolute | sticky 时，指标元素的 z-index 无奈超过蒙版层（可参考 shepherd.js 的 svg 解决方案）

成果演示：

外围代码：

<script setup>import { computed, onMounted, ref } from "vue";const props = defineProps({  selectors: Array,});const guideModalRef = ref(null);const guideBoxRef = ref(null);const index = ref(0);const show = ref(true);let preNode = null;let message = computed(() => {  return props.selectors[index.value]?.message;});const genGuide = (hasChange = true) => {  // 所有指引结束  if (index.value > props.selectors.length - 1) {    show.value = false;    return;  }  // 批改上一个节点的 z-index  if (preNode) preNode.style = `z-index: 0;`;  // 获取指标节点信息  const target =    preNode = document.querySelector(props.selectors[index.value].selector);  target.style = `  position: relative;   z-index: 1000;  `;  const { x, y, width, height } = target.getBoundingClientRect();  // 指引相干  if (guideBoxRef.value) {    const halfClientHeight = guideBoxRef.value.clientHeight / 2;    guideBoxRef.value.style = `   left:${x + width + 10}px;   top:${y <= halfClientHeight ? y : y - halfClientHeight + height / 2}px;  `;  }};// 页面内容发生变化时，从新计算地位window.addEventListener("resize", () => genGuide(false));window.addEventListener("scroll", () => genGuide(false));const changeStep = (isPre) => {  isPre ? index.value-- : index.value++;  genGuide();};onMounted(() => {  genGuide();});</script><template>  <teleport to="body">    <div v-if="show" ref="guideModalRef" class="guide-modal">      <div ref="guideBoxRef" class="guide-box">        <div>{{ message }}</div>        <button class="btn" :disabled="index === 0" @click="changeStep(true)">          上一步        </button>        <button class="btn" @click="changeStep(false)">下一步</button>      </div>    </div>  </teleport></template><style scoped>.guide-modal {  position: fixed;  z-index: 999;  left: 0;  right: 0;  top: 0;  bottom: 0;  background-color: rgba(0, 0, 0, 0.3);}.guide-box {  width: 150px;  min-height: 10px;  border-radius: 5px;  background-color: #fff;  position: absolute;  transition: 0.5s;  padding: 10px;  text-align: center;}.btn {  margin: 20px 5px 5px 5px;}</style>

【扩大】`SVG` 如何完满解决 `z-index` 生效的问题？

这里以 shepherd.js 来举例说明，先来看起官网文档展现的 demo 成果：

在上述展现的成果中进行了一些验证：

失常点击 NEXT 进入下一步指引，仔细观察 SVG 相干数据产生了变动
等到指引局部指向代码块的内容区时，复制了此时 SVG 中和 path 相干的参数
返回到第一步很显著此时的高亮局部高度较小，将上一步复制的参数间接替换以后 SVG 中和 path 相干的参数，此时发现整体 SVG 高亮内容宽高产生了变动

外围论断：通过 SVG 可编码的特点，利用 SVG 来实现蒙版成果，并且在绘制蒙版时，预留出指标元素的高亮区间（即 SVG 不须要绘制这一部分），这样就解决了应用 z-index 可能会生效的问题。

最初

以上就是一些简略实现，但还有很多细节须要思考，比方：边疏导边操作的实现、定位起因导致的图层展现问题等仍须要优化。

置信大部分人第一直觉是：间接应用第三方库实现性能就好了呀，本人实现性能不全、也未必好用，属实没有必要。

对于这一点其实在早前看到的一句话说的挺好：理解底层实现原理比应用库自身更有意义，当然每个人的想法不同，不过如果你想开始理解原理又不能立马挑战一些浅近的内容，为什么不先从本人感兴趣的又不是那么简单的性能开始呢？

往期文章举荐

2022 你还不会微前端吗 (下) — 揭秘微前端外围原理
2022 你还不会微前端吗 (上) — 从巨石利用到微利用
据说你很理解 Vue3 响应式？
给我实现一个前端的 Excel 导入和导出性能
前端性能优化到底该怎么做（上）— 单刀直入
前端性能优化到底该怎么做（下）— 直捣黄龙
你晓得前端水印性能是怎么实现的吗？

前言