openresty前端開發序

還記得第一次嘗試前後端分離的時候，是使用nginx + react 構建的spa應用，後端是java，主要處理業務邏輯邏輯部分，返回json資料，在nginx裡面配置好html + js純靜態檔案，再通過反向代理到java後端，解決跨域問題，然後使用ajax來進行互動，模型很簡單，也很有效

主要解決了幾個問題

一、獨立，由於前後端分離，在開發的時候完全可以互相獨立，所謂獨立，其實就是說前後端是屬於兩個專案，儲存在各自的git倉庫，提交程式碼既不會衝突，也不需要合併

二、解耦合，後端開發完成之後只需要提交程式碼，然後釋出到測試環境，而前端只需要啟動一個nginx然後反向代理到測試環境，就可以開始開發工作，就是這麼簡單

三、版本更新，在專案上線之後通常需要繼續迭代更新，這個時候就提現出前後端分離的價值了，前端樣式排版更新，只需要更新前端，對後端幾乎沒有影響，那麼只需要測試前端，避免了部分開發人員的失誤，在前端更新的時候，導致後端服務的不可用，而由於前後端分離，並獨立部署，提高了後端的穩定性，又保持了前端的多變性

但是也帶來了一些其他的問題，主要邏輯都是js編寫，成了胖客戶端，在網速不佳的時候，體驗不是很好，還有一個就是seo問題，當然我之前做的主要針對微信端，而且也不考慮seo，所以即使這樣也能接受，那麼就只剩下前端載入效能的問題。

前端我是這樣解決的

使用webpack + gulp
webpack 用來編譯打包js，其實也可以用來編譯css，但是根據實戰，我發現webpack編譯後的css會比gulp編譯出來的要大那麼一點點，對於手機端來說，少一點是一點，於是選了gulp混合編譯

在js層混合使用了amd+cmd模組載入方式，公共模組會被打包到common.js裡面，各個頁面模組會獨立編譯出一個js檔案，這個檔案會在頁面載入的時候非同步載入

之前本來選的是react-router來做前端路由、但是我發現它並不好用，後來有選擇backbone來做路由，又發現僅僅為了一個路由而引入backbone不太划算，但是路由部分已經寫成backbone風格的程式碼，於是寫了一個mini版的前端路由相容backbone，來實現無縫切換，程式碼一共才十幾二十行，基於hash實現，完美支援webpack非同步載入，並帶loading效果，之前為了amd的loading效果改過react-router，發現很麻煩，所以就不用了，我要的是輕量，簡潔

前端樣式部分採用了weui做為基礎框架，有些元件還是挺好用的，將其封裝好之後，發現我只用到了部分元件，圖示部分我用的是阿里的字型圖示，於是把weui專案原始碼clone下來，只引用我用到的部分，大小瞬間減了一大半，有沒有

對於react其實也是有爭議的，一個是它的體積，一個是它的語法jsx
先說說語法吧，我感覺寫習慣之後，完全不想再寫jquery，從前我也是一個jquery愛好者，感覺jquery無所不能，而且為專案也寫了很多外掛，各種jquery，後臺的前端也是我用jquery+bootstrap寫的一個框架。其實一開始看到react的時候，還沒什麼感覺，因為專案都是基於jquery，也不能說換，就在fb官網看了下例子，就過去了
後來總是有人問我react的問題，為了解答他的問題，我就到官網去看文件，然後在本地測試，OK之後告訴他，其實是這樣的，噼裡啪啦的說一大堆，後來問得多了，我也看得多了，我也漸漸的對它感興趣，並決定下次新專案可以試試，於是經常到git上關注它的最新動態，我記得那時的版本是0.14吧，當時react還只是單個檔案，現在已經拆分成react 、dom專案模組了，對於jsx的寫法有人說是退步了，有人說是進步了，其實主要也css部分吧，這一部分我還是通過外部樣式引入class，只在jsx裡面寫渲染邏輯，元件小而美，沒有dom操作，所有行為都可預測，當然了也有同事始終忘不了jquery，於是在react裡面經常有(`#id`).addClass(`cls`) 這樣的程式碼，還有(‘#id’).data(‘id’)，$(this).find(‘input’) 各種查詢元素，不得不佩服jquery的深入人心，不，應該是深入骨髓了，是時候刮骨療傷了，咳咳

還有一個就是它的體積，gzip之後居然還有40k，對於有點強迫症的我來說，確實有點大，所以我只能儘量壓縮其它模組的大小，還好加上cdn跟cache之後，除了第一次大一點，其它都如絲般順滑，一直都想fork一份react程式碼，然後做個mini版，但是一直沒有時間去研究它的程式碼，後來發現攜程好像做了一件我一直想做的事情，就是把react給精簡了，用了一下發現大部分頁面都沒有問題，由於時間問題，沒有深入，也沒有切換，現在不知道發展得怎麼樣了。

ajax模組也是元件封裝的一個，為什麼沒有用jquery或zepto呢，還是那句話我為了精簡，當然了自己封裝的模組同時相容了jquery的ajax，並且在裡面加了一些攔截器，處理登入狀態判斷，超時處理，異常處理，呼叫ajax的方式基本不變，程式碼不是一個人在那些，有些保留下來會比較好，方便其他人

到這裡我都沒有貼程式碼，為什麼呢，其實主要表達的是一個思想，程式碼每個人寫的都不一樣，同一個功能實現的方式有N多種，寫出什麼樣的程式碼，主要是一個的技術沉澱與思想沉澱

由於專案成功上線，以及後面的陸續迭代，讓我對前後端分離更有信心，網上聽得最多的就是nodejs做前端中間層了，但是誰用誰知道。

由於埋下了基於nginx開發前端的伏筆，後面陸續做了幾個類似的專案，在一次很偶然的機會下，把lua編譯進了tengine模組，並在tengine裡面，用lua寫了幾段處理程式碼，對nginx + lua 開發開始嚮往，於是有了這段基於openresty的開發經歷，在這裡可以分享給大家