关于JS框架的一点想法

读了几页《vue.js设计与实现》，记录几点想法：

1.Html是根本

2.无论哪个框架，不管是运行时框架，还是编译时框架，最终都要通过标签“绘制”页面

3.这个“绘制的过程”就是渲染，渲染由浏览器完成。

4.静态网站的渲染是最快的，没有所谓的“编译”环节消耗。

5.为啥搞这么多新技术出来呢？一是直接写每个页面太繁琐，系统稍大一点几乎就不可能完成任务。二是浏览器能力越来越强，有了硬件上的基础。

6.上面说了，不管是那种框架，最终目标都是转为html代码。一般来说，源码有如下两种：

（1）字符串；（2）json格式。（3）可能还有其它格式
比如，这段代码：

<div><span>世界你好！</span></div>

A：最基本的逻辑：放在标准的html文档里，自动就执行（“绘制”或者说渲染）。

B：字符串转换：

let txt = '世界你好！';
let html = "<div><span>"+txt+"</span></html>";
document.body.appendChild(html); 

　经过字符串拼接和appendChild两个步骤，才到了A的阶段——浏览器可直接绘制的阶段。

C：JSON转换

const obj = {
    tag: 'div',
    children: [
       {tag:'span',children:'世界你好！'}
    ]      
}

这种json数据又如何转为可被浏览器直接识别并绘制的html代码呢？

只能用JavaScript来辅助实现了。

function Render(obj,root){
	const el = document.createElement(obj.tag);
	
	if(typeof obj.children === 'string'){
		const text = document.createTextNode(obj.children);
		el.appendChild(text);
	}else if(obj.children){
		obj.children.forEach((child)=>Render(child,el));
	}
	
	root.appendChild(el);
}

　　通过调用

Render(obj,document.body)

　　才能到达A的阶段——浏览器可直接绘制的阶段。

7.如果页面很少，那么用A的方法最简单效率最高。

8.如果稍微负责一点的，用B的方法也不错，不费脑子好理解，符合直觉（过程性框架的优势）

9.页面比较多，而且页面元素复杂，那么，还是用C比较好，只要按照规则写好代码，转换（编译）的事情由框架代劳，不用去费那个脑子。

10.正常情况下，后两种效率差不多。但是，当涉及到局部绘制（局部渲染）的时候，效率就差多了。