动态化
Web 应用具有天然的动态化特性，即在应用上线后，可通过配置数据接口，实时更改页面布局及交互：
- HTML 可以通过 Ajax 获取后，使用 DOM API 变更 DOM 实时生效；
- CSS 可以通过动态添加 style 标签实时更新；
- JS 既可以通过添加 script 标签拉取执行，也可以通过接口获取 JS 文本，再使用 eval/Function 等 API 执行。
小程序动态化存在的问题：
- Runtime 接口缺失（没有开放 eval/Function 功能），导致无法直接执行交互脚本。
- 桥的缺失，导致无法直接操作更新视图元素。
为了解决这两个问题，需要开发：
- JSVM —— 在小程序端能够执 JS AST 的 runtime;
- 渲染模板引擎 —— 能够将传入的模板布局配置还原成小程序页面。
架构图
image.png
处理过程解析
1. 动态组件
（1）动态组件设置case属性后，通过接口获取云端代码（在远端编写的组件代码），dom即wxml-ast， jscode即js-ast；
（2） 使用内置jsvm 解析 js-ast:
（3） 解析wxml-ast，将传入的模板布局配置还原成小程序页面。参照上图需要解决两个问题：递归渲染vnode，绑定交互事件。
2.如何递归渲染，绑定交互事件
动态组件其内部有一个模板，把所有标签动写成一个template。例如：<template is="button">.当拿到远端的dom的ast后，递归渲染每一个标签。样式是通过style添加到每个标签上的。
3.内置jsvm
抽象语法树是由编译器（complier）在语法分析阶段产生（由 parser 解析生成）。参考ref2。
ESTree：js-ast 使用的AST标准；
@babel/parser : 将js 转为AST；
jsvm：解释执行AST；
主要代码流程：
dynamic组件设置case属性后，会触发observer，调用init方法：
init {
const vm = getVm(); // 获取虚拟机对象
const vdom = new VDOM(); // 初始化虚拟dom对象
_init： getData（ 获取云端代码） => bindScope（ 绑定js执行上下文） => evalData（ 解释执行js） => setData(执行diff， 更新视图层)
reload： getData => evalData => setData
bindScope {
scope = this[SCOPE] = getScope(context); // 生成一个新作用域，包含context中的所有对象；
}
evalData {
comp[TPL] = dom; // 缓存云端wxml-ast
vm.runInScope(_scope, jscode.type ? jscode : (data.jscode = inflate(jscode))); // 在提供的Scope下解释执行AST代码～
}
setData {
const setData = (obj ? : Partial < DynamicContext > , callback ? : any) => {
Object.assign(context.data || (context.data = {}), obj); // 更新当前的context
injectIntoScope(scope, obj); // 更新当前模板的作用域
callback && cachedActions.push(callback); // 缓存callback队列
flush(); // flush setData
comp[V_DOM] = vdom; // 缓存本次vdom
};
flush {
vdom.calc(comp[TPL], scope); // 依据模板和当前作用域，数据内联后生成虚拟dom
const diffNode = diff(vdom.vnodes, comp.data.config, 'config'); // diff算法：comp.data.config是上一次的vdom，生成diffnode
comp.setData(diffNode, callBackFun); // 调用微信的setData方法，diffnode会在小程序渲染层解析最后更新视图，这部分代码参考core.wxml
}
}
}
