前端开发时自己做桩数据(假数据)

2016-08-15  本文已影响2553人  NoteCode

Deprecated: 已使用第三方mock-server,此DIY的方式就不用了,算作是一次学习吧。

某些功能开发时(以及后续维护时)严重依赖api返回的数据。不但要求数据呈现某特定状态,特别是当前开发功能要修改数据时,费劲巴拉弄好的数据,点一下按钮,就耗光了。还得再来一次……大费周章。于是,需要一个“桩数据”。(此数据不是真正从api请求来,而是自己在“偷偷”在本地提供的)。有个强大的json-server,据考察只支持REST API,不适宜。故自己简单实现了一个机制,可以实现桩数据

用法

  1. 将你所请求api的某次“合意”的数据保存成js文件,形如:
// 将某次请求的结果以key-value的形式赋给window.stub
// http://api.domain.com/index.php?r=demand/index&demand_id=1
window.stub = { 
    "demand/index":  // 此key即为api中的r参数
    {
        succ: "1",
        name: "a",
        tel: "123"
        ...
    }
}
  1. 在src/iscripts/global/test/stub/stub.js中 @@include此js
    注:stub.js中只能有一个@@include,其他都注释掉。否则,后边的会覆盖掉前面的,给window.stub赋值
  2. gulp --stub=1
  3. 开始调试吧

原理:

将统一封装的jquery的ajax方法调用前,加了一个判断。如果所请求的接口有stub数据,则应用改数据(而不去服务端请求了)。
故,此方法仅能一定程度上模拟真实情况,重在模拟请求数据,但不能写数据

说明

  1. stub并不一定能对你初次开发时有多大用处,只对后续你再想使用此数据时用处比较大。尤其你开发的功能会“改变数据”时,此方法可以省去数据过快被消耗掉
  2. 如果开发的功能需要顺次请求多个接口(注意是不同接口哦),可以给stub赋多个key-value,参考例子:data/demand_index/pay.js
  3. 另,现在已经有几个数据,或可用到;慢慢积攒吧
  4. 此功能开发的比较“毛坯房”,有不方便的地方,可以再视情况增强一些。
上一篇 下一篇

猜你喜欢

热点阅读