什么是运行时、编译时？-CSDN博客

本文链接：https://blog.csdn.net/liuoyhiug/article/details/131655147

文章探讨了一个从运行时框架到编译时框架的演变过程。首先介绍了一个允许用户通过render函数将JS对象转化为DOM元素的运行时框架。然后，为了简化用户工作，引入了compiler程序，将HTML转换为虚拟DOM对象。最后，提出了一种纯编译时的解决方案，直接将HTML转化为命令式代码，省去了调用render的步骤。这样，用户可以更直接地创建和操作DOM结构。

摘要由CSDN通过智能技术生成

运行时

我们写了一个框架，这个框架为用户提供了一个render函数，这个函数可以把一个js对象渲染成dom元素。

tag属性表示标签名

const obj = {
	tag: 'div',
	children: [
		{
		}
	]
}
function render (virtualDom,root) {
	let el = document.createElement(virtualDom.tag)
	if (typeof virtualDom.children === 'string') {
		const text = document.createTextNode(obj.children)
		el.appendChild(text)
	}else if (virtualDom.children) {
		// 数组，递归调用 Render，使用 el 作为 root 参数
		virtualDom.children.forEach((child) => Render(child, el))
	}
	
} 
// 渲染到 body 下
render(obj, document.body)

我们把这个函数提供给用户，这便称为运行时框架。

编译时

但是如果有一天用户说，编写虚拟dom对象太麻烦了，可以直接写html然后转化为虚拟dom对象。

这时候你开始思考，于是你写了一个compiler程序。就是将html转化为虚拟dom对象。然后给用户使用。用户每次使用render之前都需要先通过compiler这个程序进行编译。这种方式就是先编译后运行的方式。

纯编译时程序

你发挥了想象，可不可以写html后把它转化为命令式的代码，这样我们连render函数都不需要调用了。

<div>
	<span>hello world</span>
</div>

const diy = document.createElement('div")
const span = document.createElement('span")
span.innerText = "hello world'
div.appendChild(span)
document.body.appendChild(div)

因此，我们实现了一个纯编译时的框架。