前端如何高效的與後端協作開發

前端與後端的分離，能使前端的開發脫離後端的開發模式，擁有更大的自由度，以此便可做前端工程化、元件化、單頁面應用等。

可以參考：前後端分離、web與static伺服器分離

web 應用的渲染方式分為伺服器端渲染和客戶端渲染，當下比較推薦的方式是客戶端渲染，資料使用全 ajax 的方式進行互動。

除非在一些不得不使用伺服器端渲染的情況下（如門戶、電商等），應當盡量使用客戶端渲染，因為客戶端渲染更能使前後端分離（專案分離、**解耦、協作分離、職責分離等），也能更好的做本地介面模擬開發，提公升開發效率。

即使用伺服器端渲染，在技術支援的條件下，可以使用 node 中間層（由前端人員開發），代替傳統的後端模板渲染，這樣可以使後端與前端完全解耦，後端與前端只有資料上的往來。

可以參考：細說後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）

做好本地介面模擬開發（包括後端模板渲染），避免大量的線上除錯，因為線上除錯很不方便，也很費事，並且每次更新**，都需要重新構建，然後同步到伺服器。

所以做好本地介面模擬開發，只要程式在本地執行是沒問題的，一般線上就不會有太大的問題，這樣就能大幅降低除錯工作量，提公升開發效率。

本地介面模擬就是在本地模擬乙個與伺服器差不多的環境，能夠提供資料所需的介面，進行錯誤模擬處理等等。

本地介面模擬開發的意義就在於能夠在本地完成幾乎所有的開發與除錯，儘量減少線上的除錯，提高開發效率。

一些常用庫：

另外，本地介面模擬開發需要後端開發人員有規範的介面文件。

可以參考：本地化介面模擬、前後端並行開發

前端與後端協作提公升開發效率的乙個很重要的方法就是減少溝通：能夠形成紙質的文件就不要口頭溝通、能夠把介面文件寫清楚也不要口頭溝通（引數、資料結構、字段含義等），特別是線上協作的時候，面對面交流是很困難的。

乙個良好的介面文件應當有以下的幾點要求與資訊：

格式簡潔清晰：推薦用 api blueprint

分組：當介面很多的時候，分組就很必要了

介面名、介面描述、介面位址

http 方法、引數、headers、是否序列化

http 狀態碼、響應資料

介面文件可以用一些文件服務（如 leanote）來管理文件，也可以用git來管理；書寫方式可以用markdown，也可以yaml、json等。

推薦使用markdown方式寫文件，用git管理文件。

可以參考：

前端需要做好去客戶端快取的功能，保證使用者始終都是使用的最新資源，不會因為因為快取的問題而出現 bug。

傳統的去快取是在靜態資源 url 上加上版本號或者時間戳，不過因為構建工具的出現以及一些瀏覽器已經不支援這種方式了的緣故，這種方式已經是過去時了。

現在去快取是將檔案 hash 化命名，只要檔案變動，檔名就會不一樣，以此才能徹底的去快取。如果使用 webpack 進行打包，會自動將所有檔案進行 hash 化命名。

可以參考：webpack output-filename

前端與後端都需要各自做好錯誤處理，以便發生錯誤能夠有友好的提示，也能在使用者反饋時快速準確定位錯誤**和原因。

一般前端的錯誤分為：

而介面錯誤分為：

可以參考：http狀態碼

當使用者在用線上的程式時，怎麼知道有沒有出 bug；如果出 bug 了，報的是什麼錯；如果是 js 報錯，怎麼知道是那一行執行出了錯？

所以，在程式執行時捕捉js指令碼錯誤，並上報到伺服器，是非常有必要的。

這裡就要用到window.onerror了：

window.onerror = (errormessage, scripturi, linenumber, columnnumber, errorobj) => ;
post('url', data); // 上報到伺服器
};

線上的js指令碼都是壓縮過的，需要用sourcemap檔案與 source-map 檢視原始的報錯堆疊資訊。

可以參考：

因為移動端的開發無法像 pc 端開發一樣使用 chrome 的開發者除錯工具，所以除錯移動端需要一些額外的技巧。

遠端除錯就是通過 usb 連線、埠**、搭建**等方式，將乙個裝置的web頁面對映到另乙個裝置上，比如將手機的webview對映到 pc 上，達到除錯的目的。

移動端web應用除錯難題從一開始就有，不過後來瀏覽器廠商基本都推出自己的遠端除錯工具來解決這個問題，包括opera mobile、ios safari、chrome for android、uc 瀏覽器等，另外還有一些第三方開發的遠端除錯工具，比如 weinre 等。

以 android 為例，可以將webview、chrome for android中的頁面對映到 pc 端的chrome devtools，然後就可以在 pc 端除錯移動端的頁面了。

可以參考：移動端web開發除錯之chrome遠端除錯(remote debugging)

乙個輕量、可拓展、針對手機網頁的前端開發者除錯面板（chrome開發者工具的便利實現）。

這個是內嵌的頁面當中的便捷偵錯程式，基本上能夠滿足一般的需要遠端除錯的頁面。

可以參考：

tbs studio

正常情況下，前端的開發在完成 ui 或者元件開發之後，就需要等後端給出介面文件才能繼續進行，如果能做到前後端並行開發，也能提公升開發效率。

前後端並行開發，就是說前端的開發不需要等後端給出介面文件就可以進行開發，等後端給出介面之後，再對接好後就基本上可以上線了。

在本地化介面模擬的實現下，就可以做到前後端並行開發，只是在**層面需要對ajax進行封裝。

可以參考：本地化介面模擬、前後端並行開發

不管工具多麼厲害，很多時候都免不了要當面溝通，友好、心平氣和的溝通也是很重要的哩！

更多部落格，檢視

前端如何高效的與後端協作開發

前端如何高效的與後端協作開發

前端如何高效的與後端協作開發

前端如何高效的與後端協作開發

相關推薦