在很早以前，我一直以為前端很簡單，前端沒什么好架構(gòu)的，有jQuery就足夠了，jQuery的確太優(yōu)秀了，以至于很多標(biāo)準(zhǔn)都參照了它。移動時代的到來，讓web有更大的舞臺，web有跨平臺、快速部署的天然優(yōu)勢，世界也對web有更多的想法和期待，前端業(yè)務(wù)也越來越復(fù)雜，前端正在經(jīng)歷了前所未有的挑戰(zhàn)。這時前端也非常需要框架來解決一些問題。前端借鑒了很多優(yōu)秀的思想，產(chǎn)生了大量的框架，百家曾鳴，這是前端最好的時刻，也是最壞的時刻。前端需謹(jǐn)慎前行。

接下來看看淘在路上h5的整體架構(gòu)圖

架構(gòu)層大概是這樣

前后端分離
why：

• 前端嚴(yán)重依賴后端
• 溝通成本高
• 職責(zé)不清楚

前端寫Demo，后端套頁面

• 后端需要寫HTML
• 前端仍然確認(rèn)后端寫的HTML

前端寫View層，后端只管數(shù)據(jù)

• 前端需要熟悉后端語言
• 前端需要了解后端架構(gòu)

html 沒有include的能力

我們怎么做的：

• view由瀏覽器渲染
• 和客戶端使用同一套API
• 前端不依賴后端

前后端分離之后的優(yōu)點(diǎn)：
1、開發(fā)效率更高，在聯(lián)調(diào)之前，互不干擾，前端開發(fā)完成后就是實(shí)際可用的代碼，不需要再轉(zhuǎn)換成后臺編譯環(huán)境，前后端都可以快樂的開發(fā)了。

h5App 包含的部分
h5App的優(yōu)點(diǎn)：
把資源離線到本地也是很多公司的解決方案。
打開頁面時，html,css,js這些資源已經(jīng)在本地，所以非?？斓木涂梢园l(fā)起ajax請求去取數(shù)據(jù)，縮短了頁面展示時間。
這里有一個對比，H5APP大概20ms左右的就開始請求了，瀏覽器需要等到400ms以后才可以請求數(shù)據(jù)

本來訪問本地需要用file協(xié)議打開html代碼，這有很多不方便的，不能跨域，不能共用cooike，跳轉(zhuǎn)網(wǎng)頁都需要用file協(xié)議，不能post請求。

虛擬域可以做到打開一個線上的地址，實(shí)際上訪問的是離線到本地的html。

虛擬域的優(yōu)點(diǎn)：
這是一套超好的解決方案，有了它，前端開發(fā)者不用考慮開發(fā)的是離線緩存的代碼還是在瀏覽器運(yùn)行的代碼，不用考慮跨域問題，cookie可以共用。這也是我們一套代碼適應(yīng)多端的關(guān)鍵點(diǎn)。

JsBridge:
js本來是不能和iOS 直接通訊的，但是實(shí)際使用中，我們又需要雙方可以通訊，所以聰明的程序員就想出了jsBrigde這樣的方式。

h5App 是團(tuán)隊(duì)的成果，這是一個跨部門深度合作的項(xiàng)目。在這里需要感謝王樂天、單斌、張彥華、朱偉、金剛、董凱，因?yàn)橛心銈兊纳疃葏⑴c和支持，h5App才能完成。讓我們給他們最熱烈的掌聲。

開發(fā)

調(diào)試

高效跨平臺的調(diào)試技巧是一個前端必須掌握的，前端正在經(jīng)歷一個比IE6更混亂的時代，各種平臺，各種設(shè)備，各種自家定制的webview。

構(gòu)建工具

使用了gulp開發(fā)構(gòu)建工作流，gulp 生態(tài)發(fā)展很快，有很多插件可以直接使用，頁有一些不能滿足我們的業(yè)務(wù)需求的，所以這套工具，自己也寫了幾個插件