如何给一个Vue页面增加纲要导航

一、媒介

前两天项目碰到一个须要给页面增加纲要导航的功用，请求把页面中的特定标签加入到纲要导航中。相似如许：

需求本身并不难，不过想把这个东西做得通用一些，也就是今后再有别的页面须要加导航，不必再从新写很庞杂的逻辑了。下面说一下详细完成思绪，而且文末会给出轻便易用的导航天生东西。

二、完成思绪

1、需求剖析

做之前想到之前打仗过的markdown编辑器mavon-editor有一个导航，不过谁人导航只能用于编辑器本身，我去看了一下它的表现：

点击右侧的导航节点，会自动定位到对应题目元素。当时思索了一下它是怎样纪录题目元素的，会不会是给题目元素加了一个什么id之类的属性？因而我看了一下天生的DOM：

居然是给题目元素加了一个带有id属性的a标签的子节点。不过它天生id的体式格局比较简单，纯真的&＃8221;字符串_编号&＃8221;罢了，想来并非那末牢靠（难于保证编辑器外有雷同id的元素）。

我大致有了一个基础的思绪：

• 既然是关于恣意页面都可用，那能够遍历DOM树，寻觅须要导航的标签，然后把相干节点位置信息存储起来。这里也可一相似mavon-editor给dom树中插进去一个元素作为一个锚点。遍历DOM树的要领应当与DOM衬着后从上到下的递次一致，即采纳深度优先的先序遍历要领（先序遍历即先搜检根元素，再搜检子元素；后序遍历则相反；假如是二叉树，另有中序遍历）。
• 在一切页面中，并不能纯真依据h1,h2等标署名来鉴别一个元素是不是要导航，所以想到了用挑选器来肯定，同时增加依据挑选器来消除一些破例的元素。
• 终究的导航应当是一个树形构造，而且每个节点对应一个插进去的锚点，即每个树节点应当包括一个锚点信息。

2.完成思绪

由于项目是采纳Vue来完成，数据掌握视图，所以一般不须要直接操纵DOM。然则这里须要在DOM中插进去锚点，Vue自定义指令是一个不错的挑选。因而能够写一个指令，经由过程需求剖析，大致肯定能够这个指令值能够绑定的一个包括以下三个信息的对象：

• 一个列表selectors：列表中的每一项是一层导航对应的挑选器，比方下标为0的元素是第一级导航，一般能够用挑选器&＃8217;h1&＃8217;，下标为1的元素是第二级导航，一般能够用挑选器&＃8217;h2&＃8242;;
• 一个字符串exceptSelector，用于消除破例元素的挑选器；
• 一个回调函数callback,用于吸收天生的导航树形数据。

三、详细完成

1. 锚点天生函数

须要在每个导航元素邻近位置插进去一个锚点，我这里插在导航元素前面，所以这个函数吸收一个导航元素dom参数，并天生一个元素插进去到dom之前。代码以下：

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

这个函数吸收导航元素dom作为参数，天生一个a标签，而且给a标签设置了一个uuid（确保唯一性）作为id，同时设置了一个特别属性&＃8217;navigation_anchor&＃8217;（尽量庞杂，你以至能够用uuid，不要与DOM中其他元素属性雷同）便于清算一切天生的锚点。

2. 锚点清算函数

用于消灭天生的锚点元素。代码以下：

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


能够看到，经由过程给锚点元素设置一个特别属性，在消灭的时刻异常轻易。这里用到一个异常重要的函数querySelectorAll，它会依据挪用的根节点遍历该节点的子DOM树，返回相符某个挑选器的NodeList（一个类数组的对象，但不是数组！），而且遍历体式格局就是上文所述的深度优先先序遍历！真是激动人心！接下来我们能够用这个元素猎取一切须要导航的元素列表。

3. 天生树形导航数据函数

经由过程传入的导航元素DOM根节点、导航元素挑选器列表、导航元素消除挑选器，返回一个树形数据的列表list。查找出一切导航元素，插进去对应锚点，并将锚点信息和导航元素题目存到list中。

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

到这一步有个很有必要注重的处所，导航数据里的title我最最先用了一个超等慢的属性innerText，然后全部页面天生导航（约莫50个导航节点）居然要2s摆布，背面改为了才textContent。经由我的测试，两个属性的接见时候相差n个数量级，接见innerText约莫要30ms，而接见textContent约莫要0.05ms摆布。就是这么大的差异，查阅了相干材料，缘由应当是innerText会引起浏览器重排，耗时超等多。

4. 挪用导航数据天生函数并经由过程回调传给组件。

如今天生导航数据的函数已有了，一个题目就是什么时候挪用此函数呢？我们经由过程Vue指令来完成，能够在响应的钩子函数中挪用。一个机遇是当指令绑定的元素地点模板更新完成之时，另一个机遇是指令绑定元素插进去之时。
指令部份代码以下：

export default {
bind (el, binding, vNode) {
el.__navigatiOnGenerateFunction= () => {
if (el.__generating) return
let selectors = binding.value.selectors || ['h1', 'h2']
let exceptSelector = binding.value.exceptSelector
el.__generating = true
let list = []
generateNavTree(el, selectors, exceptSelector, list)
binding.value.callback(list)
vNode.context.$nextTick(() => {
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
}
}
}


须要注重的是，我们在模板更新完成时插进去锚点元素，而这本身又是会触发模板更新的，所以须要打个标记避死循环。

5. 导航数据的展现

导航数据是一个树形数据，所以能够用树形组件来展现之。比方element或许iview的树组件都能够。不过由于曾对element和iview的树形组件不甚惬意，本身写过一个树形组simple-vue-tree件而且宣布到了npm。
这里我就运用这个组件来展现，下面是一个完全的示例：

四、npm插件

这个导航东西我已宣布到npm了，地点为vue-outline。假如你须要用到而且不想造轮子的话，能够经由过程npm或许yarn等包管理东西装置，而且能够在npm上检察运用要领。

就如许吧，谢谢浏览。第一次在思否写文章，之前一向都在CSDN写博客，不过CSDN太旧了，今后就转到思否吧。