python画画100行代码_用100行代码画出DOM树状结构

用100行代码画出DOM树状结构

这两天写了这样一个小玩具，是一个可以把DOM的树状结构解析，并且画出来的东西，把HTML代码写到左边，右边就会自动生成啦。

源码在github · starkwang/DOM-Drawer，使用webpack打了个包。绘图部分依赖了百度开源的 ECharts，核心功能的实现只有100行代码。

核心代码解读

核心代码分成两部分，tokenizer 和 parser，流程的本质上是一个最最最最简单的编译器前端。

我们期望是把类似这样的HTML字符串：

解析成这样的对象：

{

name : 'div',

children : [

{

name : 'p',

childern : []

},

{

name : 'img',

childern : []

},

{

name : 'a',

childern : []

},

]

}

Tokenizer

tokenizer 负责把 HTML 字符串分割成一个由单词、特殊符号组成的数组(去掉空格、换行符、缩进)，最后返回这个数组给 parser 进行解析。

module.exports = tokenizer;

function tokenizer(content) {

//结果数组

var result = [];

//特殊符号的集合

var symbol = ['{', '}', ':', ';', ',', '(', ')', '.', '#', '~', , '', '*', '+', '[', ']', '=', '|', '^'];

//是否在字符串中，如果是的话，要保留换行、缩进、空格

var isInString = false;

//当前的单词栈

var tmpString = '';

for (var i = 0; i < content.length; i++) {

//逐个读取字符

var t = content[i];

//当读取到引号时，进入字符串状态

if (t == '\'' || t == '\"') {

if (isInString) {

tmpString += t;

isInString = false;

result.push(tmpString);

tmpString = '';

} else {

tmpString += t;

isInString = true;

}

continue;

}

if (isInString) {

//字符串状态

tmpString += t;

} else {

//非字符串状态

if (t == '\n' || t == ' ' || t == ' ') {

//如果读到了换行、空格或者tab，那么把当前单词栈中的字符作为一个单词push到结果数组中，并清零单词栈

if (tmpString.length != 0) {

result.push(tmpString);

tmpString = '';

}

continue;

}

if (symbol.indexOf(t) != -1) {

//如果读到了特殊符号，那么把当前单词栈中的字符作为一个单词push到结果数组中，清零单词栈，再把这个特殊符号放进结果数组

if (tmpString.length != 0) {

result.push(tmpString);

tmpString = '';

}

result.push(t);

continue;

}

//否则把字符推入单词栈中

tmpString += t;

}

}

return result;

}

Parser

parser负责逐个读取 tokenizer 生成的单词序列，并且解析成一个树形结构，这里用到了类似状态机的思想。

module.exports = parser;

function parser(tokenArray) {

//等下我们要从单词序列中过滤出HTML标签

var tagArray = [];

//节点组成的栈，用于记录状态

var nodeStack = [];

//根节点

var nodeTree = {

name: 'root',

children: []

};

//是否在script、style标签内部

var isInScript = false,

isInStyle = false;

//先把根节点推入节点栈

nodeStack.push(nodeTree);

//一大堆单词序列中过滤出HTML标签，注意这里没有考虑到script、style中的特殊字符

tokenArray.forEach(function(item, index) {

if (item == '

tagArray.push(tokenArray[index + 1]);

}

})

//HTML标准中自封闭的标签

var selfEndTags = ['img', 'br', 'hr', 'col', 'area', 'link', 'meta', 'frame', 'input', 'param'];

tagArray.forEach(function(item, index) {

//逐个读取标签

if (item[0] == '!' || selfEndTags.indexOf(item) != -1) {

//自封闭标签、注释、!DOCTYPE

nodeStack[nodeStack.length - 1].children.push({

name: item[0] == '!' && item[1] == '-' && item[2] == '-' ? '' : item,

children: []

});

} else {

//普通标签

if (item[0] != '/') {

//普通标签头

if (!isInScript && !isInStyle) {

//如果不在script或者style标签中，向节点栈尾部的children中加入这个节点，并推入这个节点，让它成为节点栈的尾部

var newNode = {

name: item,

children: []

}

nodeStack[nodeStack.length - 1].children.push(newNode);

nodeStack.push(newNode);

}

//如果是script或者style标签，那么进入相应的状态

if (item == 'script') {

isInScript = true;

}

if (item == 'style') {

isInStyle = true;

}

} else {

//普通标签尾

if (item.split('/')[1] == nodeStack[nodeStack.length - 1].name) {

//如果这个标签和节点栈尾部的标签相同，那么认为这个节点终止，节点栈推出。

nodeStack.pop();

}

//如果是script或者style标签，那么进入相应的状态

if (item.split('/')[1] == 'script') {

isInScript = false;

}

if (item.split('/')[1] == 'style') {

isInStyle = false;

}

}

}

})

return nodeTree;

}