├── .gitignore
├── package.json
├── index.html
├── js
├── tokenizer.js
├── parser.js
└── main.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dom-drawer",
3 | "version": "1.0.0",
4 | "description": "A small toy to help you draw the DOM structure",
5 | "main": "index.js",
6 | "dependencies": {
7 | "echarts": "^2.2.7-amd-beta2",
8 | "jquery": "^3.0.0"
9 | },
10 | "devDependencies": {},
11 | "scripts": {
12 | "test": "echo \"Error: no test specified\" && exit 1"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/starkwang/DOM-Drawer.git"
17 | },
18 | "author": "starkwang",
19 | "license": "ISC",
20 | "bugs": {
21 | "url": "https://github.com/starkwang/DOM-Drawer/issues"
22 | },
23 | "homepage": "https://github.com/starkwang/DOM-Drawer#readme"
24 | }
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | DOM-Drawer
6 |
46 |
47 |
48 |
49 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/js/tokenizer.js:
--------------------------------------------------------------------------------
1 | module.exports = tokenizer;
2 | function tokenizer(content) {
3 | var result = [];
4 | var symbol = ['{', '}', ':', ';', ',', '(', ')', '.', '#', '~', , '<', '>', '*', '+', '[', ']', '=', '|', '^'];
5 | var isInString = false;
6 | var tmpString = '';
7 | for (var i = 0; i < content.length; i++) {
8 | var t = content[i];
9 | if (t == '\'' || t == '\"') {
10 | if (isInString) {
11 | tmpString += t;
12 | isInString = false;
13 | result.push(tmpString);
14 | tmpString = '';
15 | } else {
16 | tmpString += t;
17 | isInString = true;
18 | }
19 | continue;
20 | }
21 | if (isInString) {
22 | //字符串状态
23 | tmpString += t;
24 | } else {
25 | //非字符串状态
26 | if (t == '\n' || t == ' ' || t == ' ') {
27 | if (tmpString.length != 0) {
28 | result.push(tmpString);
29 | tmpString = '';
30 | }
31 | continue;
32 | }
33 | if (symbol.indexOf(t) != -1) {
34 | if (tmpString.length != 0) {
35 | result.push(tmpString);
36 | tmpString = '';
37 | }
38 | result.push(t);
39 | continue;
40 | }
41 | tmpString += t;
42 | }
43 | }
44 | return result;
45 | }
--------------------------------------------------------------------------------
/js/parser.js:
--------------------------------------------------------------------------------
1 | module.exports = parser;
2 |
3 | function parser(tokenArray) {
4 | var tagArray = [];
5 | var nodeHeap = [];
6 | var nodeTree = {
7 | name: 'root',
8 | children: []
9 | };
10 | var isInScript = false,
11 | isInStyle = false;
12 | nodeHeap.push(nodeTree);
13 | tokenArray.forEach(function(item, index) {
14 | if (item == '<') {
15 | tagArray.push(tokenArray[index + 1]);
16 | }
17 | })
18 | console.log(tagArray);
19 | var selfEndTags = ['img', 'br', 'hr', 'col', 'area', 'link', 'meta', 'frame', 'input', 'param'];
20 | tagArray.forEach(function(item, index) {
21 | if (item[0] == '!' || selfEndTags.indexOf(item) != -1) {
22 | nodeHeap[nodeHeap.length - 1].children.push({
23 | name: item[0] == '!' && item[1] == '-' && item[2] == '-' ? '' : item,
24 | children: []
25 | });
26 | } else {
27 | if (item[0] != '/') {
28 | //普通标签头
29 | if (!isInScript && !isInStyle) {
30 | var newNode = {
31 | name: item,
32 | children: []
33 | }
34 | nodeHeap[nodeHeap.length - 1].children.push(newNode);
35 | nodeHeap.push(newNode);
36 | }
37 | if (item == 'script') {
38 | isInScript = true;
39 | }
40 | if (item == 'style') {
41 | isInStyle = true;
42 | }
43 | } else {
44 | //普通标签尾
45 | if (item.split('/')[1] == nodeHeap[nodeHeap.length - 1].name) {
46 | nodeHeap.pop();
47 | }
48 | if (item.split('/')[1] == 'script') {
49 | isInScript = false;
50 | }
51 | if (item.split('/')[1] == 'style') {
52 | isInStyle = false;
53 | }
54 | }
55 | }
56 | })
57 | return nodeTree;
58 | }
59 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | var echarts = require('echarts');
2 | var $ = require('jquery');
3 | require('echarts/config');
4 | require('echarts/chart/tree');
5 | var tokenizer = require('./tokenizer');
6 | var parser = require('./parser');
7 | function draw() {
8 | var myChart = echarts.init(document.getElementById('main'));
9 | option = {
10 | title: {
11 | text: 'DOM Drawer'
12 | },
13 | toolbox: {
14 | show: true,
15 | feature: {
16 | restore: {
17 | show: true
18 | },
19 | saveAsImage: {
20 | show: true
21 | }
22 | }
23 | },
24 | series: [{
25 | name: '树图',
26 | type: 'tree',
27 | orient: 'horizontal', // vertical horizontal
28 | rootLocation: {
29 | x: 'left',
30 | y: 'center'
31 | }, // 根节点位置 {x: 100, y: 'center'}
32 | nodePadding: 8,
33 | layerPadding: 100,
34 | hoverable: false,
35 | roam: true,
36 | symbolSize: 6,
37 | itemStyle: {
38 | normal: {
39 | color: '#4883b4',
40 | label: {
41 | show: true,
42 | position: 'right',
43 | formatter: "{b}",
44 | textStyle: {
45 | color: '#000',
46 | fontSize: 5
47 | }
48 | },
49 | lineStyle: {
50 | color: '#ccc',
51 | type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
52 | },
53 | areaStyle:{
54 | color:'#000'
55 | }
56 | },
57 | emphasis: {
58 | color: '#4883b4',
59 | label: {
60 | show: false
61 | },
62 | borderWidth: 0
63 | }
64 | },
65 |
66 | data: [parser(tokenizer($('#html').val()))]
67 | }]
68 | };
69 | myChart.setOption(option);
70 | }
71 |
72 |
73 | $('#html').keyup(function(){
74 | draw();
75 | })
76 |
77 | var tmp = '\n\
78 | \n\
79 | \n\
80 | DOM-Drawer\n\
81 | \n\
82 | \n\
83 | \n\
84 | \n\
85 | \n\
86 | Hello,World!
\n\
87 | \n\
88 | ';
89 |
90 | $('#html').val(tmp);
91 | draw();
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DOM-Drawer
2 | A small toy to help you draw the DOM structure
3 |
4 | http://segmentfault.com/a/1190000003937571
5 |
6 | #用100行代码画出DOM树状结构
7 |
8 | 这两天写了这样一个[小玩具](http://starkwang.github.io/DOM-Drawer/)，是一个可以把DOM的树状结构解析，并且画出来的东西，把HTML代码写到左边，右边就会自动生成啦。
9 |
10 | [点这里看DEMO](http://starkwang.github.io/DOM-Drawer/)
11 |
12 | 源码在[github · starkwang/DOM-Drawer](https://github.com/starkwang/DOM-Drawer)，使用webpack打了个包。绘图部分依赖了百度开源的 [ECharts](http://echarts.baidu.com/)，核心功能的实现只有100行代码。
13 |
14 | ------
15 | #核心代码解读
16 | 核心代码分成两部分，tokenizer 和 parser，流程的本质上是一个最最最最简单的编译器前端。
17 |
18 | 我们期望是把类似这样的HTML字符串：
19 |
20 | ```html
21 |
22 |
23 |
![]()
24 |
25 |