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