## 将 html 解释成  js (virtual-dom 的定义)

### 关于 virtual DOM diff

这是 **一个** 标准 DOM 的属性
![](./_image/2016-07-26-16-39-16.jpg)
下面是 mcore3 的 **一组**  virtual DOM 定义
```js
let virtualDOMDef = {
    tagName: 'ul', // 节点标签名
    props: { // DOM的静态属性，不需要 watch 变更
        id: 'list'
    },
    dynamicProps: { // DOM的动态属性，需要 watch
        width: '80%'
    },
    events: { // 事件定义
        click: [v.id, v.name] // 事件传递的上下文
    },  
    children: [ // 该节点的子节点
        {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
        {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
        {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
    ]
}
```
> 简化 比较对象 复杂度，是提升性能的一个关键点

那么，问题来了，怎么将 `html` 代码，转换成 上面的 virtual DOM 定义呢？
不可能手写上面的定义吧，那么，就有了这个 `h2svd-loader`.

h2svd-loader 有二个重要的概念
- 静态解释
- 构造 运行时代码 `runtime code`

### 静态解释

先来个简单的例子
```html
<div id="test"></div>
```
### 标签解释优先级
1.	`mc-for`
2.	`mc-if` `mc-unless`
3.	`mc-[attr]` `mc-on-[event]`
4.	`{x | [formatter] arg... | [formatter] arg...}` `{x}`
