偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

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

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

[[248719]]

1.前后端分離

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

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

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

除非在一些不得不使用服務(wù)器端渲染的情況下(如門戶、電商等),應(yīng)當(dāng)盡量使用客戶端渲染,因?yàn)榭蛻舳虽秩靖苁骨昂蠖朔蛛x(項(xiàng)目分離、代碼解耦、協(xié)作分離、職責(zé)分離等),也能更好的做本地接口模擬開發(fā),提升開發(fā)效率。

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

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

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

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

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

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

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

一些常用庫:

  • browser-sync(https://github.com/BrowserSync/browser-sync):能讓瀏覽器實(shí)時(shí)、快速響應(yīng)文件更改( html、 js、css、 sass、 less 等)并自動(dòng)刷新頁面,并且可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)行調(diào)試。
  • 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):熱更新本地開發(fā)瀏覽器服務(wù)。

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

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

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

一個(gè)良好的接口文檔應(yīng)當(dāng)有以下的幾點(diǎn)要求與信息:

  1. 格式簡潔清晰:推薦用 API Blueprint(https://apiblueprint.org/)
  2. 分組:當(dāng)接口很多的時(shí)候,分組就很必要了
  3. 接口名、接口描述、接口地址
  4. http 方法、參數(shù)、headers、是否序列化
  5. http 狀態(tài)碼、響應(yīng)數(shù)據(jù)

接口文檔可以用一些文檔服務(wù)(如 leanote(https://github.com/leanote/leanote))來管理文檔,也可以用 git 來管理;書寫方式可以用 markdown,也可以 YAML、 JSON 等。

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

可以參考:

  • 本地化接口模擬、前后端并行開發(fā)(https://segmentfault.com/a/1190000015297352)
  • API Blueprint(https://apiblueprint.org/)

6. 去緩存

前端需要做好去客戶端緩存的功能,保證用戶始終都是使用的***資源,不會(huì)因?yàn)橐驗(yàn)榫彺娴膯栴}而出現(xiàn) bug。

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

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

7. 做好錯(cuò)誤處理

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

一般前端的錯(cuò)誤分為:

  • 腳本運(yùn)行錯(cuò)誤: js 腳本錯(cuò)誤,找到堆棧信息,然后解決
  • 接口錯(cuò)誤:服務(wù)器報(bào)錯(cuò)、數(shù)據(jù)返回不對、沒有響應(yīng)數(shù)據(jù)、超時(shí)等

而接口錯(cuò)誤分為:

  • 狀態(tài)碼錯(cuò)誤(狀態(tài)碼非 2XX):服務(wù)器報(bào)錯(cuò)、超時(shí)等
  • 數(shù)據(jù)錯(cuò)誤:沒有響應(yīng)數(shù)據(jù)、數(shù)據(jù)格式不對、數(shù)據(jù)內(nèi)容不對

8. 運(yùn)行時(shí)捕捉 js 腳本錯(cuò)誤

當(dāng)用戶在用線上的程序時(shí),怎么知道有沒有出 bug;如果出 bug 了,報(bào)的是什么錯(cuò);如果是 js 報(bào)錯(cuò),怎么知道是那一行運(yùn)行出了錯(cuò)?

所以,在程序運(yùn)行時(shí)捕捉 js 腳本錯(cuò)誤,并上報(bào)到服務(wù)器,是非常有必要的。

這里就要用到 window.onerror 了:

 

  1. window.onerror =(errorMessage,scriptURI, lineNumber,columnNumber, errorObj)=>{  
  2.  const data ={ 
  3.  title:document . getElementsByTagName ( 'title' )[ 0 ]. innerText , 
  4.  errorMessage , 
  5.  scriptURI , 
  6.  lineNumber , 
  7.  columnNumber , 
  8.  detailMessage : ( errorObj &&errorObj . message ) || '' ,  
  9.  stack : (errorObj && errorObj . stack )|| '' , 
  10.  userAgent :window . navigator . userAgent , 
  11.  locationHref : window . location . href , 
  12.  cookie: window . document . cookie , 
  13.   
  14.  }; 
  15.   
  16.  post ( 'url' , data ); 
  17.  // 上報(bào)到服務(wù)器 
  18.   
  19.  }; 

線上的 js 腳本都是壓縮過的,需要用 sourcemap 文件與 source-map(https://github.com/mozilla/source-map) 查看原始的報(bào)錯(cuò)堆棧信息。

9. 移動(dòng)端遠(yuǎn)程調(diào)試、vConsole、TBS Studio

因?yàn)橐苿?dòng)端的開發(fā)無法像 pc 端開發(fā)一樣使用 Chrome 的開發(fā)者調(diào)試工具,所以調(diào)試移動(dòng)端需要一些額外的技巧。

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

遠(yuǎn)程調(diào)試(Remote Debugging)

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

移動(dòng)端 web 應(yīng)用調(diào)試難題從一開始就有,不過后來瀏覽器廠商基本都推出自己的遠(yuǎn)程調(diào)試工具來解決這個(gè)問題,包括 OperaMobile、 iOSSafari、 ChromeforAndroid、UC 瀏覽器等,另外還有一些第三方開發(fā)的遠(yuǎn)程調(diào)試工具,比如 weinre(http://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/) 等。

以 Android 為例,可以將 webview、 ChromeforAndroid 中的頁面映射到 pc 端的 ChromeDevTools,然后就可以在 pc 端調(diào)試移動(dòng)端的頁面了。

vConsole

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

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

  • github:https://github.com/Tencent/vConsole
  • demo:https://wechatfe.github.io/vconsole/demo.html

 

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

 

TBS Studio

因?yàn)槲⑿艦g覽器是定制的瀏覽器,一般的遠(yuǎn)程調(diào)試方式都不可用,需要配合特定的工具,如微信開發(fā)者工具。

TBS Studio(https://x5.tencent.com/tbs/guide.html) 是另一個(gè)可以像 Chrome 一樣調(diào)試遠(yuǎn)程微信瀏覽器頁面的強(qiáng)大工具。

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

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

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

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

11. 友好的溝通

不管工具多么厲害,很多時(shí)候都免不了要當(dāng)面溝通,友好、心平氣和的溝通也是很重要的哩!

責(zé)任編輯:龐桂玉 來源: 今日頭條
相關(guān)推薦

2021-05-06 15:08:40

開發(fā)前端后端

2014-05-14 10:16:29

SDNNFV虛擬化

2023-04-10 15:14:03

2022-01-21 19:00:44

前端JS框架

2020-11-26 08:38:57

前端 js 庫vue

2021-01-04 14:41:28

開發(fā)前端工具

2014-11-28 14:41:06

工具

2025-05-20 09:03:58

Go后端Preact

2019-10-10 11:20:49

Java人生第一份工作程序員

2018-06-20 15:10:44

前端Web開發(fā)薪資

2020-11-18 22:18:41

前端開發(fā)

2019-11-14 09:00:00

前端測試工具框架

2013-08-29 09:37:18

GitHub開源項(xiàng)目

2010-12-23 09:40:52

Web開發(fā)

2018-05-31 21:16:33

DevOps協(xié)作工具開發(fā)

2020-02-17 15:55:22

Office 365

2015-09-23 14:07:12

前端與后端架構(gòu)實(shí)例

2014-02-17 17:47:16

前端后端架構(gòu)

2025-06-24 08:04:45

2015-09-17 11:04:46

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號