前後端高效協作開發的11條建議

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

可以參考：前後端分離、web與static伺服器分離（https://segmentfault.com/a/1190000015297319）。

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

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

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

可以參考：細說後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）（https://segmentfault.com/a/1190000016704384）。

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

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

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

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

一些常用庫：

• browser-sync(https://github.com/BrowserSync/browser-sync)：能讓瀏覽器實時、快速響應檔案更改（ html、 js、css、 sass、 less 等）並自動重新整理頁面，並且可以同時在PC、平板、手機等裝置下進行除錯。

• webpack-dev-middleware(https://github.com/webpack/webpack-dev-middleware)：A development middleware for webpack。

• webpack-hot-middleware(https://github.com/webpack-contrib/webpack-hot-middleware)：熱更新本地開發瀏覽器服務。

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

可以參考：本地化介面模擬、前後端並行開發（https://segmentfault.com/a/1190000015297352）。

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

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

1. 格式簡潔清晰：推薦用 API Blueprint(https://apiblueprint.org/)

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

3. 介面名、介面描述、介面地址

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

5. http 狀態碼、響應資料

介面文件可以用一些文件服務（如 leanote(https://github.com/leanote/leanote)）來管理文件，也可以用 git 來管理；書寫方式可以用 markdown，也可以 YAML、 JSON 等。

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

可以參考：

• 本地化介面模擬、前後端並行開發(https://segmentfault.com/a/1190000015297352)

• API Blueprint(https://apiblueprint.org/)

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

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

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

可以參考：webpack output-filename（https://webpack.js.org/configuration/output/#output-filename）。

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

一般前端的錯誤分為：

• 指令碼執行錯誤： js 指令碼錯誤，找到堆疊資訊，然後解決

• 介面錯誤：伺服器報錯、資料返回不對、沒有響應資料、超時等

而介面錯誤分為：

• 狀態碼錯誤（狀態碼非 2XX）：伺服器報錯、超時等

• 資料錯誤：沒有響應資料、資料格式不對、資料內容不對

可以參考：HTTP狀態碼（https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin）。

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

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

這裡就要用到 window.onerror 了：

window.onerror = (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) => {
 const data = {
   title: document.getElementsByTagName('title')[0].innerText,
   errorMessage,
   scriptURI,
   lineNumber,
   columnNumber,
   detailMessage: (errorObj && errorObj.message) || '',
   stack: (errorObj && errorObj.stack) || '',
   userAgent: window.navigator.userAgent,
   locationHref: window.location.href,
   cookie: window.document.cookie,
 };
 post('url', data); // 上報到伺服器
};複製程式碼

線上的 js 指令碼都是壓縮過的，需要用 sourcemap 檔案與 source-map（https://github.com/mozilla/source-map） 檢視原始的報錯堆疊資訊。

可以參考：

• webpack - devtool（https://webpack.js.org/configuration/devtool/）

• source-map（https://github.com/mozilla/source-map）

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

移動端應用一般都執行在微信瀏覽器中、 webview 中、手機瀏覽器中。

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

移動端 web 應用除錯難題從一開始就有，不過後來瀏覽器廠商基本都推出自己的遠端除錯工具來解決這個問題，包括 OperaMobile、 iOSSafari、 ChromeforAndroid、UC 瀏覽器等，另外還有一些第三方開發的遠端除錯工具，比如 weinre（http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/） 等。

以 Android 為例，可以將 webview、 ChromeforAndroid 中的頁面對映到 pc 端的ChromeDevTools，然後就可以在 pc 端除錯移動端的頁面了。

可以參考：移動端Web開發除錯之Chrome遠端除錯(Remote Debugging)（https://blog.csdn.net/freshlover/article/details/42528643/）。

一個輕量、可擴充、針對手機網頁的前端開發者除錯皮膚（ chrome 開發者工具的便利實現）。

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

• github：https://github.com/Tencent/vConsole

• demo：https://wechatfe.github.io/vconsole/demo.html

TBS Studio

因為微信瀏覽器是定製的瀏覽器，一般的遠端除錯方式都不可用，需要配合特定的工具，如微信開發者工具。

TBS Studio(https://x5.tencent.com/tbs/guide.html) 是另一個可以像 Chrome 一樣除錯遠端微信瀏覽器頁面的強大工具。

可以參考：

tbs studio - 騰訊瀏覽服務-除錯工具（https://x5.tencent.com/tbs/guide/debug/season1.html）

TBS Studio（https://x5.tencent.com/tbs/guide.html）

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

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

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

可以參考：本地化介面模擬、前後端並行開發（https://segmentfault.com/a/1190000015297352）。

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