摘要：依舊采取傳統(tǒng)的開(kāi)發(fā)技術(shù)棧進(jìn)行開(kāi)發(fā)，同時(shí)在終端的運(yùn)行體驗(yàn)不輸。首先來(lái)看下前端開(kāi)發(fā)框架目前與構(gòu)成了三大最流行的前端開(kāi)發(fā)框架，具有組件化以及三大特性，還學(xué)習(xí)的，引入了狀態(tài)管理模塊。

摘要： WEEX依舊采取傳統(tǒng)的web開(kāi)發(fā)技術(shù)棧進(jìn)行開(kāi)發(fā)，同時(shí)app在終端的運(yùn)行體驗(yàn)不輸native app。其同時(shí)解決了開(kāi)發(fā)效率、發(fā)版速度以及用戶(hù)體驗(yàn)三個(gè)核心問(wèn)題。那么WEEX是如何實(shí)現(xiàn)的？目前WEEX已經(jīng)完全開(kāi)源，并捐給Apache基金會(huì)，我們可以通過(guò)分析其源碼來(lái)一探究竟。

點(diǎn)此查看原文：http://click.aliyun.com/m/43048/

作者：阿里-移動(dòng)云-大前端團(tuán)隊(duì)

傳統(tǒng)的移動(dòng)端開(kāi)發(fā)，一個(gè)完整的業(yè)務(wù)需要維護(hù)三份終端代碼：Android、iOS、H5，這帶來(lái)了極大的開(kāi)發(fā)成本以及維護(hù)成本。尤其是對(duì)處于業(yè)務(wù)初創(chuàng)期需要快速試錯(cuò)的業(yè)務(wù)以及需要支持定期運(yùn)營(yíng)活動(dòng)的業(yè)務(wù)。所以業(yè)界也一直在探索跨平臺(tái)方案，旨在通過(guò)一套代碼完成各個(gè)終端的業(yè)務(wù)邏輯。相關(guān)方案經(jīng)過(guò)不斷演化，從早期的H5、Hybrid到如今的Cloud Native(云原生)，在開(kāi)發(fā)效率和用戶(hù)體驗(yàn)上都在一點(diǎn)點(diǎn)逼近最初的設(shè)想。

早期H5和Hybrid方案的核心是利用終端的內(nèi)置瀏覽器（webview）功能，通過(guò)開(kāi)發(fā)web應(yīng)用滿(mǎn)足跨平臺(tái)需求。該方案可以解決跨平臺(tái)問(wèn)題，同時(shí)可以提升發(fā)版效率。但其最大的弊端在于用戶(hù)體驗(yàn)相較于native開(kāi)發(fā)的app存在較大差距，經(jīng)常出現(xiàn)頁(yè)面卡頓，加載慢等問(wèn)題。

于是后來(lái)業(yè)界開(kāi)始探索依舊利用web技術(shù)棧開(kāi)發(fā)出媲美原生體驗(yàn)app的方案，于是以WEEX為代表云原生開(kāi)發(fā)框架開(kāi)始出現(xiàn)。所謂云原生(Cloud Native)指可以通過(guò)云端快速發(fā)布（與遠(yuǎn)程web應(yīng)用發(fā)布流程類(lèi)似），同時(shí)還可以達(dá)到媲美原生App體驗(yàn)的方案。WEEX依舊采取傳統(tǒng)的web開(kāi)發(fā)技術(shù)棧進(jìn)行開(kāi)發(fā)，同時(shí)app在終端的運(yùn)行體驗(yàn)不輸native app。其同時(shí)解決了開(kāi)發(fā)效率、發(fā)版速度以及用戶(hù)體驗(yàn)三個(gè)核心問(wèn)題。那么WEEX是如何實(shí)現(xiàn)的？目前WEEX已經(jīng)完全開(kāi)源，并捐給Apache基金會(huì)，我們可以通過(guò)分析其源碼來(lái)一探究竟。

WEEX框架主要分為兩部分：

1.前端JavaScript框架
2.Native SDK

在上一篇博客中，我們介紹了Native SDK的原理，本文主要介紹其前端JavaScript框架原理。

1 整體架構(gòu)
首先還是再來(lái)看下WEEX開(kāi)發(fā)的整體架構(gòu)：

可以看到在JS-Native Bridge將渲染指令發(fā)送給Android或者iOS渲染引擎之前，我們的業(yè)務(wù)代碼運(yùn)行在JSCore/v8的執(zhí)行引擎之中，而在該執(zhí)行引擎之中除了執(zhí)行業(yè)務(wù)JSBundle，還運(yùn)行著JS Framework，JS Framework不僅提供了jsbundle必要的運(yùn)行時(shí)環(huán)境，同時(shí)還提供了與native通信的接口。

而這個(gè)JS Framework就是我們今天介紹的重點(diǎn)。

這是前端框架的主要架構(gòu)：

FRONTEND FRAMEWORK/DSL:這是WEEX的開(kāi)發(fā)框架，目前WEEX主要是使用Vue.js進(jìn)行開(kāi)發(fā)
WEEX-VUE-LOADER：前端編譯器，將vue文件編譯成es5代碼
WEEX-VUE-FRAMWORK：WEEX核心框架，主要負(fù)責(zé)將virtual dom轉(zhuǎn)換成weex的native dom api
WEEX-RUNTIME:負(fù)責(zé)與native渲染引擎對(duì)接，將native dom api轉(zhuǎn)換成對(duì)應(yīng)平臺(tái)（Android、iOS）的platform api,然后傳遞給native渲染引擎，由后者負(fù)責(zé)渲染工作。

2 Vue.js

首先來(lái)看下前端開(kāi)發(fā)框架Vue.js,Vue.js目前與React 、 Angular構(gòu)成了三大最流行的前端開(kāi)發(fā)框架，Vue.js具有組件化、virtual dom以及MVVM三大特性，還學(xué)習(xí)React的Redux，引入了狀態(tài)管理模塊Vuex。同時(shí)相比起React主要基于JSX，Vue.js的開(kāi)發(fā)模式更加清晰，簡(jiǎn)單，上手速度更快。.vue 文件通?？梢苑譃槿糠郑?template> 、