文章页面目录自动生成方案

一、前言

前两天项目遇到一个需要给页面添加大纲导航的功能&＃xff0c;要求把页面中的特定标签加入到大纲导航中。类似这样&＃xff1a;

需求本身并不难&＃xff0c;不过想把这个东西做得通用一些&＃xff0c;也就是以后再有别的页面需要加导航&＃xff0c;不用再重新写很复杂的逻辑了。下面说一下具体实现思路&＃xff0c;并且文末会给出简便易用的导航生成工具。

二、实现思路

1、需求分析

做之前想到之前接触过的markdown编辑器mavon-editor有一个导航&＃xff0c;不过那个导航只能用于编辑器自身&＃xff0c;我去看了一下它的表现&＃xff1a;

点击右边的导航节点&＃xff0c;会自动定位到对应标题元素。当时思考了一下它是怎么记录标题元素的&＃xff0c;会不会是给标题元素加了一个什么id之类的属性&＃xff1f;于是我看了一下生成的DOM&＃xff1a;

竟然是给标题元素加了一个带有id属性的a标签的子节点。不过它生成id的方式比较简单&＃xff0c;单纯的"字符串_编号"而已&＃xff0c;想来并不是那么可靠&＃xff08;难于保证编辑器外有相同id的元素&＃xff09;。

我大体有了一个基本的思路&＃xff1a;

• 既然是对于任意页面都可用&＃xff0c;那可以遍历DOM树&＃xff0c;寻找需要导航的标签&＃xff0c;然后把相关节点位置信息存储起来。这里也可一类似mavon-editor给dom树中插入一个元素作为一个锚点。遍历DOM树的方法应该与DOM渲染后从上到下的顺序一致&＃xff0c;即采用深度优先的先序遍历方法&＃xff08;先序遍历即先检查根元素&＃xff0c;再检查子元素&＃xff1b;后序遍历则相反&＃xff1b;如果是二叉树&＃xff0c;还有中序遍历&＃xff09;。

• 在所有页面中&＃xff0c;并不能单纯根据h1,h2等标签名来判别一个元素是否要导航&＃xff0c;所以想到了用选择器来确定&＃xff0c;同时添加根据选择器来排除一些例外的元素。

• 最终的导航应该是一个树形结构&＃xff0c;并且每一个节点对应一个插入的锚点&＃xff0c;即每一个树节点应该包含一个锚点信息。

2、实现思路

因为项目是采用Vue来实现&＃xff0c;数据控制视图&＃xff0c;所以通常不需要直接操作DOM。但是这里需要在DOM中插入锚点&＃xff0c;Vue自定义指令是一个不错的选择。于是可以写一个指令&＃xff0c;通过需求分析&＃xff0c;大体确定可以这个指令值可以绑定的一个包含以下三个信息的对象&＃xff1a;

• 一个列表selectors&＃xff1a;列表中的每一项是一层导航对应的选择器&＃xff0c;比如下标为0的元素是第一级导航&＃xff0c;通常可以用选择器&＃39;h1&＃39;&＃xff0c;下标为1的元素是第二级导航&＃xff0c;通常可以用选择器&＃39;h2&＃39;;

• 一个字符串exceptSelector&＃xff0c;用于排除例外元素的选择器&＃xff1b;

• 一个回调函数callback,用于接收生成的导航树形数据。

三、具体实现

1、锚点生成函数

需要在每一个导航元素临近位置插入一个锚点&＃xff0c;我这里插在导航元素前面&＃xff0c;所以这个函数接收一个导航元素dom参数&＃xff0c;并生成一个元素插入到dom之前。代码如下&＃xff1a;

import uuidv4 from &＃39;uuid/v4&＃39;let ATTR_NAME &＃61; &＃39;navigation_anchor&＃39;function createLinkElement (dom) { let id &＃61; uuidv4() let element &＃61; document.createElement(&＃39;a&＃39;) element.setAttribute(&＃39;id&＃39;, id) element.setAttribute(ATTR_NAME, true) dom.parentNode.insertBefore(element, dom) return id}


这个函数接收导航元素dom作为参数&＃xff0c;生成一个a标签&＃xff0c;并且给a标签设置了一个uuid&＃xff08;确保唯一性&＃xff09;作为id&＃xff0c;同时设置了一个特殊属性&＃39;navigation_anchor&＃39;&＃xff08;尽可能复杂&＃xff0c;你甚至可以用uuid&＃xff0c;不要与DOM中其他元素属性相同&＃xff09;便于清理所有生成的锚点。

2、锚点清理函数

用于清除生成的锚点元素。代码如下&＃xff1a;

function clearLinkElement (dom) { dom &＃61; dom || document let domList &＃61; dom.querySelectorAll(&＃96;a[${ATTR_NAME}]&＃96;) for (let idx &＃61; domList.length - 1; idx > -1; idx--) { let element &＃61; domList[idx] element.parentNode.removeChild(element) }}


可以看到&＃xff0c;通过给锚点元素设置一个特殊属性&＃xff0c;在清除的时候非常容易。这里用到一个非常重要的函数querySelectorAll&＃xff0c;它会根据调用的根节点遍历该节点的子DOM树&＃xff0c;返回符合某个选择器的NodeList&＃xff08;一个类数组的对象&＃xff0c;但不是数组&＃xff01;&＃xff09;&＃xff0c;而且遍历方式就是上文所述的深度优先先序遍历&＃xff01;真是激动人心&＃xff01;接下来我们可以用这个元素获取所有需要导航的元素列表。

3、生成树形导航数据函数

通过传入的导航元素DOM根节点、导航元素选择器列表、导航元素排除选择器&＃xff0c;返回一个树形数据的列表list。查找出所有导航元素&＃xff0c;插入对应锚点&＃xff0c;并将锚点信息和导航元素标题存到list中。

function generateNavTree (dom, selectors, exceptSelector) { clearLinkElement(dom) let list &＃61; [] if (exceptSelector) { let exceptList &＃61; dom.querySelectorAll(exceptSelector) exceptList.forEach(element &＃61;> { element.__nav_except &＃61; true }) } for (let idx in selectors) { let elementList &＃61; dom.querySelectorAll(selectors[idx]) elementList.forEach(element &＃61;> { if (element.__nav_except || element.offsetParent &＃61;&＃61;&＃61; null) return element.__nav_level &＃61; idx }) } let selector &＃61; selectors.join(&＃39;,&＃39;) let domList &＃61; dom.querySelectorAll(selector) for (let element of domList) { if (!element.__nav_level) { delete element.__nav_except continue } let pushList &＃61; list while (element.__nav_level > 0) { pushList &＃61; pushList.length ? pushList[pushList.length - 1].children : null if (!pushList) break element.__nav_level-- } let data &＃61; { title: element.textContent, children: [], id: createLinkElement(element) } pushList && pushList.push(data) delete element.__nav_level } return list}


到这一步有个很有必要注意的地方&＃xff0c;导航数据里的title我最开始用了一个超级慢的属性innerText&＃xff0c;然后整个页面生成导航&＃xff08;大约50个导航节点&＃xff09;竟然要2s左右&＃xff0c;后面改为了才textContent。

经过我的测试&＃xff0c;两个属性的访问时间相差n个数量级&＃xff0c;访问innerText大约要30ms&＃xff0c;而访问textContent大约要0.05ms左右。就是这么大的差别&＃xff0c;查阅了相关资料&＃xff0c;原因应该是innerText会引起浏览器重排&＃xff0c;耗时超级多。

4、调用导航数据生成函数并通过回调传给组件。

现在生成导航数据的函数已经有了&＃xff0c;一个问题就是何时调用此函数呢&＃xff1f;我们通过Vue指令来实现&＃xff0c;可以在相应的钩子函数中调用。

一个时机是当指令绑定的元素所在模板更新完成之时&＃xff0c;另一个时机是指令绑定元素插入之时。
指令部分代码如下&＃xff1a;

export default { bind (el, binding, vNode) { el.__navigationGenerateFunction &＃61; () &＃61;> { if (el.__generating) return let selectors &＃61; binding.value.selectors || [&＃39;h1&＃39;, &＃39;h2&＃39;] let exceptSelector &＃61; binding.value.exceptSelector el.__generating &＃61; true let list &＃61; [] generateNavTree(el, selectors, exceptSelector, list) binding.value.callback(list) vNode.context.$nextTick(() &＃61;> { delete el.__generating }) } }, inserted (el, binding, vNode) { el.__navigationGenerateFunction && el.__navigationGenerateFunction() }, componentUpdated (el, binding, vNode) { el.__navigationGenerateFunction && el.__navigationGenerateFunction() }, unbind (el, binding, vNode) { clearLinkElement() if (el.__navigationGenerateFunction) { delete el.__navigationGenerateFunction } }}


需要注意的是&＃xff0c;我们在模板更新完成时插入锚点元素&＃xff0c;而这本身又是会触发模板更新的&＃xff0c;所以需要打个标记避死循环。

5、导航数据的展示

导航数据是一个树形数据&＃xff0c;所以可以用树形组件来展示之。比如element或者iview的树组件都可以。不过因为曾经对element和iview的树形组件不甚满意&＃xff0c;自己写过一个树形组simple-vue-tree件并且发布到了npm。
这里我就使用这个组件来展示&＃xff0c;下面是一个完整的示例&＃xff1a;

四、npm插件

这个导航工具我已经发布到npm了&＃xff0c;地址为vue-outline。如果你需要用到并且不想造轮子的话&＃xff0c;可以通过npm或者yarn等包管理工具安装&＃xff0c;并且可以在npm上查看使用方法。

本文完~

最后

• 欢迎加我微信(winty230)&＃xff0c;拉你进技术群&＃xff0c;长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端&＃xff0c;做个专业的技术人...

点个在看支持我吧