還記得第一次嘗試前后端分離的時候，是使用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的開發經歷，在這里可以分享給大家
代碼會上傳到github上面，方便大家查閱
文章列表
留言列表
