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