数据监听之VM原理分析与实现

数据监听之VM原理分析与实现 #

课程地址：

Github代码：

前端进阶系列课程 #

《用JavaScript自己写MVVM前端框架》：https://t.cn/REeKJp0

《前端函数式编程FP易学易用》：https://t.cn/REeKVSk

《前端自己用NodeJS编写区块链BlockChain》：https://t.cn/REeoF7v

《程序语言进阶之DSL与AST实战解析》：https://t.cn/R3XoQJA

课程内容 #

第一章： JSX回顾

• JSX编译原理

第二章：实现数据监听的方法

• Object.define方法
• ES6之Proxy与Reflect

第三章：实现数据监听

第一章： JSX回顾 #

回顾一下之前我们学过的《 用JavaScript自己写Virtual DOM 》，上面这个例子是我们之前介绍JSX语法构建Virtual DOM的最简单的方案。我们在课程《 程序语言进阶之DSL与AST实战解析 》中介绍了JSX的实现原理，代码编译的时候会处理JSX文件，根据配置或者页面的注释，基于babylon做词法分析，会拆解代码中的html片段，然后转换成函数形式。如下：

var a = h(
  "ul",
  { "class": "list" },
  h(
    "li",
    null,
    "item 1"
  ),
  h(
    "li",
    null,
    "item 2"
  )
);