[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","dreamapplehappy","page",1,"limit",20,"total","id","20537","avatar_url","https://avatars.githubusercontent.com/u/7955228?v=4","githubUsername","create_at","2016-01-16 16:05:03.721","score",45,"topic_count",2,"reply_count",7,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":49,"_50":51,"_25":52,"_53":54},"14789","author_id","19464","tab","share","content","这两天写了这样一个[小玩具](http://blog.starkwang.com/DOM-Drawer/)，是一个可以把DOM的树状结构解析，并且画出来的东西，把HTML代码写到左边，右边就会自动生成啦。\r\n\r\n[点这里看DEMO](http://blog.starkwang.com/DOM-Drawer/)\r\n\r\n源码在[github · starkwang/DOM-Drawer](https://github.com/starkwang/DOM-Drawer)，使用webpack打了个包。绘图部分依赖了百度开源的 [ECharts](http://echarts.baidu.com/)，核心功能的实现只有100行代码。\r\n\r\n------\r\n### 核心代码解读\r\n核心代码分成两部分，tokenizer 和 parser，流程的本质上是一个最最最最简单的编译器前端。\r\n\r\n我们期望是把类似这样的HTML字符串：\r\n\r\n```html\r\n

\r\n

\r\n \r\n \r\n

\r\n```\r\n\r\n解析成这样的对象：\r\n\r\n```js\r\n{\r\n name : 'div',\r\n children : [\r\n {\r\n name : 'p',\r\n childern : []\r\n },\r\n {\r\n name : 'img',\r\n childern : []\r\n },\r\n {\r\n name : 'a',\r\n childern : []\r\n },\r\n ]\r\n}\r\n```\r\n\r\n### Tokenizer\r\ntokenizer 负责把 HTML 字符串分割成一个由单词、特殊符号组成的数组（去掉空格、换行符、缩进），最后返回这个数组给 parser 进行解析。\r\n\r\n\r\n```js\r\nmodule.exports = tokenizer;\r\nfunction tokenizer(content) {\r\n //结果数组\r\n var result = []; \r\n \r\n //特殊符号的集合\r\n var symbol = ['{', '}', ':', ';', ',', '(', ')', '.', '#', '~', , '<', '>', '*', '+', '[', ']', '=', '|', '^']; \r\n \r\n //是否在字符串中，如果是的话，要保留换行、缩进、空格 \r\n var isInString = false;\r\n \r\n //当前的单词栈\r\n var tmpString = '';\r\n \r\n \r\n for (var i = 0; i < content.length; i++) {\r\n //逐个读取字符\r\n var t = content[i];\r\n \r\n //当读取到引号时，进入字符串状态\r\n if (t == '\\'' || t == '\\\"') {\r\n if (isInString) {\r\n tmpString += t;\r\n isInString = false;\r\n result.push(tmpString);\r\n tmpString = '';\r\n } else {\r\n tmpString += t;\r\n isInString = true;\r\n }\r\n continue;\r\n }\r\n \r\n \r\n if (isInString) {\r\n //字符串状态\r\n tmpString += t;\r\n } else {\r\n //非字符串状态\r\n \r\n if (t == '\\n' || t == ' ' || t == ' ') {\r\n //如果读到了换行、空格或者tab，那么把当前单词栈中的字符作为一个单词push到结果数组中，并清零单词栈\r\n if (tmpString.length != 0) {\r\n result.push(tmpString);\r\n tmpString = '';\r\n }\r\n continue;\r\n }\r\n if (symbol.indexOf(t) != -1) {\r\n \t\t//如果读到了特殊符号，那么把当前单词栈中的字符作为一个单词push到结果数组中，清零单词栈，再把这个特殊符号放进结果数组\r\n if (tmpString.length != 0) {\r\n result.push(tmpString);\r\n tmpString = '';\r\n }\r\n result.push(t);\r\n continue;\r\n }\r\n //否则把字符推入单词栈中\r\n tmpString += t;\r\n }\r\n }\r\n return result;\r\n}\r\n```\r\n\r\n### Parser\r\nparser负责逐个读取 tokenizer 生成的单词序列，并且解析成一个树形结构，这里用到了类似状态机的思想。\r\n\r\n```js\r\nmodule.exports = parser;\r\nfunction parser(tokenArray) {\r\n\r\n //等下我们要从单词序列中过滤出HTML标签\r\n var tagArray = [];\r\n \r\n //节点组成的栈，用于记录状态\r\n var nodeStack = [];\r\n \r\n //根节点\r\n var nodeTree = {\r\n name: 'root',\r\n children: []\r\n };\r\n \r\n //是否在script、style标签内部\r\n var isInScript = false,\r\n isInStyle = false;\r\n \r\n //先把根节点推入节点栈\r\n nodeStack.push(nodeTree);\r\n \r\n //一大堆单词序列中过滤出HTML标签，注意这里没有考虑到script、style中的特殊字符\r\n tokenArray.forEach(function(item, index) {\r\n if (item == '<') {\r\n tagArray.push(tokenArray[index + 1]);\r\n }\r\n })\r\n \r\n //HTML标准中自封闭的标签\r\n var selfEndTags = ['img', 'br', 'hr', 'col', 'area', 'link', 'meta', 'frame', 'input', 'param'];\r\n \r\n \r\n tagArray.forEach(function(item, index) {\r\n //逐个读取标签\r\n if (item[0] == '!' || selfEndTags.indexOf(item) != -1) {\r\n //自封闭标签、注释、!DOCTYPE\r\n nodeStack[nodeStack.length - 1].children.push({\r\n name: item[0] == '!' && item[1] == '-' && item[2] == '-' ? '' : item,\r\n children: []\r\n });\r\n } else {\r\n //普通标签\r\n if (item[0] != '/') {\r\n //普通标签头\r\n if (!isInScript && !isInStyle) {\r\n //如果不在script或者style标签中，向节点栈尾部的children中加入这个节点，并推入这个节点，让它成为节点栈的尾部\r\n var newNode = {\r\n name: item,\r\n children: []\r\n }\r\n nodeStack[nodeStack.length - 1].children.push(newNode);\r\n nodeStack.push(newNode);\r\n }\r\n \r\n //如果是script或者style标签，那么进入相应的状态\r\n if (item == 'script') {\r\n isInScript = true;\r\n }\r\n if (item == 'style') {\r\n isInStyle = true;\r\n }\r\n } else {\r\n //普通标签尾\r\n if (item.split('/')[1] == nodeStack[nodeStack.length - 1].name) {\r\n //如果这个标签和节点栈尾部的标签相同，那么认为这个节点终止，节点栈推出。\r\n nodeStack.pop();\r\n }\r\n \r\n //如果是script或者style标签，那么进入相应的状态\r\n if (item.split('/')[1] == 'script') {\r\n isInScript = false;\r\n }\r\n if (item.split('/')[1] == 'style') {\r\n isInStyle = false;\r\n }\r\n }\r\n }\r\n })\r\n return nodeTree;\r\n}\r\n```","title","用100行代码画出DOM树状结构","last_reply_at","2015-11-07 01:27:34.747","good","top",5,"visit_count",8380,"2015-11-05 02:02:09.116","author",{"_13":55,"_22":56},"starkwang","https://avatars0.githubusercontent.com/u/10933333?v=4"]