前后端協(xié)作的三板斧，

• 第一斧：前后端協(xié)作之分離
• 第二斧：前后端協(xié)作之約定
• 第三斧：前后端協(xié)作之集成

前言

隨著Web開發(fā)技術的更新?lián)Q代，特別是Web2.0、NodeJS等平臺或者概念的活躍，使得web開發(fā)越來越多樣化，越來越靈活。最典型的一個特性就是，針對不同的業(yè)務場景，針對不同的需求、平臺等內容，我們使用的技術棧會有所側重，不再是以前的那種一桿槍打天下了。

從大的層面上來說，web開發(fā)可以分為面向瀏覽器的前端，以及面向服務端的后端。我個人一般習慣的將前端稱之為瀏覽器端，主要是為了規(guī)避一些信息同步上的問題，因為對一些長期從事C、C++之類語言的底層開發(fā)的人員來說，除了底層，其他的都是前端。

web開發(fā)這個技術方向發(fā)展了這么久，依然擺脫不了下面這種原型，

簡單來說，就是

1. client端向server端發(fā)送request
2. server處理來自client的請求，并返回response

原型非常簡單，但是這僅僅是最基本的原理，其中有非常多的門道，實非一篇文章所能言盡。

耦合與分離

我剛畢業(yè)那會兒，大概6，7年之前吧，因為各種各樣的原因，Java語言開始變得非常流行，當時在學校里基本上可以隨處可見各種培訓機構，廣告吹得一個比一個厲害。那時候用Java來做web開發(fā)，基本上都是J2EE，一個人寫servlet，同時也寫jsp，最后往tomcat上一丟就完事了。

這種模型是典型的耦合式開發(fā)。所謂的耦合式開發(fā)有兩個典型特點，一是同一種角色從前到后基本都寫；二是基本上都是服務端模板、服務端渲染。

這種模式有如下幾個非常明顯的缺陷，

1. 同一個角色干了多個事情，要經常切換思維場景，同是對開發(fā)者也提出了更高的要求。
2. 不具備良好的拓展性和可維護性。
3. 往往會將一些新思想和新技術拒之門外，難以嘗試。

于是，人們便想出了一個法子，就是讓面向瀏覽器的開發(fā)者和面向服務端的開發(fā)者分開。前后分離思想從此一發(fā)不可收拾，許許多多的前輩們在這條路上貢獻了自己的思考以及解決方案。

我個人認為前后端分離的一個核心思想是：讓合適的人做合適的事，并在此基礎上持續(xù)探索在不同業(yè)務場景下的最優(yōu)開發(fā)模式。

試想一下，假如現(xiàn)在我們要做一個項目，那么這個項目可能會有兩個工程，一個前端工程，一個后端工程。需求確認完畢之后，前端開發(fā)者和后端開發(fā)者在一定的約定基礎上并行開發(fā)，待開發(fā)完畢之后，再通過某一種方式進行集成即可。理想是美好的，但是現(xiàn)實卻不會那么順利，這中間有著許多的坑等著我們去踩。

在《Web開發(fā)模式的探索與思考》這篇文章中，我也有提到過，目前有兩種主流的前后分離思路，一種是完全的前后分離模式，一種是中間層模式。這兩種模式我個人覺得沒有絕對的好與壞，兩者都有各自切合的場景。

不過我看過很多的前后分離開發(fā)的網站，說實話體驗不是很好。我個人感覺可能是網站的開發(fā)者走入了一個誤區(qū)，

• 其一，在不合適SPA的場景下強拼硬湊SPA模式，使得前端過重。
• 其二，前后端之間的數據交換過度依賴ajax。在一些數據模塊及交互復雜的頁面上，使得ajax數據交互成為瓶頸。
• 其三，前端的技術棧是那種完全的前后分離模式，有點一條道走到黑的感覺。網站開發(fā)者們可能并沒有考慮不同業(yè)務場景下對不同開發(fā)模式和技術棧的要求。
• 其四，可能是因為前端過重的原因，導致有一些非常明顯的糟糕的操作體驗，比如加載性能，視覺等待，白屏過長等等。

說實話，在兩三年之前，我也是“完全前后分離”這一模式的鐵桿粉，當時用AngularJS、ReactJS之類的MV*框架，覺得基本上沒有什么事在前端范疇之內是解決不了，后端只要有ajax接口，只要給我前端提供數據就行了。我相信很多前端開發(fā)者現(xiàn)在依然有這種想法，而且可能還會覺得這么想是理所當然。

如果開發(fā)者把自己的眼界放遠一點，不局限在前端這一范疇的話，你會發(fā)現(xiàn)除了前端這薄薄的一層之外，web開發(fā)中還有非常多的內容值得推敲的，只有站在更高的基點上，才能對整個web開發(fā)的生命周期做整體把握。

探討

這里我先拋出一個問題，然后會在最后一篇文章中分析在兩種主流的前后分離模式下如何做，以及它們的優(yōu)劣勢，最后會探討一下應該怎么做。

問題是這樣的，假設我需要做一個網站，這個網站會有類似企業(yè)首頁那種偏資訊類的頁面，然后會有用戶體系。用戶登錄后，會有一個管理中心的中控系統(tǒng)，這個管理中心中會按照功能劃分出好幾個功能模塊。管理中心的頁面會給用戶提供較多的交互操作。然后還有兩個額外需求，一個是各個功能模塊的頁面之間會有數據傳輸；另一個是各個頁面之間的跳轉能夠比較平滑，不要產生難以容忍的白屏。