js 前端数据模拟

原文链接http://div.io/topic/1404

fms官网模拟数据地址:http://fms.help/beginning.html

前端应该争取模板控制权，前端应该在本地 Mock Server 中开发并直接交付模板代码给后端

AJAX 接口

大家肯定遇到过，当后端 API 没有编写完成时，前端无法进行调试，这就导致了前端会被后端阻塞的情况。而我所说的 Mock Server 是相当于构建假数据，然后把这些假数据存到 JSON 文件上，Mock Server 可以响应请求或者生成页面，当然也可以顺便生成 API 文档。

引用自：你是如何构建 Web 前端 Mock Server 的？

例如前端需要开发一个AJAX 登录页面：

如上图所示，前端需要向 /login/ 发送 POST 方式的AJAX请求，并提交 username 和 password，需要后端返回JSON，前端再根据JSON进行后续操作。

---

AJAX需要在服务器环境才能运行，所以一些前端会使用 WampServer 在本地启动一个 PHP 服务器，然后创建一些 PHP文件返回数据。

---

或者使用代理软件将在线url转发到本地文件

login.json

{
    "status": "success"
}

Wamp 和代理软件的缺点

1. Wamp启动的PHP Server 只能使用 .php .txt .html 这样的后缀不可以使用 /ajax/login/ 这样的 url，如果要实现 /ajax/login/ 需要实现 PHP 路由。

2. 代理软件每次访问的都是固定的数据，我们要模拟登录成功和失败时返回的JSON

{
   "status":"success"
}
{
   "status":"error",
   "msg": "密码错误"
}

1. 以上两种方式模拟数据都需要创建文件

---

HTML转换为后端模板

淘宝的Web基本上都是基于MVC框架webx，架构决定了前端只能依赖后端。
所以我们的开发模式依然是，前端写好静态demo，后端翻译成VM模版，这种模式的问题就不说了，被吐槽了很久。

引用自：前后端分离的思考与实践（一）

后端模板有很多种 PHP Smarty 、PHP 直接解析 、JAVA Velocity 等。

不理解翻译请 点击此处

前端书写 HTML 让后端“翻译”成后端模板存在如下问题：

1. 后端翻译模板工作影响后端开发效率
2. 有些HTML输出逻辑复杂，需要前端在HTML中准备大量说明注释
3. 当前端没有将复杂的输出需求表达清楚时，翻译完成的模板并不是预期需要的代码。会增加前后端联调和测试成本。

基于 Node中间层的前后端分离

可以看看 Taobao UED 的相关文章 前后端分离的思考与实践

业内很多团队都在实践基于 Node中间件的前后端分离，但对于小型团队存在两个致命的问题：
1. Node 中间件的方式对前后端架构的改动成本太大
2. 团队中需要有熟练掌握 Node 的开发同事。绝对不能只有一个人懂 Node 然后推行和实施 Node 中间层。

小型团队基于 Node 中间层完成前后端分离太困难。

为什么要用 FMS ?

FMS 让前端能在本地独立完成Web数据模拟。（AJAX、后端模板引擎渲染页面）