最新消息:ocsen.wang域名正式启用了!

数据模拟 mockjs

JavaScript ocsen 1355浏览

一、使用Mock

1. 全局开启和关闭Mock。

通过在mock/mockData.js中设定变量mockAJAXmockNav的值,可分别开启/关闭AJAX请求的mock和导航模块条目的mock。

/* 全局开关,是否mock AJAX请求或导航条目 */
var mockAJAX = true,
    mockNav = true;

2. 旁路AJAX请求并返回Mock数据。

Mock AJAX请求用于在服务器接口不可用或没有数据时调试客户端实现。相比hack代码,mock的好处是可以尽量保持客户端实现为“接口联调时”的样子。通过往mock/mockData.js中的apis数组中添加条目指定要mock的接口和返回值模板。下面是一个例子及解释,mockjs.com官方文档里有更多mock模板规范可供参考。

/* 在这个数组中添加要mock的接口。*/
// urlFilter用于匹配需要mock的url,可以是正则表达式或字符串。
// requestType(可以省略)用于匹配接口请求的类型,'get', 'post'等。
// template和fn需要至少出现一个,用于指定mock数据模板或指定返回值的逻辑。详细用法参见mockjs官方文档。
var apis = [{
    urlFilter: /customerRequirement/, // 该示例mock了'用户想买的商品'接口
    requestType: 'get',
    template: {
        total: 20,
        'result|20': [{ // result字段是个数组,由随机生成的20个object组成,每个object的生成结果遵循模板
            submitTime: '@RECENTHALFYEAR', // submitTime字段使用占位符,通过调用Random.recentHalfYear()生成值
            customerUid: '@NATURAL(1, 3000)',
            customerPhone: '@PHONENUM',
            productDesc: '这是胡萝卜,懂?',
            picId: '@PICID',
            'source|1': [0, 1], // source字段的值是在[0,1]中随机选择一个,即0或1
            'detail|1': ['搜索了胡萝卜', '世纪联华华商店,蔬菜货架'],
            'foobar|11-20.2': 1 // 演示用foobar字段,其值为11.00到20.99之间的随机数
        }]
    }
}];

3. 在导航模块树上添加额外的条目

添加额外条目用于在导航模块数据还未更新时在前端提供新view的交互入口。通过往mock/mockData.js中的navs数组中添加条目实现。下面是一个例子及解释。

/* 在这个数组中添加要mock的导航条目 */
// id为对应view模块的id和xtype
// text为导航条目显示的字符串
var navs = [{
    id: "CustomerRequirementList",
    text: "用户想买的商品"
}];

二、实现背景

1. 旁路Ext.Ajax.request。

Ext.Ajax.request()是Ext中AJAX类型的store proxy读取数据时默认调用的接口。目前的mock工具通过Ext自身的override机制覆盖了框架的方法实现,逻辑思路类似MockJS工具中Mock.mockjax(library)对Zepto做的事情。简单来说即在Mock._mocked查找匹配条目,如果找到则直接使用规则生成接口响应数据并传回给AJAX的回调函数,否则通过正常的AJAX网络发送流程处理该request。由于MockJS工具没有直接提供Ext的覆盖,我们对其源码添加了如下代码实现这个目的。该方式也是MockJS文档中推荐的方式。

/* Mock Ext.Ajax */
if (typeof Ext != undefined) {
    Ext.require('Ext.Ajax', function() {
        Ext.override(Ext.Ajax, {
            request: function(options) {
                options.type = options.method;  // 'get'或'post'等,Ext用了method域表示
                var item = find(options);
                // mock response 提供的信息有限,只有status,responseText,其他如requrest, headers等均不提供
                if (item) {
                    var response = {
                        status: 200,
                        statusText: 'OK',
                        responseText: JSON.stringify(Mock.mock(item.template))
                    };
                    // mock 默认AJAX成功
                    Ext.callback(options.success, options.scope, [response, options]);
                    Ext.callback(options.callback, options.scope, [options, true, response]);
                } else {
                    this.callParent(arguments);
                }
            }
        });
    });
}

2. 在导航模块store load成功后添加额外条目

该实现是完全基于Ext的override机制,对XMLifeOperating.store.Navigation添加load事件listener,在store的rootNode添加节点。具体实现参见源代码。

转载请注明:Ocsen-因上努力,果上随缘 » 数据模拟 mockjs

111