最近研究servlet，看書時候書里講到了c/s架構(gòu)到b/s架構(gòu)的演變，講servlet的書都很老了，現(xiàn)在的b/s架構(gòu)已經(jīng)不是幾年前的b/s架構(gòu)，其實b/s架構(gòu)就是web應(yīng)用開發(fā)，對于這樣的架構(gòu)我們現(xiàn)在應(yīng)該考慮的是前端和后端的分離（注意：這里的后端是指服務(wù)端）。

Web前端現(xiàn)在是一個獨立的技術(shù)工種，這個工種的產(chǎn)生主要是針對互聯(lián)網(wǎng)行業(yè)的需求，我在以前的文章里曾經(jīng)講到過，一個大型互聯(lián)網(wǎng)網(wǎng)站，例如想淘寶網(wǎng)，它絕對不是一個Web項目，而是一群web項目的集合，那么如果不在前端進行整合，這么多web項目前端開發(fā)一定存在大量重復(fù)勞動，并且運維時候也存在難以統(tǒng)一管理的問題。本文假想一個面對需要前端資源整合的組織，如何做到前后端分離的解決思路。本文詳情如下：

(一) 前后端分離的目的和作用

做Web開發(fā)也可以說是B/S架構(gòu)開發(fā)，B端和S端從技術(shù)體系角度而言異構(gòu)性很大，換而言之就是B端使用的技術(shù)和S端使用的技術(shù)不適于同一個體系，這樣的結(jié)果導(dǎo)致實際開發(fā)中，很難做到專業(yè)分工，如果項目開發(fā)過程中管控不到位，這樣的問題可能會影響到整個項目的開發(fā)質(zhì)量，因此前后端分離的目的之一就是要做到專業(yè)化分工，提高項目的質(zhì)量和開發(fā)效率。

隨著技術(shù)的發(fā)展，當(dāng)下的Web開發(fā)形勢已經(jīng)和以前有了很大的不同，早期的Web項目是一個封閉的項目，用戶從瀏覽器里看到的頁面直到后臺數(shù)據(jù)庫都是在一個項目里集成的，而現(xiàn)在Web系統(tǒng)的規(guī)模越來越大，中大型的Web系統(tǒng)是一個開放式的系統(tǒng)，開放型的系統(tǒng)用戶在瀏覽器發(fā)起的請求可能會轉(zhuǎn)發(fā)到外部的系統(tǒng)里進行處理，或者是本地的系統(tǒng)和外部系統(tǒng)一起完成請求的處理，此外有的請求可能不會直接請求數(shù)據(jù)庫，而是請求緩存服務(wù)器，這些變化幾乎都是發(fā)生在Web系統(tǒng)的服務(wù)端，前后端耦合度很高的Web系統(tǒng)服務(wù)端的復(fù)雜度提升必然帶來了Web前端的復(fù)雜度的提升。因此Web前端從系統(tǒng)架構(gòu)的角度也需要更加專業(yè)的管控，管控的作用之一就是前后端進行分離，降低前端對服務(wù)端的依耐性。

富客戶端應(yīng)用的普及導(dǎo)致Web前端技術(shù)開發(fā)更加專業(yè)化，Web前端工程師成為一個獨立的技術(shù)崗位，Web前端開發(fā)技術(shù)的難度也越來越高，前后端的分離就是為Web前端開發(fā)營造一個良好的開發(fā)環(huán)境，不要讓前端工程師被一些不可控的外在因素所影響（例如：前后端的耦合性），最后導(dǎo)致前端不能專心致志做出更加好的作品。所以，前后端分離是讓前后端更加專業(yè)化，在技術(shù)和管理上將前端角色更加明確，更深入的挖掘前端開發(fā)的價值。

(二) 現(xiàn)有系統(tǒng)架構(gòu)給前后端帶來的問題以及解決方法

上圖是目前大部分系統(tǒng)的架構(gòu)圖，雖然有些系統(tǒng)采用分布式架構(gòu)，層與層之間使用了遠程調(diào)用框架，但是本質(zhì)上都逃不開上面這個架構(gòu)設(shè)計。這張圖是一張比較合理的圖，在實際開發(fā)里最常發(fā)生的事情就是控制層（Control）越過服務(wù)層（Service）直接處理下面的資源。

前后端耦合的問題主要發(fā)生在控制層（Control），控制層是前端和服務(wù)端交互的邊界，但是在開發(fā)過程中控制層（Control）和服務(wù)層（Service）常常混淆不清，這就是前后端耦合度高的重要原因。

因此要前后端解耦，就是要劃清控制層的邊界，控制層到底該屬于前端還是服務(wù)端，在MVC模式里控制層作用是調(diào)度，控制層不是寫業(yè)務(wù)邏輯的地方，因此將大量業(yè)務(wù)邏輯寫到控制層其實是違背了MVC模式的思想，同時控制層是前端和服務(wù)端通訊的橋梁，其實控制層是參入了前端的工作任務(wù)，既然控制層要剝離業(yè)務(wù)操作同時控制層也要參入前端應(yīng)用的開發(fā)，那么將控制層歸為前端的一部分是完全合情合理合規(guī)的。

把控制層剝離了業(yè)務(wù)邏輯處理可能會讓人不知道如何開發(fā)了，我覺得有這種想法的人是開發(fā)時候沒有理解透MVC模式思想，編程隨意性大養(yǎng)成了壞習(xí)慣，這個就需要這些人一點點去適應(yīng)技術(shù)新趨勢的發(fā)展。

前后端分離的終極目標(biāo)應(yīng)該是前端和服務(wù)端是完全獨立的項目，前端項目包含上圖里的瀏覽器和控制層，服務(wù)端項目包括服務(wù)層、DAO層等等，前端項目和服務(wù)端項目以高效的遠程調(diào)用框架做通訊介質(zhì)，項目開發(fā)時候前端項目做前端的事情，服務(wù)項目做服務(wù)端的事情，這樣就讓服務(wù)端開發(fā)的人員沒有機會在控制層亂寫代碼了，保證了Web前端環(huán)境的純粹性，最后生產(chǎn)發(fā)布也要獨立部署，這樣就達到了前后端真正解耦，但是前后端的溝通機制也是不可或缺的，我覺得它們之間的溝通使用高性能的遠程調(diào)用框架，前后端相互約定通訊報文格式。.

其實不管服務(wù)端還是前端宏觀流程無非是輸入數(shù)據(jù)à數(shù)據(jù)處理à輸出數(shù)據(jù)，但是服務(wù)端要把心思花在數(shù)據(jù)處理上，前端要更多關(guān)心的是輸入輸出數(shù)據(jù)時候的用戶體驗操作，服務(wù)端開發(fā)最大的問題就是違背MVC原則，代碼編寫的隨意性，而前端不管出于安全還是性能考慮，最好是盡量少牽涉業(yè)務(wù)。前端和后端通訊層的獨立，會將前后端進行真正的解耦，前面我講到前后真正問題就是前端和后端技術(shù)路線不一致，但是傳統(tǒng)Web開發(fā)里前后端又要融為一體，這就導(dǎo)致前后端很難做到專業(yè)化分工，對于前端應(yīng)該盡量弱化通訊級別的開發(fā)工作，前端通訊編程只要知道調(diào)用哪個接口，傳什么參數(shù)，怎么處理響應(yīng)信息就行了。這樣就能讓前端和后端實現(xiàn)真正的專業(yè)化。

做到了這些，就不會發(fā)生開發(fā)時候前后端邊界不清的問題了。

(三) 前后端分離的一些想法

本文主題應(yīng)該是前后端分離，我上面的建議是個徹底方案，要革以前系統(tǒng)的命，對存量系統(tǒng)那該如何處理，答案還是重構(gòu)代碼，想方設(shè)法逐步減少已經(jīng)發(fā)現(xiàn)的前后端耦合度高的問題，這個跟我之前的建議就是小重構(gòu)和大重構(gòu)的區(qū)別，如果有人覺得我上面建議合適，前端組應(yīng)該馬上提供一套這樣的框架出來，這樣后面的新系統(tǒng)就不會在循環(huán)前面的錯誤了。我覺得搭建這樣的框架不會太復(fù)雜的。

我上面的前后端分離的目的就是將前端資源整合為一個整體，理清前后端的邊界，這些做完后，前端組里該如何提升自己的能力了？

這時候要讓前端的東西項目化，工程化，前端技術(shù)不能再當(dāng)做開發(fā)者的玩具，它也是需要大量的系統(tǒng)架構(gòu)，開發(fā)規(guī)范，自動化壓縮混淆，自動化發(fā)布，前端監(jiān)控和分析，前端優(yōu)化等等。

上面這些問題都很重要，也很專業(yè)，如果我有機會能參入這樣的事情，我還有個特別的建議，具體如下：

在一個企業(yè)內(nèi)部，Web前端的組件，不管這個組件是UI層級，還是javascript開發(fā)層級，都脫離不了該企業(yè)業(yè)務(wù)產(chǎn)品的模式，其實看看像網(wǎng)易，新浪這樣的門戶網(wǎng)站的前端應(yīng)用組件，它們用于做門戶很合適，但是用它來做企業(yè)應(yīng)用軟件可能就不是太好使用，因此對于組件要有一個清晰的認識，我覺得可以把組件按業(yè)務(wù)場景分類，這里我可以舉個例子，如果這個企業(yè)有給門戶使用的組件，而這個組件很適合門戶，應(yīng)該把它歸為門戶組件，如果某些組件適合做網(wǎng)站后臺管理的，那么就列為后臺管理組件，如果某些組件能跨多了業(yè)務(wù)場景則標(biāo)記為通用組件。

做分類的原因是為了理清組件的應(yīng)用邊界，這樣我們可以有針對性的積累和完善這些組件，有意識的開發(fā)相關(guān)的組件，最終形成一個針對某個業(yè)務(wù)組件的組件倉庫，這樣等新需求過來，Web前端的項目經(jīng)理或Web前端的技術(shù)經(jīng)理可以通過場景分析該需求需要使用那些現(xiàn)有的技術(shù)，需求里的那些場景是要進行開發(fā)，新場景里有沒有新開發(fā)的代碼能生成新的組件，這就可以做到有計劃有次序的積累。

Web前端的核心人員應(yīng)該花更多精力去設(shè)計、積累、整理各種組件，通過實際業(yè)務(wù)需求去完善和豐富這些組件，最終達到組件可以覆蓋到全公司絕大多數(shù)場景，最終通過組件積累形成完善的Web前端開發(fā)規(guī)范，這樣的規(guī)范覆蓋面廣更加易于操作，對于企業(yè)而言Web前端開發(fā)流程就可以做到標(biāo)準化，從而達到簡單培訓(xùn)一些技術(shù)能力不高的開發(fā)人員就能完成相關(guān)的開發(fā)任務(wù)，同時也讓W(xué)eb前端核心人員也能很好的把控項目的質(zhì)量和進度。

以上就是我的一些前后端分離的想法，它是一個很宏觀的想法，沒有太多技術(shù)實現(xiàn)細節(jié)，如果這個想法如果針對存量系統(tǒng)，的確是一個顛覆性的方案，如果Web前端允許一切重頭來做，我個人覺得這還是很好的一個思路。前后端分離是Web前端專業(yè)化的×××長征第一步，如果這一步做好，前端就有一套專屬自己的優(yōu)質(zhì)環(huán)境，那時候Web前端就會有更大的余力做更優(yōu)秀的工作，這就是我的愿景。

當(dāng)然我的構(gòu)想也許并不太正確，如果有大牛看了本人文章還請多多指教。

原文鏈接：http://www.cnblogs.com/sharpxiajun/p/3531665.html

轉(zhuǎn)載于:https://blog.51cto.com/lucifer119/1363004

總結(jié)

以上是生活随笔為你收集整理的系统架构：Web应用架构的新趋势 前后端分离的想法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。