openresty 前端開發序

還記得第一次嘗試先後端分離的時候，是使用nginx + react 構建的spa應用，後端是java，主要處理業務邏輯邏輯部分，返回json數據，在nginx裏面配置好html + js純靜態文件，再經過反向代理到java後端，解決跨域問題，而後使用ajax來進行交互，模型很簡單，也頗有效

主要解決了幾個問題

1、獨立，因爲先後端分離，在開發的時候徹底能夠互相獨立，所謂獨立，其實就是說先後端是屬於兩個項目，保存在各自的git倉庫，提交代碼既不會衝突，也不須要合併

2、解耦合，後端開發完成以後只須要提交代碼，而後發佈到測試環境，而前端只須要啓動一個nginx而後反向代理到測試環境，就能夠開始開發工做，就是這麼簡單

3、版本更新，在項目上線以後一般須要繼續迭代更新，這個時候就提現出先後端分離的價值了，前端樣式排版更新，只須要更新前端，對後端幾乎沒有影響，那麼只須要測試前端，避免了部分開發人員的失誤，在前端更新的時候，致使後端服務的不可用，而因爲先後端分離，並獨立部署，提升了後端的穩定性，又保持了前端的多變性

可是也帶來了一些其餘的問題，主要邏輯都是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的開發經歷，在這裏能夠分享給你們