如何高效开发前后端协同1.前后端分离前后端分离可以使得前端的开发脱离了后端的开发模式，具有更大的自由度。这样就可以做到前端工程化、组件化、单页应用。可以参考：前后端分离，Web和静态服务器分离2.尽量避免后端模板渲染Web应用的渲染方式分为服务端渲染和客户端渲染。目前推荐的方式是客户端渲染，数据使用全ajax方式进行交互。除非在某些不得不使用服务端渲染的情况下（比如门户、电商等），尽量使用客户端渲染，因为客户端渲染可以更好的实现前后台分离端（项目分离、代码解耦、协作分离、责任分离等），也可以更好的做本地界面模拟开发，提高开发效率。即使使用服务端渲染，在技术支持的情况下，也可以使用node中间层（前端人员开发）代替传统的后台模板渲染，让后台和前端可以完全解耦，后台和前台只有联系人的数据。可以参考：详解后端模板渲染、客户端渲染、节点中间层、服务端渲染（ssr）3、尽量避免大量在线调试，做好本地界面模拟开发（包括后端模板渲染）在线调试，因为在线调试非常不方便和耗时，每次更新代码都需要重新构建然后同步到服务器。因此，做好本地界面模拟开发。只要程序在本地运行，在线上不会有大问题。这将大大减少调试工作量，提高开发效率。4、本地接口模拟开发本地接口模拟是在本地模拟一个类似服务器的环境，可以提供数据需要的接口，进行错误模拟处理等。本地接口模拟开发的意义在于几乎所有的开发调试都可以在本地完成，最大限度减少在线调试，提高开发效率。一些常用的库：browser-sync：允许浏览器实时响应文件变化（html、js、css、sass、less等）快速自动刷新页面，可在PC、平板上调试、手机等设备同时使用。webpack-dev-middleware：webpack的开发中间件webpack-hot-middleware：热更新本地开发浏览器服务另外，本地接口模拟开发需要后端开发者有规范的接口文档。可以参考：本地化接口模拟，前后端并行开发文档写清楚了就不要口头交流（参数、数据结构、字段含义等），尤其是在线协作时，面对面交流是很困难的。一份好的接口文档应该具备以下要求和信息：格式简洁明了：推荐使用API??Blueprint分组：当接口较多时，需要分组接口名称、接口描述、接口地址http方法、参数、headers、是否序列化http状态码、响应数据接口文件可以使用一些文件服务（如leanote）来管理文件，或者使用git来管理文件；编写方式可以使用markdown，也可以使用YAML、JSON等，推荐使用markdown编写文档，使用git管理文档。可以参考：本地化接口模拟，前后端并行开发APIBlueprint6。前端去缓存需要做好去客户端缓存，保证用户始终使用的是最新的资源，不会因为缓存问题出现bug。传统的de-cache方式是在静态资源url中加上一个版本号或者时间戳，但是由于构建工具的出现以及部分浏览器不再支持这种方式，这种方式已经成为过去式。现在de-caching就是对文件名进行hash。只要文件发生变化，文件名就会不同，这样就可以完全去缓存缓存。如果使用webpack打包，所有文件都会自动哈希命名。可以参考：webpackoutput-filename7。做好错误处理。前端和后端都需要做好错误处理，这样在出现错误的时候会有友好的提示，在用户反馈的时候能够快速准确的定位到错误的来源和原因。一般前端错误分为：脚本运行错误：js脚本错误，找到堆栈信息，然后解决接口错误：服务器错误，返回数据不正确，无响应数据，超时等接口错误分为：状态码错误（状态码不是2XX）：服务器错误、超时等数据错误：无响应数据、数据格式不正确、数据内容不正确可参考：HTTP状态码8、运行时捕获js脚本错误当用户使用时在线程序，他们怎么知道有没有？有一个错误；如果有错误，报告的错误是什么；如果是js报错，怎么知道是哪一行出错呢？因此，在程序运行时捕获js脚本错误并报告给服务器是非常有必要的。window.onerror将在这里使用：window.onerror=(errorMessage,scriptURI,lineNumber,columnNumber,errorObj)=>{constdata={title:document.getElementsByTagName('title')[0].innerText,errorMessage,scriptURI,lineNumber、columnNumber、detailMessage:(errorObj&&errorObj.message)||'',堆栈:(errorObj&&errorObj.stack)||'',userAgent:window.navigator.userAgent,locationHref:window.location.href,cookie:window.document.cookie,};发布（“网址”，数据）；//向服务器报告};网上的js脚本都是压缩过的，需要用sourcemap文件和source-map查看原始错误堆栈信息。可以参考：webpack-devtoolsource-map9。移动端远程调试、vConsole、TBSStudio因为移动端的开发不能像PC端的开发一样使用Chrome的开发者调试工具，所以需要一些额外的技巧来调试移动端。移动应用一般运行在微信浏览器、webviews、手机浏览器中。远程调试（RemoteDebugging）远程调试是通过USB连接、端口转发、代理构建等方式，将一台设备的网页映射到另一台设备上。比如将手机的webview映射到PC上，达到调试的目的。移动端调试web应用的问题从一开始就存在，但后来浏览器厂商基本上都推出了自己的远程调试工具来解决这个问题，包括OperaMobile、iOSSafari、ChromeforAndroid、UC浏览器等，以及一些第三方开发的远程调试工具，如weinre等。以Android为例，可以将webview和ChromeforAndroid中的页面映射到PC端的ChromeDevTools中，然后就可以调试手机端的页面了个人电脑。可以参考：Chrome远程调试（RemoteDebugging）之移动web开发调试。vConsole是一个轻量级、可扩展的、用于移动网页的前端开发人员调试面板（chrome开发人员工具的便捷实现）。这是一个内嵌页面中方便的调试器，基本可以满足远程调试页面的一般需求。github:https://github.com/Tencent/vConsoledemo:https://wechatfe.github.io/vconsole/demo.htmlTBSStudio因为微信浏览器是定制的浏览器，一般的远程调试方式是没有的，需要配合特定的工具，比如微信开发者工具。TBSStudio是另一个强大的工具，可以像Chrome一样调试远程微信浏览器页面。可以参考：tbsstudio-腾讯浏览服务-调试工具TBSStudio10。前端后并行开发一般情况下，前端开发完成UI或组件开发后，需要等待后端提供接口文档后才能进行。如果能做到前后端并行开发也能提高开发效率。前后端并行开发是指无需等待后端提供接口文档即可进行前端开发。后端提供接口后，对接后基本可以上线。实现本地化界面模拟，可以实现前后端并行开发，但是ajax需要在代码层面进行封装。可以参考：本地化界面模拟，前后端并行开发11.友好交流无论工具多么强大，面对面的交流往往是不可避免的。友好和冷静的沟通也很重要！更多后续博客，查看https://github.com/senntyou/blogs作者：沈玉之(@senntyou)版权声明：免费转载-非商业-非衍生-保留署名（CreativeCommons3.0许可）
