Nested

核心点 : 提供了嵌套的方式创建 html dom 的元素.

使用关键的函数 Nested.createElement 创建一个 NestableElement

// e( '类名', '标签' ), 定义了一个 NestableElement --- Text.
const Text = Nested.createElement('grey', 'div')

// Text 本质上是一个函数. 运行后才生成真正的 dom 节点

const dom = Text()
// dom 对应 html 结构为: <div></div>
 
const dom2 = Text(
  Text('good'),
  Text('123', Text('哈哈')),
)
/** 
 * dom2 对应 html 结构为: (省略了类名)
 * <div>
 *  <div>good</div>
 *  <div>
 *  123
 *   <div>哈哈</div>
 *  </div>
 * </div>
 * */

使用了 NestableElement 实现了只使用纯 js 达到了类似 jsx 语法的效果.

这里没有虚拟 DOM 的概念, 生成的 DOM 元素都是真实的 DOM 元素. 小心的呵护你的dom, 你将得到你应有的回报.