vdom、instance、component、module

vdom

• Document 类，整个页面文档。
• Node 类，结点的基础类。
• Element 类，元素结点，继承自 Node，单个视图单元。
• Comment 类，注释结点，继承自 Node，无实际意义，通常用作占位符。

每个 Weex 页面都有一个 weex.document 对象，该对象就是一个 Document 类的实例，也是下面所有接口调用的起点。

Document

每个 Document 实例在创建的时候都会自动拥有一个 documentElement 属性，表示文档结点。该文档结点可以拥有一个 body

文档的主体结点只接受

、 或 三种类型的元素结点。

包含方法：createELement，createComponent，createBody，fireEvent和destroy

body: Element

• 文档的主体结点，概念类似 HTML DOM 里的 document.body。

documentElement: Element

• 文档的对应结点，概念类似 HTML DOM 里的 document.documentElement。
  body 和 documentElement 的关系是：documentElement 是 body 的父结点。

getRef(id): Node

• 根据结点 id 获取结点。

Node

一个虚拟节点类。

ref：

• 每个 Node 实例都有各自的在整个 Document 实例中唯一的 ref 值。

children: Node[]

• 该结点拥有的所有子结点的数组。

pureChildren: Node[]

• 该结点拥有的所有子元素的数组。和 children 的区别是，pureChildren 只包含了 Element 实例而不包含 Comment 实例。

Element 类 继承自 Node

包含对 Dom 树的操作方法：appendChild，insertBefore，insertAfter，removeChild和clear

属性操作：setAttr、setStyle、addEvent、removeEvent、fireEvent

WebElement 继承自 Element

• 插入一个 webView

toJSON(): Object

nodeType: number

• 永远是数字 1。

Comment 类 继承自 Node

注释节点

nodeType: number

• 永远是数字 8。

toJSON(): Object

nodeType

• 1 普通 element，
• 8 comment
• 3 TextNode，Vue 中 定义的 TextNode，TextNode

instance

1、页面示例

每一个页面都有为一个 instance，由 instance 负责 加载 jsbundle，并且
js 和 native 通信 的第一个参数 都是 instanceID。

2、生命周期

createInstance,
refreshInstance,
destroyInstance

component

1、组件

2、生命周期

weex    vue Description
init    beforeCreate    组件实例刚刚被创建，组件属性如data计算之前
created created 组件实例创建完成，属性已绑定，但DOM还未生成
beforeMount 模板编译/挂载之前
ready   mounted 模板编译/挂载之后
beforeUpdate    组件更新之前
updated 组件更新之后
activated   forkeep-alive, 组件被激活时调用
deactivated forkeep-alive, 组件被移除时调用
beforeDestroy   组件被销毁前调用
destroyed   destroyed   组件被销毁后调用