读了几页《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.正常情况下,后两种效率差不多。但是,当涉及到局部绘制(局部渲染)的时候,效率就差多了。
标签:obj,框架,想法,JS,html,浏览器,绘制,children From: https://www.cnblogs.com/cblx/p/18541113