今天這篇文章來分(fēn)析一(yī)下(xià)什麽是前後端分(fēn)離(lí)的相關知(zhī)識，很多小(xiǎo)夥伴不清楚到底什麽是前端，什麽是後端，什麽是前後端分(fēn)離(lí)。在說前後端分(fēn)離(lí)之前，我(wǒ)(wǒ)們先要弄清楚這幾個概念，大(dà)家可能經常聽(tīng)到前端，後端或者是大(dà)前端的一(yī)些概念，這些概念是怎麽産生(shēng)的呢？什麽是前端，什麽是後端，什麽是前後端不分(fēn)離(lí)？隻有了解了這些，那麽前後端分(fēn)離(lí)你就懂了。

首先我(wǒ)(wǒ)講一(yī)下(xià)什麽是前端，在講前端之前我(wǒ)(wǒ)先問大(dà)家一(yī)個問題，我(wǒ)(wǒ)們經常提到的JavaScript是前端嗎(ma)？用JS寫的程序是前端嗎(ma)？還是說隻有前端工(gōng)程師寫的程序才叫前端？我(wǒ)(wǒ)常提到HTML，CSS這是前端嗎(ma)？或者是我(wǒ)(wǒ)們常用的一(yī)些APP，或者是一(yī)些小(xiǎo)程序，這些是前端嗎(ma)？那麽大(dà)前端又(yòu)是什麽呢？這些問題抛出來以後，剛開(kāi)始學習編程的同學估計都有想放(fàng)棄學習編程的這種想法了。

沒有關系，也沒有你想的那麽複雜(zá)。在通常的情況下(xià)，我(wǒ)(wǒ)們說的這個前端都是指浏覽器這一(yī)端，而浏覽器這一(yī)端通常是用JS來實現的，所以用JS寫大(dà)部分(fēn)的程序都是前端，包括APP，包括小(xiǎo)程序和H5等。而當nodeJS出現以後，用nodeJS寫的後台部分(fēn)，也會被人歸爲前端，爲了區分(fēn)之前的前端，給他起了一(yī)個名字叫做大(dà)前端。但是呢我(wǒ)(wǒ)們想一(yī)下(xià)，用這種語言來區分(fēn)前後端他真的合适嗎(ma)？我(wǒ)(wǒ)其實是持有保留态度的。

對于前後端的定義，我(wǒ)(wǒ)認爲他不應該是以語言來定義，而是應該以他的運行環境去(qù)定義，如果實在服務端器的話(huà)，應該被稱爲後端，因爲什麽呢？因爲你既看不到也摸不着。而運行在客戶端，就應該被稱爲前端，因爲你能夠看得到。

我(wǒ)(wǒ)們再看一(yī)下(xià)什麽是前後端不分(fēn)離(lí)，在移動互聯出現之前，有一(yī)種流行的說法叫做B/S和C/S架構，C/S架構指的就是Client Server，意思就是說在桌面程序上有一(yī)個客戶端，然後連接遠程的這個服務器端，用socket或者是http來傳輸數據。而B/S架構是什麽呢，就是指的是用通過浏覽器進行訪問，不需要裝一(yī)個客戶端，B/S架構曾經一(yī)度被認爲是C/S的替代者，好處是什麽呢？就是它不需要安裝，簡單方便。所以那個時候的寫法就是後端是控制一(yī)切的，所以在早期的Web開(kāi)發過程中(zhōng)，我(wǒ)(wǒ)們大(dà)家都聽(tīng)說過什麽PHP程序員(yuán)啊，Java程序員(yuán)啊或者是asp.net程序員(yuán)，大(dà)家要幹的活就是“全棧”，也就是說前後端通吃。那麽當時的技術是怎樣的呢？看一(yī)下(xià)這張圖：

通常開(kāi)發一(yī)個web的這種應用程序，多是以asp.net，php或者jsp這樣的語言來編寫，項目通常是由多個這種文件構成的，每個文件當中(zhōng)同時包含了HTML，CSS,JS這樣混編的，系統整體(tǐ)負責處理業務邏輯，控制業面跳轉和向用戶展示業面等。

而這個浏覽器是什麽呢？浏覽器他是一(yī)個翻譯官，他是翻譯程序員(yuán)寫的代碼給用戶看的，翻譯的過程其實有一(yī)個高大(dà)上的詞，很多人把他稱之爲渲染。也就是說我(wǒ)(wǒ)們在平常看到的一(yī)些漂亮的這個網頁就是浏覽器渲染出來的。這個架構的好處是什麽呢？就是簡單便捷。但是這麽做其實有一(yī)個明顯的弊端，如果這個頁面複雜(zá)一(yī)點的話(huà)，那這個單頁的代碼就比較恐怖了，少則上千，多則上萬。

所以說在以前的開(kāi)發過程中(zhōng)，前端設計師一(yī)般隻扮演一(yī)個切圖的工(gōng)作，隻是簡單地将UI設計師設計出來的原型圖把它編程靜态的HTML業面，比如說業面的交互邏輯，比如說後台的數據交互，這些工(gōng)作都是由後台開(kāi)發人員(yuán)來實現的，而且更有可能的是什麽呢，是後端的開(kāi)發人員(yuán)直接兼顧前端的對口工(gōng)作，一(yī)邊實現API的接口一(yī)邊要開(kāi)發網頁，兩個相互切換着做。這導緻了後台程序員(yuán)開(kāi)發的工(gōng)作壓力特别大(dà)，這樣不僅開(kāi)發效率比較緩慢(màn)，而且代碼難以維護。

前後端分(fēn)離(lí)除了解決分(fēn)工(gōng)不均的這個問題之外(wài)，主要是将更多的交互的這個邏輯分(fēn)配給前端來處理，而後端可以專注于本職的工(gōng)作，比如說API接口，或者是進行權限控制，或者是進行運算這些都交給後端。那麽前端就可以獨立完成與用戶交互的這樣一(yī)個過程，在前後端分(fēn)離(lí)的這個應用模式當中(zhōng)，後端僅返回前端所需要的這樣的一(yī)個過程，不需要渲染HTML業面和控制前端的這樣一(yī)個效果。

至于說用戶看到什麽樣的效果呢，從後端請求的數據展現都是後端通過異步接口，不如說通過AJA/JSON這種方式提供的，前端隻管展現，但是呢你不要以爲隻是在敲代碼的這個時候把前端和後端進行分(fēn)開(kāi)就是前後端分(fēn)離(lí)了。它徹底是解放(fàng)了前端，前端不需要在向後台提供模闆，或者是後台無需再前端HTML中(zhōng)嵌入後台的代碼，兩者可以同時開(kāi)工(gōng)，不需要相互依賴，使得這樣的開(kāi)發效率大(dà)大(dà)的提高。