weex 源碼解析（一） -- 總體實現思路（Android視角）

weex最近也比較火，公司也開始使用了該框架，因而就開始玩下，入手部分不會太難，可是調試卻是折騰了很多時間。折騰完了，也寫了一兩個小頁面，那接下來就要拆下weex這個輪子啦~ 方便後面使用的時候，有什麼坑，但願能夠跳的快一些。

先拋出一個問題

若是咱們要在Android裏，不用webview，經過在線的方式，動態的在一個FrameLayout裏，添加各類子View，進行展現，而且還能夠給各個子View添加各類監聽事件。你們要怎麼實現這樣的功能呢？

咱們能夠這麼實現：

1. 在Android端，先在佈局裏添加一個自定義的FrameLayout。
2. 獲取該動態FrameLayout的在線配置信息，根據這些配置信息，動態生成各類子View，添加到這個FrameLayout上。
3. 爲了可以響應各類監聽事件，那還須要在這個配置信息裏，添加上一些事件監聽和監聽後的操做，例如，onClick事件，點擊以後的操做。
4. 配置信息裏，添加上一些子View的佈局寬高之類的。 。。。

那這裏有些難點了，配置信息該怎麼寫呢？ 恩，咱們可使用Android 佈局xml的方式，快速的寫出這些view的佈局，而後將xml佈局下發給客戶端，客戶端使用xml解析器將這個xml文件進行解析，生成對應的子view，設置好各子view的佈局。 爲了可以讓子View添加各類監聽事件，並作響應的操做，咱們須要擴展咱們 xml文件，定製各類語法，添加事件的監聽和處理方法。

說到這裏，若是你作過前端的話，那確定會發現，這不就使用前端開發就行了嗎？正好裏面就有佈局的排列，樣式的定義，各類事件的監聽和方法的定義。

下面先來一份使用vue寫的H5頁面。

若是使用前端語言來編寫配置信息，那也挺不錯的，至少配置信息的編寫，比較通用，開放給其餘人使用，學習門檻也比較低。最重要的是，比本身從新定義一套語法，輕鬆多了。weex的思想其實和這個是相似的，也就是將用vue來寫配置文件，在android 層，將這些配置信息進行解析，而後動態的生成各類子View，添加到咱們剛剛說的FrameLayout上。好，記住這個思路，那咱們接下來就須要看看，weex是怎麼實現這種方案的。

總體框架

爲了避免讓你們一開始就只看樹葉，不見森林，咱們先來看看weex官網工做原理的這張總體框架圖。

看不懂，沒有關係，這裏說的，其實也不太複雜。下面來一一介紹下：

Vue File，就是咱們上面說的配置信息，能夠添加各類子View，樣式，事件響應方法等。

Vue File transformer 爲 JS Bundle，JS Bundle 就是vue編譯生成的結果文件，通常命名是xxx.js，在weex工程的編譯結果目錄$weex-project-dir/dist下，這裏作下爲何要轉爲js文件，而不直接用vue文件呢？（多是爲了作文件壓縮，還會把引用的其餘vue文件的內容給集成到一個js文件裏，這樣Android端，就能夠只加載一個最終的js文件就能夠了。）

server，這裏是指經過網絡將js文件傳送到Android端，固然這個js文件，直接放在本地也行，讓weex SDK去加載本地的js文件。

JavaScript Runtime，這裏是在解析上面的js文件。由於vue是前端開發js框架語言，比較通用，因而weex團隊，也將其作的通用一些，可讓vue項目，運行在H5，Android，IOS上。這樣的好處不言而喻了。 除了解析佈局，還能夠用來執行在vue上定義的一些方法，否則，一些監聽事件的回調，以及一些方法，都不知道要在哪裏運行才比較好了。這裏的JavaScript Runtime，在Android端其實就是 UC 提供的 v8 內核。

IOS，Android，H5 的 RenderEngine，天然就是將上面解析的js內容，轉成咱們具體的子View樹，加到咱們上面說的自定義FrameLayout上了，進行渲染，和設置各類監聽事件和方法了。爲何JavaScript Runtime和RenderEngine在這裏是雙向通行的？是由於佈局的顯示是在各終端上渲染，可是一些方法的執行，仍是在JavaScript Runtime上去執行，這就涉及到不少雙方通信的狀況，因此是雙向的。

總結：

爲了可以動態的將各類子view加在本地自定義FrameLayout中，須要Android端去解析用vue編寫的配置文件，並生成對應的子View進行渲染。因爲vue中有一些函數方法須要執行，能夠在JavaScript Runtime裏執行。

後續：

看來在一篇文章裏，寫徹底部的weex 源碼解析，有點難度，那仍是分開幾篇來寫好了，第一次在掘金上寫文檔，以上是我的的理解，寫得有誤的地方，還請指出，以便更正，後續會繼續寫完剩下的解析。