導(dǎo)語： 以前在開發(fā)Native頁面的同時鞋拟，還處理Hybrid頁面中Web和Native的交互，現(xiàn)在又開始接入Weex這樣的跨平臺開發(fā)方案令花，感覺純粹的Native App離我們越來越遠（感慨一下）抹凳。Weex到怎么工作的鸯匹，本文簡單說一下≡植【想知道如何將Weex接入iOS項目挫望，請看Weex 1：Weex接入iOS項目）】
一、Weex架構(gòu)
從Weex的架構(gòu)圖中可以看出
1狂窑、Weex首先將編寫的Weex源碼媳板，也就是后綴名為.we，由<template>泉哈、<style> 和 <script>等標簽組織好的內(nèi)容蛉幸，通過transformer（轉(zhuǎn)換器，weex-toolkit 提供的工具）轉(zhuǎn)換成JS Bundle丛晦。
2奕纫、然后將JS Bundle部署在服務(wù)器，當接收到終端（Web端烫沙、iOS端或Android端）的JS Bundle請求匹层，將JS Bundle下發(fā)給終端。
3斧吐、在終端（Web端又固、iOS端或Android端）中，由Weex的JS Framework 接收和執(zhí)行JS Bundle代碼煤率，并且執(zhí)行數(shù)據(jù)綁定仰冠、模板編譯等操作，然后輸出JSON 格式的 Virtual DOM蝶糯；JS Framework發(fā)送渲染指令給Native 洋只，提供 callNative 和 callJS 接口，方便 JS Framework 和 Native 的通信。
說明：Weex源碼轉(zhuǎn)換成JS Bundle 识虚、JS Framework 和Native渲染絕對是實現(xiàn)跨平臺技術(shù)的關(guān)鍵（目前我是這么想的）肢扯。
二、Weex源碼轉(zhuǎn)換成JS Bundle
整體工作可以分為三個部分
1担锤、轉(zhuǎn)換 <template> 為 類JSON的樹狀數(shù)據(jù)結(jié)構(gòu), 轉(zhuǎn)換數(shù)據(jù)綁定 為 返回數(shù)據(jù)的函數(shù)原型蔚晨。#####
<foo a="{{x}}" b="1" /> --> {type: "foo", attr: {a: function () {return this.x}, b: 1}}.
2、轉(zhuǎn)換 <style> 為 類JSON的樹狀數(shù)據(jù)結(jié)構(gòu)肛循。
.classname {name: value;} --> { classname : { name : value } }.
3铭腕、 把上面兩部分的內(nèi)容和 <script> 中的內(nèi)容結(jié)合成一個JavaScript AMD（AMD：異步模塊規(guī)范） 模塊。#####
下面是一個完整的例子
<template>
<foo a="{{x}}" b="1" class="bar"></foo>
</template>
<style>
.bar {width: 200; height: 200}
</style>
<script>
module.exports = {
data: function () {
return {x: 100}
}
}
</script>
將轉(zhuǎn)換為:
define('@weex-component/main', function () {
module.exports = {
data: function () {
return {x: 100}
}
}
module.template = {
type: "foo",
attr: {
a: function () {return this.x},
b: 1,
classname: ['bar']
}
}
module.style = {
bar: {width: 200, height: 200}
}
})
bootstrap('@weex-component/main')
說明1：除此之外,轉(zhuǎn)換器還會做一些額外的事情: 合并Bundle ,添加引導(dǎo)函數(shù)多糠，配置外部數(shù)據(jù)等等累舷。
說明2：案例來自Weex的官方文檔。當前大部分Weex工具最終輸出的JS Bundle格式都經(jīng)過了Webpack的二次處理夹孔，所以你實際使用工具輸出的JS Bundle會和上面的有所區(qū)別被盈。
三、JS Framework
1搭伤、JS Framework 簡述#####
在初始化階段被原生 JavaScript 引擎運行只怎。它提供被每個JS Bundle調(diào)用的 define() 和 bootstrap() 函數(shù)。一旦JS Bundle從服務(wù)器下載后怜俐，這些函數(shù)就會執(zhí)行. define() 函數(shù)以注冊模塊; bootstrap()會編譯主要的模塊為Virtual DOM尝盼，并發(fā)送渲染指令給Native 。就這樣佑菩，同樣的一份JSON 數(shù)據(jù)盾沫，在不同平臺的渲染引擎中能夠渲染成不同版本的 UI，這是 Weex 可以實現(xiàn)動態(tài)化的原因殿漠。
2赴精、在Weex實例運行期間，Native和JS之間的相互調(diào)用的循環(huán)往復(fù)的調(diào)用會從Weex實例初始化持續(xù)到銷毀#####
- callNative 是一個由native代碼實現(xiàn)的函數(shù), 它被JS代碼調(diào)用并向native發(fā)送指令,例如 rendering, networking, authorizing和其他客戶端側(cè)的 toast 等API绞幌。
- callJS 是一個由JS實現(xiàn)的函數(shù), 它用于Native向JS發(fā)送指令. 目前這些指令由用戶交互和Native的回調(diào)函數(shù)組成蕾哟。
四、Native渲染
1莲蜘、Native 渲染引擎提供客戶端組件（Component）和模塊（Module）#####
組件（Component）：在屏幕內(nèi)可見谭确，有特定行為，能被配置不同的屬性和樣式票渠，能響應(yīng)用戶交互逐哈，常見的組件有: <div>、<text>问顷、 <image>昂秃。
模塊（Module）： 是一組能被JS Framework調(diào)用的API. 其中的一些能以異步的方式調(diào)用JS Framework, 例如: 發(fā)送HTTP請求禀梳。
2、Weex 的渲染流程#####
Weex 的渲染流程如下圖：
從Weex 渲染流程圖中肠骆，可以看到渲染分為：
輸入：虛擬DOM
構(gòu)造樹結(jié)構(gòu). 分析虛擬DOM JSON數(shù)據(jù)以構(gòu)造渲染樹(RT).
添加樣式. 為渲染樹的各個節(jié)點添加樣式.
創(chuàng)建視圖. 為渲染樹各個節(jié)點創(chuàng)建Native視圖.
綁定事件. 為Native視圖綁定事件.
CSS布局. 使用 css-layout 來計算各個視圖的布局.
更新視窗(Frame). 采用上一步的計算結(jié)果來更新視窗中各個視圖的最終布局位置.
輸出：Native UI 頁面
End
本文參考：Weex 工作原理
更細致的內(nèi)容深入在使用Weex之后再繼續(xù)深入理解（畢竟第一次用）算途。
