原文出处： 小胡子哥的博客（@Barret李靖）
前后端分工合作是一个陈词滥调的大话题，许多公司都在尝试用工程化的体式格局去提拔前后端之间交换的效力，下降沟通本钱，而且也开辟了大批的东西。然则几乎没有一种体式格局是令两边都很惬意的。事实上，也不能够让所有人都惬意。根本缘由照样前后端之间的交集不够大，交换的中心每每只限于接口及接口往外散布的一部份。这也是为何许多公司在雇用的时刻愿望前端职员熟练掌握一门背景言语，后端同砚相识前端的相干学问。
一、开辟流程
前端切完图，处置惩罚好接口信息，接着就是把静态demo交给背景去拼接，这是平常的流程。这类流程存在许多的瑕玷。
后端同砚对文件举行拆分拼接的时刻，由于对前端学问不熟悉，能够会搞出一堆bug，到最后又须要前端同砚协助剖析缘由，而前端同砚又不是迥殊相识后端应用的模板，形成为难的局势。
假如前端没有应用统一化的文件夹构造，而且静态资本（如图片，css，js等）没有剥离出来放到 CDN，而是应用相对路径去援用，当后端同砚须要对静态资本作相干设置时，又得修正各个link，script标签的src属性，轻易失足。
接口题目
后端数据没有预备好，前端须要本身模仿一套，本钱高，假如后期接口有转变，本身模仿的那套数据又不行了。
后端数据已开辟好，接口也预备好了，当地须要代办线上数据举行测试。这里有两个劳神的处所，一是须要代办，不然能够跨域，二是接口信息假如修改，后期接你项目的人须要改你的代码，贫苦。
不方便掌握输出。为了让首屏加载速率快一点，我们希冀后端先吐出一点数据，剩下的才去 ajax 衬着，但让后端吐出若干数据，我们不好控。
固然，存在的题目远不止上面罗列的这些，这类传统的体式格局实在是不酷（Kimi 附身^_^）。另有一种开辟流程，SPA（single page application），前后端职责相称清楚，后端给我接口，我悉数用 ajax 异步要求，这类体式格局，在当代浏览器中能够应用 PJAX 轻微进步体验，Facebook 早在三四年前对这类 SPA 的形式提出了一套处置惩罚计划，quickling+bigpipe，处置惩罚了 SEO 以及数据吐出过慢的题目。他的瑕玷也是非常显著的：
页面太重，前端衬着工作量也大
首屏照样慢
前后端模板复用不了
SEO 依旧很狗血（quickling 架构本钱高）
history 治理贫苦
题目多的已是无力吐槽了，固然他依旧有本身的上风，我们也不能一票否决。
针对上面看到的题目，如今也有一些团队在尝试前后端之间加一个中间层（比方淘宝UED的 MidWay ）。这个中间层由前端来掌握。
JavaScript
+----------------+
| F2E |
+---↑--------↑---+
| |
+---↓--------↓---+
| Middle |
+---↑--------↑---+
| |
+---↓--------↓---+
| R2E |
+----------------+
+----------------+
| F2E |
+---↑--------↑---+
| |
+---↓--------↓---+
| Middle |
+---↑--------↑---+
| |
+---↓--------↓---+
| R2E |
+----------------+中间层的作用就是为了更好的掌握数据的输出，假如用MVC模子去剖析这个接口，R2E（后端）只担任 M（数据） 这部份，Middle（中间层）处置惩罚数据的显现（包含 V 和 C）。淘宝UED有许多相似的文章，这里不赘述。
二、中心题目
上面提出了在营业中看到的罕见的三种形式，题目的中心就是数据交给谁去处置惩罚。数据交给背景处置惩罚，这是形式一，数据交给前端处置惩罚，这是形式二，数据交给前端分层处置惩罚，这是形式三。三种形式没有好坏之分，其应用照样得看详细场景。
既然都是数据的题目，数据从哪里来？这个题目又回到了接口。
接口文档由谁来撰写和保护？
接口信息的修改怎样向前后端通报？
怎样依据接口范例拿到前后端可用的测试数据？
应用哪一种接口？JSON，JSONP？
JSONP 的平安性题目怎样处置惩罚？
这一系列的题目一向搅扰着奋战在前哨的前端工程师和后端开辟者。淘宝团队做了两套接口文档的保护东西，IMS以及DIP，不知道有无对外开放，两个东西都是基于 JSON Schema 的一个尝试，各有好坏。JSON Schema 是对 JSON 的一个范例，相似我们在数据库中建立表一样，对每一个字段做一些限定，这里也是一样的道理，能够对字段举行形貌，设置范例，限定字段属性等。
接口文档这个事变，应用 JSON Schema 能够自动化临盆，所以只需编写 JSON Schema 而不存在保护题目，在写好的 Schema 中多加些限定性的参数，我们就能够直接依据 Schema 天生 mock（测试） 数据。
mock 数据的外部挪用，这却是很好处置惩罚：
JavaScript
typeof callback === "function" && callback({
json: "jsonContent"
})
typeof callback === "function" && callback({
json: "jsonContent"
})
在要求的参数中到场 callback 参数，如 /mock/hashString?cb=callback，平常的 io(ajax) 库都对异步数据猎取做了封装，我们在测试的时刻应用 jsonp，转头上线，将 dataType 改成 json 就好了。
JavaScript
IO({
url: "http://barretlee.com",
dataType: "jsonp", //json
success: function(){}
})
IO({
url: "http://barretlee.com",
dataType: "jsonp", //json
success: function(){}
})
这里稍微贫苦的是 POST 要领，jsonp 只能应用 get 体式格局插进去 script 节点去要求数据，然则 POST，只能呵呵了。
这里的处置惩罚也有多重体式格局能够参考：
修正 Hosts，让 mock 的域名指向开辟域名
mock 设置 header 相应头，Access-Allow-Origin-Control
关于怎样拿到跨域的接口信息，我也给出几个参考计划：
fiddler 替换包，好像是支撑正则的，感兴趣的能够研讨下（求分享研讨结果，由于我没找到正则的设置位置）
应用 HTTPX 或许其他代办东西，道理和 fiddler 相似，不过可视化结果（体验）要好许多，毕竟人家是特地做代办用的。
本身写一段剧本代办，也就是当地开一个代办服务器，这里须要斟酌端口的占用题目。实在我不引荐监听端口，一个比较不错的计划是当地要求悉数指向一个剧本文件，然后剧本转发URL，如：
JavaScript
原始要求：http://barretlee.com/api/test…
在ajax要求的时刻：
$.ajax({
url: "http://<local>/api.php?path=/api/text.json"
});
原始要求：http://barretlee.com/api/test.json
在ajax要求的时刻：
$.ajax({
url: "http://<local>/api.php?path=/api/text.json"
});
php中处置惩罚就比较简单啦：
JavaScript
if(!isset($_GET["page"])){
echo 0;
exit();
}
echo file_get_contents($_GET["path"]);
if(!isset($_GET["page"])){
echo 0;
exit();
}
echo file_get_contents($_GET["path"]);
Ctrl+S,保留把线上的接口数据到当地的api文件夹吧-_-||
三、小结
本文只是对前后端合作存在的题目和现有的几种罕见形式做了扼要的枚举，JSON Schema 详细怎样去应用，另有接口的保护题目、接口信息的猎取题目没有详细论述，这个后续有时间会整顿下我对他的明白。
