Weex 框架中 JS Framework 的結構

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 // 入口檔案

weex 例項包含了如下方法：

注：在 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 。

模板編譯的過程需要遞迴生成整個 virtual dom tree，期間還會與原生模組密集通訊，會消耗很多記憶體和計算資源，這個過程通常也是效能瓶頸。

在模板編譯完成後，會觸發hook:ready事件。

Weex 框架中 JS Framework 的結構

Weex和React Native框架對比與選擇

nodejs中weex前端框架小專案的搭建。

weex 阿里移動端開發框架

Weex 框架中 JS Framework 的結構

Weex和React Native框架對比與選擇

nodejs中weex前端框架小專案的搭建。

weex 阿里移動端開發框架

相關推薦