[转] 前端如何高效的与后端协做开发

1. 先后端分离

前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此即可作前端工程化、组件化、单页面应用等。

能够参考：先后端分离、web与static服务器分离(https://segmentfault.com/a/1190000015297319)。

2. 尽可能避免后端模板渲染

web 应用的渲染方式分为服务器端渲染和客户端渲染，当下比较推荐的方式是客户端渲染，数据使用全 ajax 的方式进行交互。

除非在一些不得不使用服务器端渲染的状况下（如门户、电商等），应当尽可能使用客户端渲染，由于客户端渲染更能使先后端分离（项目分离、代码解耦、协做分离、职责分离等），也能更好的作本地接口模拟开发，提高开发效率。

即便用服务器端渲染，在技术支持的条件下，可使用 node 中间层（由前端人员开发），代替传统的后端模板渲染，这样可使后端与前端彻底解耦，后端与前端只有数据上的往来。

能够参考：细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）(https://segmentfault.com/a/1190000016704384)。

3. 尽可能避免大量的线上调试

作好本地接口模拟开发（包括后端模板渲染），避免大量的线上调试，由于线上调试很不方便，也很费事，而且每次更新代码，都须要从新构建，而后同步到服务器。

因此作好本地接口模拟开发，只要程序在本地运行是没问题的，通常线上就不会有太大的问题，这样就能大幅下降调试工做量，提高开发效率。

4. 本地接口模拟开发

本地接口模拟就是在本地模拟一个与服务器差很少的环境，可以提供数据所需的接口，进行错误模拟处理等等。

本地接口模拟开发的意义就在于可以在本地完成几乎全部的开发与调试，尽可能减小线上的调试，提升开发效率。

一些经常使用库：

• 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)。

5. 规范的接口文档

前端与后端协做提高开发效率的一个很重要的方法就是减小沟通：可以造成纸质的文档就不要口头沟通、可以把接口文档写清楚也不要口头沟通（参数、数据结构、字段含义等），特别是线上协做的时候，面对面交流是很困难的。

一个良好的接口文档应当有如下的几点要求与信息：

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/)

6. 去缓存

前端须要作好去客户端缓存的功能，保证用户始终都是使用的最新资源，不会由于由于缓存的问题而出现 bug。

传统的去缓存是在静态资源 url 上加上版本号或者时间戳，不过由于构建工具的出现以及一些浏览器已经不支持这种方式了的缘故，这种方式已是过去时了。

如今去缓存是将文件 hash 化命名，只要文件变更，文件名就会不同，以此才能完全的去缓存。若是使用 webpack 进行打包，会自动将全部文件进行 hash 化命名。

能够参考：webpack output-filename(https://webpack.js.org/configuration/output/#output-filename)。

7. 作好错误处理

前端与后端都须要各自作好错误处理，以便发生错误可以有友好的提示，也能在用户反馈时快速准肯定位错误来源和缘由。

通常前端的错误分为：

• 脚本运行错误： js 脚本错误，找到堆栈信息，而后解决

• 接口错误：服务器报错、数据返回不对、没有响应数据、超时等

而接口错误分为：

• 状态码错误（状态码非 2XX）：服务器报错、超时等

• 数据错误：没有响应数据、数据格式不对、数据内容不对

能够参考：HTTP状态码(https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin)。

8. 运行时捕捉 js 脚本错误

当用户在用线上的程序时，怎么知道有没有出 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)

9. 移动端远程调试、vConsole、TBS Studio

由于移动端的开发没法像 pc 端开发同样使用 Chrome 的开发者调试工具，因此调试移动端须要一些额外的技巧。

移动端应用通常都运行在微信浏览器中、 webview 中、手机浏览器中。

远程调试（Remote Debugging）

远程调试就是经过 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/)。

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板（ 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)

10. 前端后并行开发

正常状况下，前端的开发在完成 UI 或者组件开发以后，就须要等后端给出接口文档才能继续进行，若是能作到先后端并行开发，也能提高开发效率。

先后端并行开发，就是说前端的开发不须要等后端给出接口文档就能够进行开发，等后端给出接口以后，再对接好后就基本上能够上线了。

在本地化接口模拟的实现下，就能够作到先后端并行开发，只是在代码层面须要对 ajax 进行封装。

能够参考：本地化接口模拟、先后端并行开发(https://segmentfault.com/a/1190000015297352)。

11. 友好的沟通

无论工具多么厉害，不少时候都免不了要当面沟通，友好、心平气和的沟通也是很重要的哩！