先後端分離淺析

什麼是先後端分離？

先後端爲何要分離？

先後端怎麼樣分離的？

先後端分離給咱們前端技術人員的開發帶來什麼樣的好處？

下面我就帶着這些問題，來簡單談談我瞭解到的先後端分離狀況。

 

在講先後端分離以前，讓咱們先講一講什麼是MVC？

　　MVC誕生於上世紀70年代，是一種經典的設計模式，全名爲 Model-View-Controller，即 模型-視圖-控制器。其中模型是用於封裝數據的載體，視圖偏重於展示、決定了界面的樣子，而控制器主要用於粘合模型和視圖的。這個模式的出現，讓開發更加高效，讓代碼耦合度儘可能減少，讓應用程序各部分的職責更加清晰。

　　可是在這個模式下，每次瀏覽器請求都必須通過「控制器→模型→視圖」的流程，過程較複雜，而當時渲染視圖的過程仍是由服務器端來實現的，最終呈現給瀏覽器的是帶有模型的視圖頁面，這樣性能就沒法獲得優化。

　　這個時候就是前端後端徹底沒有分離的時候，這時候的前端還僅僅侷限於展現一個頁面，通常扮演的只是切圖的工做，只是簡單地將UI設計師提供的原型圖實現成靜態的HTML頁面，俗稱頁面仔。而具體的頁面交互邏輯，都是由後臺的開發人員來實現的。

 

ajax誕生了

　　ajax於1998年獲得應用，它的應用使數據展示的過程更加直接，而且提供了更好的用戶體驗。

　　這個時候，首先從瀏覽器發送 AJAX 請求，而後服務端接受該請求、並返回 JSON 數據給瀏覽器，最後在瀏覽器中進行界面渲染。這個時候一樣出現了一個問題，那就是ajax發送的請求方式在不一樣開發者之間各不相同。

　　2000年，Roy Fielding 博士發表了的一篇關於軟件架構風格的論文- Representational State Transfer（REST，即表屬性狀態轉移），rest服務一出，國內外許多知名互聯網公司紛紛採用，這就造成了一套較爲廣泛的請求方式（後端架構模式）。

　　此時先後端分離初顯，達到了半分離的狀態。爲何是半分離呢？此時的前端能夠完成更多的HTML、CSS頁面渲染、以及JS的動態頁面了，可是它依然沒有完成分離出後端，先後端共用一個代碼庫，可是代碼分別存放在兩個工程中。後端不關心或不多 關心前端元素的輸出狀況，前端不能獨立進行開發和測試，項目中缺少先後端交互的測試用例，前端的編寫進度受限於後端數據的供給，大大影響了前端開發的效率。

什麼是先後端分離？

　　事實上先後端分離就是一種架構模式，說通俗點就是後端項目裏面看不到頁面（HTML）,後端給前端提供接口，前端調用後端提供的REST風格接口就行，前端專一寫頁面（html）和渲染（JS、CSS、各類前端框架）；後端專一寫後臺代碼就行。先後端分離的核心：後臺提供數據（操做數據庫，實現增刪改查、提供接口），前端負責顯示。

　　2009年，Ryan Dahl在博客上宣佈準備基於V8建立一個輕量級的Web服務器並提供一套庫。2011年7月，Node.js在微軟的支持下發布Windows版本。 node.js的出現，爲前端提供了js版本的服務器，讓先後端代碼庫分離，能支持前端的獨立開發和測試，讓前端脫離了後端的束縛。這時就由以前的B→S→DB模式轉變成了B→Node.Js→S→DB模式。

 

爲何要引入node.js做爲中間層？

　　nodejs主要是爲了分層開發，職責劃分，nodejs做爲前端服務器，由前端開發人員負責，前端開發人員不須要知道java後臺是如何實現的，然後臺開發人員也不須要考慮如何前端是如何部署的，他只須要作好本身擅長的部分，提供好API接口就能夠。同時nodejs自己有着獨特的異步、非阻塞I/O的特色，這也就意味着他特別適合I/O密集型操做，在處理併發量比較大的請求上能力比較強，所以，利用它來充當前端服務器，向客戶端提供靜態文件以及響應客戶端的請求，是一個很不錯的選擇。

先後端分離的好處？

　　爲優質產品打造精益團隊。經過將開發團隊先後端分離化，讓先後端工程師只須要專一於前端或後端的開發工做，使得先後端工程師實現自治，培養其獨特的技術特性，而後構建出一個全棧式的精益開發團隊。

　　提高開發效率。先後端分離之後，能夠實現先後端代碼的解耦，只要先後端溝通約定好應用所需接口以及接口參數，即可以開始並行開發，無需等待對方的開發工做結束。與此同時，即便需求發生變動，只要接口與數據格式不變，後端開發人員就不須要修改代碼，只要前端進行變更便可。如此一來整個應用的開發效率必然會有質的提高。

　　完美應對複雜多變的前端需求。若是開發團隊能完成先後端分離的轉型，打造優秀的先後端團隊，開發獨立化，讓開發人員作到專一專精，開發能力必然會有所提高，可以完美應對各類複雜多變的前端需求。

　　加強代碼可維護性。先後端分離後，應用的代碼再也不是先後端混合，只有在運行期纔會有調用依賴關係。