用JS自制表格软件玩数据3. 构建实时渲染器

Posted 2022-02-08 妇男主任

对单元格进行实时渲染

• 功能简介
• 工作流的结构
• • HTML 标签元素特点分析
• 渲染器的源代码

功能简介

前面第一节内容的时候，提到的模板，使用的是html标签，现在需要开始做一个核心功能就是把读取到的excel 文件里的内容渲染到页面中来。

在渲染方面，我们已知的就有比较知名的 Angular, React, Vue 等等框架，但是由于这里将会有很多定制化的功能要做，加载第三方框架的话，就需要安装大量的第三方辅助包，会使得整个项目更加复杂和臃肿。
还有一个更关键的原因是，第三方框架的版本更新迭代，会影响到项目的复杂度。综上考虑，促使我要自己实现这个渲染器

工作流的结构

HTML 标签元素特点分析

一个普通的 HTML 标签元素长什么样?

<div id="iamid" title="title" style="color:#ff0000;" data-k="dataKey" data-v="dataValue">
	我是文本内容
</div>

所以，我们要先定义一个渲染器接收的数据流结构，我给它起名为：渲染树。渲染树的数据结构应该是长什么样的呢？请看下面：

[
	
		"Tag" : "div",
		"ID" : "iamid",
		"title" : "title",
		"ClassName" : "",
		"Style" : "",
		"Data" : [
			
				"k":"dataKey",
				"v":"dataValue"
			
		],
		"Text":"我是文本内容",
		"Action":
			"click":function()console.log("click Action"),
			"change":function()console.log("change Action"),
		,
		"Child":[
			
				"Tag" : "span",
				"ClassName" : "",
				"Style" : "",
				"Data" : [
					
						"k":"dataKey",
						"v":"dataValue"
					
				],
				"Text":"我是文本内容",
				"Action":
					"click":function()console.log("click Action"),
					"change":function()console.log("change Action"),
				,
				"Child":[]
			
		]
	
]

属性分析：

属性	功能描述
Tag	标签（div, span, li, ul 等等）
Data	data-* 属性用于存储页面或应用程序的私有自定义数据。
ID	标签的ID
ClassName	class 样式类的名称
Style	样式
Action	事件绑定
Child	子标签，这是一个数组

渲染器的源代码

我把渲染器函数命名为：renderDOM

会传入四个参数：

1. mainid（父级节点的ID）
2. DomTree（整个渲染树）
3. begin（渲染树的事件发生前，会执行 begin 函数）
4. end（渲染树的事件发生后，会执行 end 函数）

renderDOM(mainid,DomTree,begin,end)
		var begin = begin || function()console.log("begin");
		var end = end || function()console.log("end");
		
		var that = this;
		var oMain = document.getElementById(mainid);
		var fragment = document.createDocumentFragment();

		var Celement;
		var ChildList = [];
		for(var i in DomTree)
			if(typeof DomTree[i]["Tag"] === 'string')
				Celement = document.createElement(DomTree[i]["Tag"]);
				if(typeof DomTree[i]["ID"] === 'string')
					Celement.setAttribute("id",DomTree[i]["ID"]);
				
				if(typeof DomTree[i]["Title"] === 'string')
					Celement.setAttribute("title",DomTree[i]["Title"]);
				
				if(typeof DomTree[i]["ClassName"] === 'string')
					Celement.setAttribute("class",DomTree[i]["ClassName"]);
				
				if(typeof DomTree[i]["Style"] === 'string')
					Celement.setAttribute("style",DomTree[i]["Style"]);
				
				if(typeof DomTree[i]["selected"] === 'string')
					Celement.setAttribute("selected",DomTree[i]["selected"]);
				
				if(typeof DomTree[i]["Data"] === 'object')
					for(var j in DomTree[i]["Data"])
						Celement.setAttribute("data-"+DomTree[i]["Data"][j]["k"],DomTree[i]["Data"][j]["v"]);
					
				
				if(typeof DomTree[i]["Contenteditable"] === 'string')
					// 该处可以设置 div 元素为可编辑区域
					Celement.contenteditable = DomTree[i]["Contenteditable"];
				
				
				if(typeof DomTree[i]["Text"] === 'string')
					Celement.innerHTML = DomTree[i]["Text"];
				
				if(typeof DomTree[i]["Child"] === 'object')
					if(DomTree[i]["Child"].length>0)
						ChildList.push(
							"mainid" : DomTree[i]["ID"],
							"DomTree" : DomTree[i]["Child"]
						);
					
				
				fragment.appendChild(Celement);
			
		
		oMain.appendChild(fragment);

		// 渲染子节点
		if(ChildList.length>0)
			for(var i in ChildList)
				this.renderDOM(ChildList[i]["mainid"],ChildList[i]["DomTree"],begin,end);
			
		
	

下一节将介绍渲染后的dom，进行事件绑定。