weex 具有移動端跨平台的特性，js framework 是其中比較關鍵的一層。首先來看一下 js framework 在 weex 中的位置：
從圖中可以看出 weex 整體的工作流程。首先開發者可以宣告式的定義元件，形成.we檔案，通過 weex-toolkit 提供的工具將.we檔案轉為 js bundle。js framework 接收並執行 js bundle 的**，並且執行資料繫結、模板編譯等操作，然後輸出 json 格式的 virtual dom 傳遞給移動端，同時也提供了callnative和calljs介面，方便 js framework 和 native 的通訊。同樣的乙份 json 資料，在不同平台的渲染引擎中能夠渲染成不同版本的 ui，這也是 weex 可以實現動態化的原因。
簡而言之，js framework 的輸入是 js bundle，輸出是 json 格式的 virtual dom，同時也提供了與 native 通訊的方法。
文中**的版本是 v0.15 。
weex/html5/default
├── api // 定義 vm 上的介面
│ ├── methods.js
│ └── modules.js
│ ├── bundle.js
│ ├── ctrl.js
│ ├── differ.js
│ ├── downgrade.js
│ ├── index.js
│ └── register.js
├── core // 資料監聽相關**
│ ├── license
│ ├── array.js
│ ├── dep.js
│ ├── object.js
│ ├── observer.js
│ ├── state.js
│ └── watcher.js
├── util // 工具函式
│ ├── license
│ └── index.js
├── vm // 元件模型相關**
│ ├── compiler.js
│ ├── directive.js
│ ├── dom-helper.js
│ ├── events.js
│ └── index.js
├── config.js
└── index.js // 入口檔案
注：在 web 環境下，掛在 window 上的變數名是小寫weex，而且經過了封裝，並非 js framework 直接暴露的介面。
bootstrap最後會建立應用的vm例項，整個過程可以分成三個步驟：
initevents 初始化事件和生命週期。
initstate 實現資料繫結功能。
編譯模板並且繪製 native ui。
initevents 會依次繫結三類事件：options引數中定義的事件、externalevents外部事件、內建的生命週期事件，前兩項通常都為null，生命週期包含了init、created、ready三個鉤子。生命週期函式可以在元件中定義，具體觸發時機如下：
module.exports = ,
methods: {},
init: function () ,
created: function () ,
ready: function ()
}
hook:init事件，並且將_inited屬性設定為 true。
資料繫結的核心思想是基於 es5 的object.defineproperty方法，在 vm 例項上建立了一系列的 getter / setter，支援陣列和深層物件，在設定屬性值的時候，會派發更新事件。這部分功能的實現借鑑了 vue 的思路以及部分**。資料繫結的過程主要涉及了三個物件：
在執行資料繫結之前，會將引數中傳遞的資料 merge 到_data屬性中來，然後執行initstate，分為三個步驟：
initdata，設定 proxy，監聽_data中的屬性；然後新增 reactivegetter & reactivesetter 實現資料監聽。 （這個過程比較繁瑣，涉及很多技巧，以後新開文章講解）
initcomputed，初始化計算屬性，只有 getter，在_data中沒有對應的值。
initmethods 將_method中的方法掛在例項上。
建立的observer的例項會掛載到_data.__ob__屬性中。資料繫結結束後會觸發hook:created事件，並且將_created屬性設定為 true。
模板編譯函式build會呼叫compile函式，compile會遞迴編譯整個模板，這個過程會展開自定義的元件，編譯指令，也會執行一些資料繫結，最終生成 virtual dom。其中，真正建立節點的是createbody和createelement兩個方法，createbody只會在建立根節點時呼叫。
此外還有乙個比較常用的方法：createblock，它會建立乙個特殊格式的 block，在真實element的開始和結束位置會新增兩個comment節點，在編譯過程中可以和 element 同等對待。之所以這麼設計，是為了方便編譯if、repeat等指令，當其繫結的資料項發生變化時，可以快速定位到需要改變的 dom 節點，僅在 start 和 end 兩個 comment 元素之間執行操作。
在編譯過程中，會根據節點的型別不同，將編譯邏輯分派到不同的函式中，主要包含以下幾種：
在 js framework 中實現的 virtual dom，包含了四類物件：document、node、element、comment，介面的定義也基本上都和 w3c 標準保持一致，不過要更為精簡一些。
不過，這裡建立的是 virtual dom，如何在不同的平台上建立 native ui ？
在document物件中包含乙個listener屬性，它可以向 native 端傳送訊息，每當建立元素或者是有更新操作時，listener 就會拼裝出制定格式的 action，並且最終呼叫callnative把 action 傳遞給原生模組，原生模組中也定義了相應的方法來執行 action 。
在模板編譯完成後，會觸發hook:ready事件。
Weex和React Native框架對比與選擇
大致基本類同，js native橋和前端渲染框架，只是使用框架技術不一樣 weex react native weex react native js引擎 v8jscore js開發框架 vue.js 元件化，資料繫結 virtual dom 模板就是普通的html，資料繫結使用mustache風格...
nodejs中weex前端框架小專案的搭建。
最近想要在學習nodejs，前端框架想要使用weex然後就想要安裝乙個weex框架。首先我們要先安裝好自己的nodejs，判斷自己的nodejs是否安裝成功，自己可以開啟自己的dos視窗，然後自己進行驗證，在視窗中輸入node v檢視自己的版本號。如圖 然後自己可以直接進行安裝weex這個框架，但是...
weex 阿里移動端開發框架
阿里的移動端框架，有空得試試 url 詳解 靈活的移動端高效能動態化方案 url quote 在我們對移動開發最佳實踐的思考中，我們認為移動開發的未來是更平衡的方案，一定是效能和動態性兼得。第二個，它一定是開放互聯的，pc端一直也是這樣的，也是非常好的狀態。我們覺得移動網際網路將來肯定也是基於更大眾...