突破编程_前端_JS编程实例（目录导航）

1 开发目标

目录导航组件旨在提供一个滚动目录导航功能，使得用户可以方便地通过点击目录条目快速定位到对应的内容标题位置，同时也能够随着滚动条的移动动态显示当前位置在目录中的位置：

在这里插入图片描述

2 详细需求

2.1 标题提取与目录生成

组件需要能够自动提取网页内容中的所有标题元素（如 h1, h2, h3 等）。
提取的标题需要按照其在网页中的层级关系（如 h1 后面跟着的 h2 是其子章节）进行组织，形成一个目录容器。
目录容器需以清晰、直观的方式展示给用户，允许用户通过点击目录条目进行导航。

2.2 滚动定位

当用户在目录容器中点击某个目录条目时，网页的滚动条需要动态移动到对应的标题位置，使得该标题出现在页面的最上方。
滚动过程应该平滑且快速，提升用户体验。

2.3 滚动条与目录条目交互

当用户滚动网页的滚动条时，目录容器中的对应目录条目应该能够实时更新状态，以指示当前所在位置。
当滚动条经过某个标题时，对应的目录条目应改变颜色（如高亮显示），以提醒用户当前的位置。

2.4 无滚动条情况处理

如果网页内容较少，没有出现滚动条，那么点击目录条目时不应触发任何滚动动作。
这种情况下，目录容器仍应正常显示，以供用户浏览网页内容的结构。

3 代码实现

首先创建一个 neat_directory.js 文件，该文件用于本组件的工具类、目录处理函数的代码构建。

（1）在具体的业务代码编写之前，先实现一个工具类以及一些工具方法，方便后面调用：

class CommonUtil {

    // 设置 DIV 中的文字为垂直居中
    static centerYTextInDiv(container) {
        container.style.display = 'flex';
        container.style.justifyContent = 'center';
        container.style.flexDirection = 'column';
    }

    // 判断 DIV 有无垂直滚动条
    static hasScrollbar(container) {
        var divStyle = window.getComputedStyle(container);
        var isOverflowing = container.scrollHeight > container.clientHeight;
        var isScrollbarVisible = isOverflowing &&
            (divStyle.overflow === 'scroll' || divStyle.overflow === 'auto' || divStyle.overflowY === 'scroll' || divStyle.overflowY === 'auto');

        return isScrollbarVisible;
    }
}

（2）接下来，开始定义目录节点类型，目录节点显示在目录区域：

class DirectoryNode {
    static LEVEL_OFFSET = 20;     // 每个级别的目录节点偏移像素
    static NODE_HEIGHT = '30px';     // 目录节点高度
    static NODE_NAME_FONTSIZE = '14px';     // 默认目录标题字符串的字体大小
    static NODE_NAME_COLOR = '#000';     // 默认目录标题字符串字体颜色
    static NODE_NAME_ACTIVE_COLOR = 'red';     // 默认目录标题在激活情况下字符串字体颜色

    constructor(container, para) {
        this.container = container;                 // 本目录节点的容器
        this.para = para;                           // 配置参数，包含页面内容的容器、标题容器以及标题等级等

        this.init();
    }

上面代码定义了 DirectoryNode 的一些默认属性与成员变量，并且创建构造函数，该函数接收调用者传入的 DIV 容器，并且调用 render 方法。
在 render 方法中，需要渲染当前目录节点，并且还要定义点击事件：

	render() {
        this.container.style.width = '100%';
        this.container.style.height = this.para.height ?? DirectoryNode.NODE_HEIGHT;
        this.container.style.fontSize = this.para.fontSize ?? DirectoryNode.NODE_NAME_FONTSIZE;
        this.container.style.color = this.para.color ?? DirectoryNode.NODE_NAME_COLOR;
        this.container.innerText = this.para.name;
        if (this.para.level > 1) {      // 设置目录节点偏移
            this.container.style.paddingLeft = ((this.para.level - 1) * DirectoryNode.LEVEL_OFFSET) + 'px';
        }
        this.container.style.cursor = 'pointer';

        // 点击事件
        let that = this;
        this.container.onclick = function () {
            that.para.onClick.call(that.para.onClickObj, that);
        }
    }

然后需要对目录节点的激活与非激活状态以及目录跳转逻辑做实现：

	// 目录节点激活并跳转对应目录位置
    activate() {
        this.container.style.color = DirectoryNode.NODE_NAME_ACTIVE_COLOR;
    }

    // 目录节点非激活
    deactivate() {
        this.container.style.color = this.para.color ?? DirectoryNode.NODE_NAME_COLOR;
    }

    // 目录跳转
    jump() {
        // 计算目标元素相对于父元素的位置  
        let targetElementRect = this.para.titleContainer.getBoundingClientRect();
        let parentRect = this.para.contentContainer.getBoundingClientRect();

        // 滚动到目标元素的顶部
        let offset = targetElementRect.top - parentRect.top + this.para.contentContainer.scrollTop;
        this.para.contentContainer.scrollTop = offset;
    }

    // 获取在页面内容的容器中，当前目录节点所对应的标题元素离顶部的距离
    getTopOffset() {
        let targetElementRect = this.para.titleContainer.getBoundingClientRect();
        let parentRect = this.para.contentContainer.getBoundingClientRect();
        return targetElementRect.top + parentRect.top;
    }
}

（3）在完成 DirectoryNode 的实现以后，开始创建目录类型 Directory ：

class Directory {

    constructor(container, para) {
        this.container = container;                 // 传入的目录容器，用于渲染提取生成的目录
        this.para = para;                           // 配置参数，包含页面内容的容器
        this.nodes = [];                            // 目录节点集合
        this.jumpFlag=false;                        // 当前是否处于点击目录节点进行跳转的状态

        this.render();
    }

目录类型 Directory 的渲染函数 render 主要是获取页面内容中所有节点，遍历处理标题元素，然后创捷目录节点。此后，还需要定义页面内容的容器在滚动滚动轴时，触发目录变化的逻辑：

	render() {
        // 清空目录容器
        this.container.innerHTML = '';

        // 获取页面内容中所有节点，遍历处理标题元素
        let containerNodes = this.para.contentContainer.childNodes;
        containerNodes.forEach(element => {
            if (!element.tagName) {
                return;
            }
            let tagName = element.tagName.toUpperCase();
            if (2 == tagName.length) {
                let tagName1 = tagName.slice(0, 1);
                let tagName2 = tagName.slice(1, 2);
                if ('H' == tagName1 && !isNaN(tagName2)) {
                    let level = parseInt(tagName2);     // 标题等级
                    let directoryNodeContainer = document.createElement('div');
                    this.container.appendChild(directoryNodeContainer);
                    let nodePara = {
                        "name": element.innerText,
                        "level": level,
                        "titleContainer": element,
                        "contentContainer": this.para.contentContainer,
                        "onClick": this.jumpTo,
                        "onClickObj": this,
                    }
                    let node = new DirectoryNode(directoryNodeContainer, nodePara);
                    this.nodes.push(node);
                }
            }
        });

        // 页面内容的容器在滚动滚动轴时，触发目录变化
        let that = this;
        this.para.contentContainer.addEventListener('scroll', function () {
            // 如果网页内容较少，没有出现滚动条，那么页面内容的容器在滚动滚动轴时，不做任何触发
            // 如果当前是处于点击目录节点进行跳转的状态，则不做处理
            if (!CommonUtil.hasScrollbar(that.para.contentContainer) || that.jumpFlag) {
                return;
            }

            // 判断当前内容属于哪一个目录节点
            let activeNode=null;
            for (let index = 0; index < that.nodes.length; index++) {
                const node = that.nodes[index];
                if(node.getTopOffset()<0 && index+1<that.nodes.length && that.nodes[index+1].getTopOffset()>0){
                    activeNode = node;
                    break;
                }
            }
            if(null == activeNode && that.nodes.length>0){
                activeNode = that.nodes[0];
            }

            that.nodes.forEach(element => {
                element.deactivate();
            });
            activeNode.activate();
        });
    }

在完成渲染函数 render 的实现后，即要实现点击后目录跳转的功能，注意：如果网页内容较少，没有出现滚动条，那么点击目录条目时不应触发任何滚动动作：

	// 目录跳转
    jumpTo(node) {
        // 如果网页内容较少，没有出现滚动条，那么点击目录条目时不应触发任何滚动动作
        if (!CommonUtil.hasScrollbar(this.para.contentContainer)) {
            return;
        }

        this.jumpFlag=true; 
        this.nodes.forEach(element => {
            element.deactivate();
        });

        node.activate();
        node.jump();

        // 延迟一段时间
        let that = this;
        setTimeout(function() {  
            that.jumpFlag=false; 
        }, 100); 
    }
}

至此，整个目录导航功能的组件构建结束。

（4）完成目录导航功能的组件的代码编写后，可以创建 neat_directory.html 文件，调用该组件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>header tab</title>
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="divMain" style="height: 100%;width: 100%;display: flex;">
        <div id="divDirectory" style="margin:10px;height: 500px;width: 300px;border: 1px solid #aaa;padding: 10px;">
        
        </div>
        <div id="divContent" style="margin:10px;height: 500px;width: 600px;border: 1px solid #aaa;padding: 10px;overflow-y: auto;">
            <h1>1 第一章</h1>
            <h2>1.1 第一章 第一节 </h2>
            <span>组件需要能够自动提取网页内容中的所有标题元素（如 h1, h2, h3 等）。</span>
            <span>提取的标题需要按照其在网页中的层级关系（如 h1 后面跟着的 h2 是其子章节）进行组织，形成一个目录容器。</span>
            <span>目录容器需以清晰、直观的方式展示给用户，允许用户通过点击目录条目进行导航。</span>
            <h3>1.1.1 第一章 第一节 第一段</h3>
            <span>组件需要能够自动提取网页内容中的所有标题元素（如 h1, h2, h3 等）。</span>
            <span>提取的标题需要按照其在网页中的层级关系（如 h1 后面跟着的 h2 是其子章节）进行组织，形成一个目录容器。</span>
            <span>目录容器需以清晰、直观的方式展示给用户，允许用户通过点击目录条目进行导航。</span>
            <h3>1.1.2 第一章 第一节 第二段</h3>
            <span>组件需要能够自动提取网页内容中的所有标题元素（如 h1, h2, h3 等）。</span>
            <span>提取的标题需要按照其在网页中的层级关系（如 h1 后面跟着的 h2 是其子章节）进行组织，形成一个目录容器。</span>
            <span>目录容器需以清晰、直观的方式展示给用户，允许用户通过点击目录条目进行导航。</span>
            <h1>2 第二章</h1>
            <h2>2.1 第二章 第一节 </h2>
            <span>组件需要能够自动提取网页内容中的所有标题元素（如 h1, h2, h3 等）。</span>
            <span>提取的标题需要按照其在网页中的层级关系（如 h1 后面跟着的 h2 是其子章节）进行组织，形成一个目录容器。</span>
            <span>目录容器需以清晰、直观的方式展示给用户，允许用户通过点击目录条目进行导航。</span>
            <h3>2.1.1 第二章 第一节 第一段</h3>
            <span>组件需要能够自动提取网页内容中的所有标题元素（如 h1, h2, h3 等）。</span>
            <span>提取的标题需要按照其在网页中的层级关系（如 h1 后面跟着的 h2 是其子章节）进行组织，形成一个目录容器。</span>
            <span>目录容器需以清晰、直观的方式展示给用户，允许用户通过点击目录条目进行导航。</span>
            <h3>2.1.2 第二章 第一节 第二段</h3>
            <span>组件需要能够自动提取网页内容中的所有标题元素（如 h1, h2, h3 等）。</span>
            <span>提取的标题需要按照其在网页中的层级关系（如 h1 后面跟着的 h2 是其子章节）进行组织，形成一个目录容器。</span>
            <span>目录容器需以清晰、直观的方式展示给用户，允许用户通过点击目录条目进行导航。</span>
        </div>
    </div>
</body>
<script src="./neat_directory.js"></script>
<script>
    let para = {
        "contentContainer":document.getElementById('divContent'),
    }
    let directory = new Directory(document.getElementById('divDirectory'),para);

</script>

</html>