學問
最近“上層建築”在興起國學熱，所以公司幾個月前決定開發一款名叫“學問”的有關於國學的app。
APP的詳情頁面還是由web來顯現具體內容，有些類似於新聞頁，圖文混排什麼的web是最適合幹這個的了，所以團隊決定用WEB來實現詳情頁。
團隊對WEB頁的要求是：
- 頁面在訪問後離線依然可以檢視。
- 首屏展現速度要快，不允許長時間白屏或loading。
專案現狀
後端提供的都是以JSON為資料格式的API介面供Native端使用，同樣提供給WEB的也是JSON格式的API介面
那麼意味著WEB工作流程是
- 開啟web，載入基本資源，如CSS，JS等
- 發起一個ajax請求再到服務端請求資料，同時展示loading
- 得到json格式的資料後再根據邏輯選擇模板渲染出”DOM字串"
- 將”DOM字串”插入頁面中webview渲染出DOM結構
這些步驟都由使用者所使用的裝置中逐步執行，也就是說使用者的裝置效能與APP的執行速度聯絡的更緊
換句話說就是如果使用者的裝置很低端，那麼APP開啟頁面的速度會越慢。
如果是在PC端的瀏覽器中基本不成問題，因為現在瀏覽器效能已經非常好了。但在低端的Android機器上的webview效能可就難說了。
而且離線後還得要檢視已訪問過的頁面，實現最好的方式就是用HTML5的離線儲存技術了，但離線儲存存的是整個頁面的HTML及資源，不會存JSON資料
用本地資料庫存把JSON資料也存下來？靠，太複雜了吧...
只能是服務端直接輸出HTML結構渲染頁面，而不是API輸出JSON再由客戶端渲染頁面。
讓服務端人員來寫頁面？
確實可以依照以前老的方式，自己寫出HTML的靜態頁面交給服務端人員，再套上JSP或PHP服務端語言，但是..
由於服務端人員對前端HTML結構不熟悉套程式碼時造成各種錯誤經常出現。而且很難找出BUG，相信做前端的程式猿應該都體會過..
也有很多前端人員不得不開始學習JSP或PHP來應付這樣的場景，全棧工程師麼-_-!..
一種折中的解決方案
我看到過某些公司的某些頁面，在首屏頁面head的某個<script>中輸出大量的JSON資料
大概是這樣
<script>
var _jsonData = [{a: 1}, {a: 2}, …];
</script>
我猜測大概是想省去首屏發起ajax請求，直接將JSON輸出到頁面中，由JS來完成DOM構建。
這樣在一定程度上提高了首屏渲染速度，前端人員又不用去寫服務端程式
我沒用這種方式，因為沒人管我，我就是這麼任性..
Er...更激進的解決方案
關注NodeJS很久了一直沒怎麼用，而且NodeJS已經發展了很多年，現在大公司應用的越來越多，可以參考NodeJS應用公司列表-》
做為前端人員，NodeJS真的很容易上手，語法就是JAVASCRIPT麼。
聽說淘寶啊什麼的前端人員已經開始用NodeJS這麼做了，大公司就是先進啊。嗯，我們盛大文學也是大公司-_-!，那麼上吧騷年！
用NodeJS來做為橋樑架接伺服器端API輸出的JSON。如圖：
瀏覽器(webview)不再直接請求JSP的API，而是
- 瀏覽器請求伺服器端的NodeJS
- NodeJS再發起HTTP去請求JSP
- JSP依然原樣API輸出JSON給NodeJS
- NodeJS收到JSON後再渲染出HTML頁面
- NodeJS直接將HTML頁面flush到瀏覽器
這樣，瀏覽器得到的就是普通的HTML頁面，而不用再發ajax去請求伺服器了。
這樣做的好處：
- app的WEB頁可以實現離線儲存技術
- 頁面首屏渲染更快
- 由於NodeJS與頁面在同一個域名下，所以就不用跨域了，而不用HTML5輸出頭資訊這樣的方式去實現跨域了
- 服務端與客戶端邏輯都由前端人員控制都是使用JAVASCRIPT語言，前端程式猿可以更好的控制和優化，套頁面什麼的不容易出錯
- 真正服務端程式人員不需要再關心頁面的渲染邏輯，僅需要關心資料的處理
這樣做的壞處：
- 增加了前端人員的工作
- 前端人員需要對服務端程式有一定的瞭解
- 服務端需要架起NodeJS服務
- 通過NodeJS架接後臺服務過程中通訊時間上必然有一部分損失
好在NodeJS安裝比較簡單，各種外掛也非常豐富
專案中實際應用經驗
用ExpressJS框架搭建NodeJS的WEB服務感覺棒棒噠！
真的很簡單，三下兩下就搞定了，我這麼菜的人都行，說明真的很簡單！
注意點：
頁面中動態部分，如：評論，閱讀人數，讚的人員等這些動態資料還是需要用ajax請求
這些動態資料需要動態的插入DOM中否則這些資料會被離線儲存給快取住，每次開啟都是一樣的資料不會再更新，
除非.appcache檔案更新，這樣肯定不合理，嗯對，就是不合理
所以那些動態資料還是可以根據原先的邏輯去直接請求JSP或PHP之類的服務端提供的API介面，當然跨域什麼的就看專案需求與專案環境了。
ExpressJS中預設的模板是EJS，而瀏覽器中我使用的是artTemplate.js，好吧我真的喜歡artTemplate.js
一查發現artTemplate也有NodeJS版本的，就這樣服務端與瀏覽器端都可以使用artTemplate來做為渲染模板了，可以說是無縫啊，嘿嘿
最後要說的
第一次在正式專案中使用NodeJS還是挺興奮的，感覺前端的路子又多了一條。
第一次麻，都緊張，都快....
er..就怕由於對NodeJS的不瞭解最後造成致命的錯誤，而導致專案延期。
現在已經上線了目前只有Android版本，掃一掃即可
===================================================================
轉載處請註明：部落格園(池中物,王二狗)willian12345@126.com