摘要：本人為菜鳥，有問題請(qǐng)指正目錄最近用搭建個(gè)人博客在制作文章顯示頁面時(shí)，需要在前端頁面生成。剛開始很糾結(jié)如何生成有層級(jí)結(jié)構(gòu)的代碼，最后發(fā)現(xiàn)可以使用設(shè)計(jì)模式中的組合模式來完成這一功能。具體點(diǎn)就是將節(jié)點(diǎn)看作葉子節(jié)點(diǎn)，節(jié)點(diǎn)看錯(cuò)作容器。
本人為Javascript菜鳥，有問題請(qǐng)指正...
TOC目錄
最近用Flask搭建個(gè)人博客在制作文章顯示頁面時(shí)，需要在前端頁面生成TOC。就打算自己寫一個(gè)JavaScript腳本。
需要生成的目標(biāo)HTML代碼如下：
在看了JavaScript權(quán)威指南這本書后，發(fā)現(xiàn)其中雖然有例子生成TOC，但是并沒有顯示層級(jí)。不過，其中有一個(gè)記錄TOC各個(gè)錨點(diǎn)序號(hào)的好方法：
# 使用一個(gè)數(shù)組報(bào)錯(cuò)的level為1
var level = parseInt(header.tagName.charAt(1));
# 當(dāng)處理一個(gè)標(biāo)簽后，計(jì)算加1
sectionNumbers[level-1]++
# 然后去當(dāng)前序號(hào) 比如序號(hào)為2.1.1
sectionNumber = sectionNumbers.slice(0,level).join(".")
分析算法邏輯
吹牛B之前需要打草稿，寫代碼之前也如此。
剛開始很糾結(jié)如何生成有層級(jí)結(jié)構(gòu)的HTML代碼，最后發(fā)現(xiàn)可以使用設(shè)計(jì)模式中的組合模式來完成這一功能。具體點(diǎn)就是將li節(jié)點(diǎn)看作葉子節(jié)點(diǎn)，ul節(jié)點(diǎn)看錯(cuò)作容器。那么就有一下限制：
只有ul節(jié)點(diǎn)可以插入li節(jié)點(diǎn)
li節(jié)點(diǎn)需要插入子節(jié)點(diǎn)，就需要?jiǎng)?chuàng)建一個(gè)ul子節(jié)點(diǎn)，讓子節(jié)點(diǎn)去插入li節(jié)點(diǎn)
ul與它的li子節(jié)點(diǎn)level相同
如果當(dāng)前節(jié)點(diǎn)需要處理一個(gè)header，就需要作出以下判斷：
判斷自己為ul節(jié)點(diǎn)還是li節(jié)點(diǎn)
如果為ul節(jié)點(diǎn)，且待處理的header的level與自己相同，那么就直接生成一個(gè)li節(jié)點(diǎn)并插入；如果待處理的header的level比自己大，那么就找到子節(jié)點(diǎn)，交給子節(jié)點(diǎn)去處理。
如果為li節(jié)點(diǎn)，且待處理的header的level比自己大，那么就取li節(jié)點(diǎn)的ul節(jié)點(diǎn)，交給ul節(jié)點(diǎn)去處理
一直向下去處理header，直到插入成功
代碼實(shí)現(xiàn)
為了盡量減少代碼的污染，使用Fucntion.call(args)方式了動(dòng)態(tài)的給節(jié)點(diǎn)添加屬性:
var sectionNumbers = [0, 0, 0, 0, 0, 0];
function Toc() {
this.headers = $(this).find(":header");
var ul = document.createElement("ul");
this.toc = TocObj.call(ul, 1);
for(var i = 0; i < this.headers.length; i++) {
// if(i > 1) break;
this.toc.add(this.headers[i]);
}
console.log(this.toc);
}
function TocObj(level) {
this.level = level;
this.num = 0;
this.add = function(header) {
var flag = this.tagName == "UL"; // ul節(jié)點(diǎn)和li節(jié)點(diǎn)處理header的方式不通過
var level = parseInt(header.tagName.charAt(1));
if(flag) { // 只有ul節(jié)點(diǎn)才能插入li
if(this.num == 0 || level == this.level) {
var link = document.createElement("a");
link.href = "";
link.innerHTML = header.innerHTML;
sectionNumbers[level-1]++;
for(var i = level; i < sectionNumbers.length; i++) sectionNumbers[i] = 0;
link.href = "#TOC" + sectionNumbers.slice(0, level).join(".");
var li = document.createElement("li");
li.insertBefore(link, li.firstChild);
this.num++;
this.appendChild(TocObj.call(li, level));
} else if(level > this.level){
if(this.num == 0) {
throw new Error("level error 1");
}
var lastChild = this.lastChild;
lastChild.add(header); // 讓ul節(jié)點(diǎn)的li節(jié)點(diǎn)去處理header
}
} else { // li節(jié)點(diǎn)讓它的ul子節(jié)點(diǎn)去插入li
if(level == this.level) {
throw new Error("level error 2");
} else if(level > this.level){
if(this.num == 0) { // 沒有ul子節(jié)點(diǎn)，就創(chuàng)建一個(gè)
var ul = document.createElement("ul");
this.appendChild(ul);
this.num++;
TocObj.call(ul, level).add(header); // 注意設(shè)置level
} else {
var lastChild = this.lastChild;
lastChild.add(header); //讓ul節(jié)點(diǎn)去處理這個(gè)header
}
}
}
}
return this;
}
var toc = document.getElementsByClassName("post")[0];
Toc.call(toc);
效果展示
對(duì)于有以下結(jié)構(gòu)的HTML代碼：
標(biāo)題1
標(biāo)題1.1
標(biāo)題1.2
標(biāo)題2
標(biāo)題2.1
標(biāo)題2.1.1
標(biāo)題3
標(biāo)題4
標(biāo)題5
輸出結(jié)構(gòu)如下：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87713.html
