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

讀牛耳就業(yè)符中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖麓◎前端如何高效的與后端協(xié)作開(kāi)發(fā)前端與后端的分離，能使前端的開(kāi)發(fā)脫離后端的開(kāi)發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁(yè)面應(yīng)用等。.前后端分離前端與后端的分離，能使前端的開(kāi)發(fā)脫離后端的開(kāi)發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁(yè)面應(yīng)用等。.盡量避免后端模板渲染web應(yīng)用的渲染方式分為服務(wù)器端渲染和客戶端渲染當(dāng)下比較推薦的方式是客戶端渲染，數(shù)據(jù)使用全ajax的方式進(jìn)行交互。

I,牛耳就業(yè)招中I,牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮?除非在一些不得不使用服務(wù)器端渲染的情況下（如門(mén)戶、電商等），應(yīng)當(dāng)盡量使用客戶端渲染，因?yàn)榭蛻舳虽秩靖苁骨昂蠖朔蛛x（項(xiàng)目分離、代碼解耦、協(xié)作分離、職責(zé)分離等，也能更好的做本地接口模擬開(kāi)發(fā)，提升開(kāi)發(fā)效率。即使用服務(wù)器端渲染，在技術(shù)支持的條件下，可以使用node中間層（由前端人員開(kāi)發(fā)），代替?zhèn)鹘y(tǒng)的后端模板渲染這樣可以使后端與前端完全解耦后端與前端只有數(shù)據(jù)上的往來(lái)。.盡量避免大量的線上調(diào)試做好本地接口模擬開(kāi)發(fā)（包括后端模板渲染），避免大量的線上調(diào)試，因?yàn)榫€上調(diào)試很不方便，也很費(fèi)事，并且每次更新代碼，都需要重新構(gòu)建，然后同步到服務(wù)器。所以做好本地接口模擬開(kāi)發(fā)，只要程序在本地運(yùn)行是沒(méi)問(wèn)題的，一般線上就不會(huì)有太大的問(wèn)題，這樣就能大幅降低調(diào)試工作量，提升開(kāi)發(fā)效率。.本地接口模擬開(kāi)發(fā)本地接口模擬就是在本地模擬一個(gè)與服務(wù)器差不多的環(huán)境，能夠提供數(shù)據(jù)所需的接口，進(jìn)行錯(cuò)誤模擬處理等等。本地接口模擬開(kāi)發(fā)的意義就在于能夠在本地完成幾乎所有的開(kāi)發(fā)與調(diào)試盡量減少線上的調(diào)試，提高開(kāi)發(fā)效率。一些常用庫(kù):I,牛耳就業(yè)招中I,牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮?口browser-sync(https:〃/BrowserSync/browser-sync):能讓瀏覽器實(shí)時(shí)、快速響應(yīng)文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁(yè)面，并且可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)行調(diào)試。口webpack-dev-middleware(/webpack/webpack-dev-middleware):Adevelopmentmiddlewareforwebpack?？趙ebpack-hot-middleware□(/webpack-contrib/webpack-hot-middleware):熱更新本地開(kāi)發(fā)瀏覽器服務(wù)。另外，本地接口模擬開(kāi)發(fā)需要后端開(kāi)發(fā)人員有規(guī)范的接口文檔。5.規(guī)范的接口文檔前端與后端協(xié)作提升開(kāi)發(fā)效率的一個(gè)很重要的方法就是減少溝通能夠形成紙質(zhì)的文檔就不要口頭溝通、能夠把接口文檔寫(xiě)清楚也不要口頭溝遹參數(shù)、數(shù)據(jù)結(jié)構(gòu)、字段含義等），特別是線上協(xié)作的時(shí)候，面對(duì)面交流是很困難的。一個(gè)良好的接口文檔應(yīng)當(dāng)有以下的幾點(diǎn)要求與信息：.格式簡(jiǎn)潔清晰：推薦用APIBlueprint（https:〃/）.分組：當(dāng)接口很多的時(shí)候，分組就很必要了.接口名、接口描述、接口地址.http方法、參數(shù)、headers、是否序列化.http狀態(tài)碼、響應(yīng)數(shù)據(jù)

I,牛耳就業(yè)招中I,牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮?接口文檔可以用一些文檔服務(wù)(如leanote(https:〃/leanote/leanote)^管理文檔，也可以用git來(lái)管理;書(shū)寫(xiě)方式可以用markdown，也可以YAML、JSON等。推薦使用markdown方式寫(xiě)文檔，用git管理文檔。可以參考:?本地化接口模擬?本地化接口模擬、前后端并行開(kāi)發(fā)(https://segmentfault.Com/a/1190000015297352)?APIBlueprint(/)6.去緩存前端需要做好去客戶端緩存的功能，保證用戶始終都是使用的最新資源，不會(huì)因?yàn)橐驗(yàn)榫彺娴膯?wèn)題而出現(xiàn)bug。傳統(tǒng)的去緩存是在靜態(tài)資源url上加上版本號(hào)或者時(shí)間戳，不過(guò)因?yàn)闃?gòu)建工具的出現(xiàn)以及一些瀏覽器已經(jīng)不支持這種方式了的緣故，這種方式已經(jīng)是過(guò)去時(shí)了?，F(xiàn)在去緩存是將文件hash化命名，只要文件變動(dòng)，文件名就會(huì)不一樣，以此才能徹底的去緩存。如果使用webpack進(jìn)行打包，會(huì)自動(dòng)將所有文件進(jìn)行hash化命名。7.前端與后端都需要各自做好錯(cuò)誤處理，以便發(fā)生錯(cuò)誤能夠有友好的提示，也能在用戶反饋時(shí)快速準(zhǔn)確定位錯(cuò)誤來(lái)源和原因。一般前端的錯(cuò)誤分為：

讀牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮讀牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮◎?腳本運(yùn)行錯(cuò)誤：js腳本錯(cuò)誤，找到堆棧信息，然后解決接口錯(cuò)誤：服務(wù)器報(bào)錯(cuò)、數(shù)據(jù)返回不對(duì)、沒(méi)有響應(yīng)數(shù)據(jù)、超時(shí)等而接口錯(cuò)誤分為：狀態(tài)碼錯(cuò)誤(狀態(tài)碼非2XX)：服務(wù)器報(bào)錯(cuò)、超時(shí)等數(shù)據(jù)錯(cuò)誤：沒(méi)有響應(yīng)數(shù)據(jù)、數(shù)據(jù)格式不對(duì)、數(shù)據(jù)內(nèi)容不對(duì).運(yùn)行時(shí)捕捉j(luò)s腳本錯(cuò)誤當(dāng)用戶在用線上的程序時(shí)，怎么知道有沒(méi)有出bug;如果出bug了，報(bào)的是什么錯(cuò)如果是js報(bào)錯(cuò)，怎么知道是那一行運(yùn)行出了錯(cuò)？所以，在程序運(yùn)行時(shí)捕捉j(luò)s腳本錯(cuò)誤，并上報(bào)到服務(wù)器，是非常有必要的。這里就要用到window.onerror了：window.onerror=(errorMessage,scriptURI,lineNumber,columnNumber,errorObj)=>{constdata={title:document.getElementsByTagName('title')[0].innerText,errorMessage,scriptURI,lineNumber,columnNumber,detailMessage:(errorObj&&errorObj.message)||'',

I,牛耳就業(yè)招中I,牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮?stack:(errorObj&&errorObj.stack)||userAgent:window.navigator.userAgent,locationHref:window.location.href,cookie:window.document.cookie,};post('url',data);//上報(bào)到服務(wù)器18.19.};線上的js腳本都是壓縮過(guò)的，需要用sourcemap文件與source-map(/mozilla/source-map)查看原始的報(bào)錯(cuò)堆棧信息。.移動(dòng)端遠(yuǎn)程調(diào)試、vConsole、TBSStudio因?yàn)橐苿?dòng)端的開(kāi)發(fā)無(wú)法像pc端開(kāi)發(fā)一樣使用Chrome的開(kāi)發(fā)者調(diào)試工具，所以調(diào)試移動(dòng)端需要一些額外的技巧。移動(dòng)端應(yīng)用一般都運(yùn)行在微信瀏覽器中、webview中、手機(jī)瀏覽器中。遠(yuǎn)程調(diào)試(RemoteDebugging)

I,牛耳就業(yè)招中I,牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮?遠(yuǎn)程調(diào)試就是通過(guò)USB連接、端口轉(zhuǎn)發(fā)、搭建代理等方式，將一個(gè)設(shè)備的web頁(yè)面映射到另一個(gè)設(shè)備上，比如將手機(jī)的webview映射到pc上，達(dá)到調(diào)試的目的。移動(dòng)端web應(yīng)用調(diào)試難題從一開(kāi)始就有不過(guò)后來(lái)瀏覽器廠商基本都推出自己的遠(yuǎn)程調(diào)試工具來(lái)解決這個(gè)問(wèn)題，包括OperaMobile、iOSSafari、ChromeforAndroid、UC瀏U覽器等，另外還有一些第三方開(kāi)發(fā)的遠(yuǎn)程調(diào)試工具，比如weinre(http:〃/?pmuellr/weinre/docs/1.x/1.5.0/)等。以Android為例，可以將webview、ChromeforAndroid中的頁(yè)面映射到pc端的ChromeDevTools，然后就可以在pc端調(diào)試移動(dòng)端的頁(yè)面了。vConsole一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板(chrome開(kāi)發(fā)者工具的便利實(shí)現(xiàn))。這個(gè)是內(nèi)嵌的頁(yè)面當(dāng)中的便捷調(diào)試器，基本上能夠滿足一般的需要遠(yuǎn)程調(diào)試的頁(yè)面。github:/Tencent/vConsoledemo:https://wechatfe.github.io/vconsole/demo.htmlLogSystemNetwork歡迎使另vConsol&ovConsole是一個(gè)由微信公眾平臺(tái)前端出隊(duì)研發(fā)的Web前端開(kāi)發(fā)者面板?可用于展示consc也日志，方便開(kāi)調(diào)試。loginfodebugworn,Object(foo:"bar,abj：{baof:t?arr:ArrayfS]foo:"bar"▼obj:Objectbool:true， Obfecttips:"JS對(duì)象可以布費(fèi)展示‘, ;Objectcornmand... OKClear HideTBSStudio因?yàn)槲⑿艦g覽器是定制的瀏覽器，一般的遠(yuǎn)程調(diào)試方式都不可用，需要配合特定的工具汝口微信開(kāi)發(fā)者工具。TBSStudio(https:〃/tbs/guide.html)是另一^個(gè)可以像Chrome一樣調(diào)試遠(yuǎn)程微信瀏覽器頁(yè)面的強(qiáng)大工具。.前端后并行開(kāi)發(fā)

I,牛耳就業(yè)招中I,牛耳就業(yè)招中國(guó)互聯(lián)網(wǎng)前沿技術(shù)人才搖筮?HYPERLI