前端如何高效的與后端協(xié)作開發(fā)

rozbo 發(fā)布于2019-08-29 17:08 / 3115人閱讀

摘要：移動端應(yīng)用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。

前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離

前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應(yīng)用等。

可以參考：前后端分離、web與static服務(wù)器分離

2. 盡量避免后端模板渲染

web 應(yīng)用的渲染方式分為服務(wù)器端渲染和客戶端渲染，當下比較推薦的方式是客戶端渲染，數(shù)據(jù)使用全 ajax 的方式進行交互。

除非在一些不得不使用服務(wù)器端渲染的情況下（如門戶、電商等），應(yīng)當盡量使用客戶端渲染，因為客戶端渲染更能使前后端分離（項目分離、代碼解耦、協(xié)作分離、職責分離等），也能更好的做本地接口模擬開發(fā)，提升開發(fā)效率。

即使用服務(wù)器端渲染，在技術(shù)支持的條件下，可以使用 node 中間層（由前端人員開發(fā)），代替?zhèn)鹘y(tǒng)的后端模板渲染，這樣可以使后端與前端完全解耦，后端與前端只有數(shù)據(jù)上的往來。

可以參考：細說后端模板渲染、客戶端渲染、node 中間層、服務(wù)器端渲染（ssr）

3. 盡量避免大量的線上調(diào)試

做好本地接口模擬開發(fā)（包括后端模板渲染），避免大量的線上調(diào)試，因為線上調(diào)試很不方便，也很費事，并且每次更新代碼，都需要重新構(gòu)建，然后同步到服務(wù)器。

所以做好本地接口模擬開發(fā)，只要程序在本地運行是沒問題的，一般線上就不會有太大的問題，這樣就能大幅降低調(diào)試工作量，提升開發(fā)效率。

4. 本地接口模擬開發(fā)

本地接口模擬就是在本地模擬一個與服務(wù)器差不多的環(huán)境，能夠提供數(shù)據(jù)所需的接口，進行錯誤模擬處理等等。

本地接口模擬開發(fā)的意義就在于能夠在本地完成幾乎所有的開發(fā)與調(diào)試，盡量減少線上的調(diào)試，提高開發(fā)效率。

一些常用庫：

browser-sync: 能讓瀏覽器實時、快速響應(yīng)文件更改（html、js、css、sass、less 等）并自動刷新頁面，并且可以同時在PC、平板、手機等設(shè)備下進行調(diào)試。

webpack-dev-middleware: A development middleware for webpack

webpack-hot-middleware: 熱更新本地開發(fā)瀏覽器服務(wù)

另外，本地接口模擬開發(fā)需要后端開發(fā)人員有規(guī)范的接口文檔。

可以參考：本地化接口模擬、前后端并行開發(fā)

5. 規(guī)范的接口文檔

前端與后端協(xié)作提升開發(fā)效率的一個很重要的方法就是減少溝通：能夠形成紙質(zhì)的文檔就不要口頭溝通、能夠把接口文檔寫清楚也不要口頭溝通（參數(shù)、數(shù)據(jù)結(jié)構(gòu)、字段含義等），特別是線上協(xié)作的時候，面對面交流是很困難的。

一個良好的接口文檔應(yīng)當有以下的幾點要求與信息：

格式簡潔清晰：推薦用 API Blueprint

分組：當接口很多的時候，分組就很必要了

接口名、接口描述、接口地址

http 方法、參數(shù)、headers、是否序列化

http 狀態(tài)碼、響應(yīng)數(shù)據(jù)

接口文檔可以用一些文檔服務(wù)（如 leanote）來管理文檔，也可以用 git 來管理；書寫方式可以用 markdown，也可以 YAML、JSON 等。

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

可以參考：

本地化接口模擬、前后端并行開發(fā)

API Blueprint

6. 去緩存

前端需要做好去客戶端緩存的功能，保證用戶始終都是使用的最新資源，不會因為因為緩存的問題而出現(xiàn) bug。

傳統(tǒng)的去緩存是在靜態(tài)資源 url 上加上版本號或者時間戳，不過因為構(gòu)建工具的出現(xiàn)以及一些瀏覽器已經(jīng)不支持這種方式了的緣故，這種方式已經(jīng)是過去時了。

現(xiàn)在去緩存是將文件 hash 化命名，只要文件變動，文件名就會不一樣，以此才能徹底的去緩存。如果使用 webpack 進行打包，會自動將所有文件進行 hash 化命名。

可以參考：webpack output-filename

7. 做好錯誤處理

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

一般前端的錯誤分為：

腳本運行錯誤：js 腳本錯誤，找到堆棧信息，然后解決

接口錯誤：服務(wù)器報錯、數(shù)據(jù)返回不對、沒有響應(yīng)數(shù)據(jù)、超時等

而接口錯誤分為：

狀態(tài)碼錯誤（狀態(tài)碼非 2XX）：服務(wù)器報錯、超時等

數(shù)據(jù)錯誤：沒有響應(yīng)數(shù)據(jù)、數(shù)據(jù)格式不對、數(shù)據(jù)內(nèi)容不對

可以參考：HTTP狀態(tài)碼

8. 運行時捕捉 js 腳本錯誤

當用戶在用線上的程序時，怎么知道有沒有出 bug；如果出 bug 了，報的是什么錯；如果是 js 報錯，怎么知道是那一行運行出了錯？

所以，在程序運行時捕捉 js 腳本錯誤，并上報到服務(wù)器，是非常有必要的。

這里就要用到 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); // 上報到服務(wù)器
};

線上的 js 腳本都是壓縮過的，需要用 sourcemap 文件與 source-map 查看原始的報錯堆棧信息。

可以參考：

webpack - devtool

source-map

9. 移動端遠程調(diào)試、vConsole、TBS Studio

因為移動端的開發(fā)無法像 pc 端開發(fā)一樣使用 Chrome 的開發(fā)者調(diào)試工具，所以調(diào)試移動端需要一些額外的技巧。

移動端應(yīng)用一般都運行在微信瀏覽器中、webview 中、手機瀏覽器中。

遠程調(diào)試（Remote Debugging）

遠程調(diào)試就是通過 USB 連接、端口轉(zhuǎn)發(fā)、搭建代理等方式，將一個設(shè)備的 web 頁面映射到另一個設(shè)備上，比如將手機的 webview 映射到 pc 上，達到調(diào)試的目的。

移動端 web 應(yīng)用調(diào)試難題從一開始就有，不過后來瀏覽器廠商基本都推出自己的遠程調(diào)試工具來解決這個問題，包括 Opera Mobile、iOS Safari、Chrome for Android、UC 瀏覽器等，另外還有一些第三方開發(fā)的遠程調(diào)試工具，比如 weinre 等。

以 Android 為例，可以將 webview、Chrome for Android 中的頁面映射到 pc 端的 Chrome DevTools，然后就可以在 pc 端調(diào)試移動端的頁面了。

可以參考：移動端Web開發(fā)調(diào)試之Chrome遠程調(diào)試(Remote Debugging)

vConsole

一個輕量、可拓展、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板（chrome 開發(fā)者工具的便利實現(xiàn)）。

這個是內(nèi)嵌的頁面當中的便捷調(diào)試器，基本上能夠滿足一般的需要遠程調(diào)試的頁面。

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

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

TBS Studio

因為微信瀏覽器是定制的瀏覽器，一般的遠程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。

TBS Studio 是另一個可以像 Chrome 一樣調(diào)試遠程微信瀏覽器頁面的強大工具。

可以參考：

tbs studio - 騰訊瀏覽服務(wù)-調(diào)試工具

TBS Studio

10. 前端后并行開發(fā)

正常情況下，前端的開發(fā)在完成 UI 或者組件開發(fā)之后，就需要等后端給出接口文檔才能繼續(xù)進行，如果能做到前后端并行開發(fā)，也能提升開發(fā)效率。

前后端并行開發(fā)，就是說前端的開發(fā)不需要等后端給出接口文檔就可以進行開發(fā)，等后端給出接口之后，再對接好后就基本上可以上線了。

在本地化接口模擬的實現(xiàn)下，就可以做到前后端并行開發(fā)，只是在代碼層面需要對 ajax 進行封裝。

可以參考：本地化接口模擬、前后端并行開發(fā)

11. 友好的溝通

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

后續(xù)

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

云服務(wù)器 GPU云服務(wù)器前端開發(fā)與后端開發(fā) web開發(fā)前端與后端前端開發(fā)與后端哪個難前端與后端

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114121.html

發(fā)表評論

登陸后可評論

0條評論

rozbo

男|高級講師

我要關(guān)注我要私信

TA的文章

ffmpeg圖片縮放

閱讀 2007·2021-11-24 09:39
極光KVM：中秋特別活動,美西洛杉磯cn2 gia vps,21元/月起;香港cn2+bgp直連vp

閱讀 1143·2021-09-10 11:25
LightNode：香港、臺灣、新加坡等亞洲多地機房，按小時計費，月付$7.71起，注冊最高送$20

閱讀 1769·2021-09-08 10:42
LoRa模塊獲取光照值

閱讀 3733·2021-09-06 15:00
JS基礎(chǔ)入門篇（四十三）—ES6（二）

閱讀 2498·2019-08-30 15:54
前端如何高效的與后端協(xié)作開發(fā)

閱讀 3116·2019-08-29 17:08
css 實現(xiàn)豎直居中的 N 種場景及 N 種方法

閱讀 3270·2019-08-29 11:26
彈性盒子模型詳解

閱讀 2840·2019-08-28 18:27

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端如何高效的與后端協(xié)作開發(fā)

相關(guān)文章