許多剛接觸 IT 行業(yè)的小伙伴們經(jīng)常會聽到前端，后端兩個詞。小伙伴們可能會開始疑惑，不都是一家程序員嘛分什么前后端？接下來這篇文章，小編來告訴你，是什么讓程序員分了家？為什么要進行前后端分離？
首先，從最開始的開發(fā)說起：早期的 web 服務器開發(fā)比較隨意（沒有工程化體現(xiàn)），后端的 CGI（公共網(wǎng)關接口）既要負責數(shù)據(jù)處理，又要負責展示頁面的生成。就像建房子一樣，一個磚瓦匠，既要一邊砌墻，又要一邊刷漆，還要一邊和泥。使用這樣的方式，一個程序員就能把數(shù)據(jù)處理和頁面展示的活都給干了。在早期，這樣的開發(fā)方式相當普遍。
后來，人們發(fā)現(xiàn)，軟件開發(fā)也可以像土木工程那樣進行工程化開發(fā)，這時候又想到了之前的軟件開發(fā)中出現(xiàn)的種種問題，為了解決這些問題，一種新的設計模式出現(xiàn)了，它就是 MVC 模式。
MVC 模式把一個 web 應用分成三個層面，分別是 control 層（控制層），model 層（模型層）和 view 層（視圖層）。如下圖所示（不包含數(shù)據(jù)庫，數(shù)據(jù)庫處理是模型層的業(yè)務處理）：
MVC 模式的三個層面分別負責不同的功能。模型層負責專門的業(yè)務處理，視圖層負責專門的UI繪制，而控制層則負責作為中轉(zhuǎn)控制連接模型層和視圖層。這樣子的開發(fā)方式將一個 web 應用分成三個部分。每個部分的代碼量減少了，出現(xiàn)代碼錯誤排錯起來更方便。而且原先把控制視圖的代碼和控制邏輯的代碼混合在一起，對于 UI 的調(diào)試不方便，也容易出現(xiàn)一些奇怪的錯誤（比如 java 的 servlet 中如果用頁面流的方式輸出 HTML 代碼，不僅影響 servlet 的代碼美觀，HTML 代碼中如果出現(xiàn)一些特殊符號（比如雙引號）導致頁面流提前結束，代碼就會出錯）。
這種將一個代碼中不同功能進行模塊拆分的方法，在軟件工程中叫松耦合。從字面意思理解，就是降低功能和功能之間的耦合度，使一個功能在出錯的時候不至于同時影響另一個功能。
使用 MVC 模式開發(fā)，如果以建房子來當比喻，就相當于請了三個磚瓦匠，一個負責和泥，一個負責刷漆，一個負責砌墻。如果其中一個磚瓦匠生病了不能干活，并不會影響其他磚瓦匠干活。
不過在上面的這個階段，前端和后端其實并沒有完全分開。以 java 為例，MVC 模式只是將控制層放在 servlet，將視圖層放在 JSP 中罷了，他們依然還在一個 web 服務器上，依然都需要學習后端的 java 語言（但相對而言 JSP 需要學習的 Java 語言較少），他們還是需要同時進行開發(fā)。但隨著 Ajax 的出現(xiàn)，JavaScript 可以使用 json 來與服務器進行數(shù)據(jù)交互，真正的前后端分離出現(xiàn)了。
在原本的 MVC 中，JSP 是負責動態(tài)生成 HTML 的。但在長期的編程中發(fā)現(xiàn)，有些頁面在動態(tài)生成的 HTML 中有大部分數(shù)據(jù)是相同的，只有小部分數(shù)據(jù)是需要更新的，這時候的思路就從動態(tài)生成整個 HTML 頁面轉(zhuǎn)變成了使用靜態(tài)頁面再對小部分數(shù)據(jù)動態(tài)刷新。因此 Ajax 誕生了。Ajax 通過與服務器交互，獲取需要動態(tài)生成的數(shù)據(jù)（以 json 或者 XML 進行傳輸），然后再通過 JavaScript 渲染在靜態(tài)頁面上，從而實現(xiàn)頁面的生成。這樣子后端就不再需要分配多余的資源給 JSP 動態(tài)生成頁面了（每一個 JSP 其實都是一個特殊的 servlet，會占用服務器的資源）。于此同時，前后端也徹底分離，后端只需要負責使用 json 與前端進行交互即可，前端也只需要負責找后端獲取數(shù)據(jù)渲染即可。使用 json 進行前后端的聯(lián)系。這樣的方式，是比傳統(tǒng) MVC 更松的耦合。
因為前后端是通過 json 的方式來進行數(shù)據(jù)聯(lián)系，所以前后端的測試也變得更加簡單。以往前后端要一起進行測試，現(xiàn)在使用 json 分離前后端，前端只需要使用靜態(tài)的 json 就能對前端頁面進行測試，而后端只需要測試生成的 json 是否符合要求即可。仍然以蓋房子為例，原來需要三個磚瓦匠負責不同的工作，現(xiàn)在只需要兩個磚瓦匠負責，然后將刷漆的工作交給油漆工，油漆工和磚瓦匠只要確定好最后建成的房子的樣式，就能各干各的。像這樣將前后端進行分離的方式，是軟件工程中提高整體工作效率的方法之一。
另外，之前提到過，前端既然從 JSP 中分離出來而使用 json 進行數(shù)據(jù)交互，也就是說前端的代碼可以放在另外一個服務器上，這樣能大大減輕后端的資源壓力。
文章介紹至此，前后端分離的意義也基本介紹完畢了。使用前后端分離的方式，可以減少代碼耦合，通過前后端的分離部署，可以減少后端的資源壓力，前后端因為使用 json 進行數(shù)據(jù)傳輸而為前后端分離測試提供了極大的方便，另外前端作為一個單獨分化出來的崗位可以投入更多的精力對頁面進行優(yōu)化，這些就是前后端分離的意義。但是并不是所有項目都需要進行前后端分離。比如一些小項目，他沒有那么多的人力去進行前后端的分離，也沒有那么多的服務器去進行分布式的部署，那么這種情況不采用前后端分離會是更好的選擇。
W3C 編程課，提供更好的前后端學習資源。前端開發(fā)后端開發(fā)需要的，都在這里：
