一种模仿AJAX测试数据的方法

在前端编程中,经常需要编写AJAX模拟数据,但应用到生产环境后,又需要修改代码,导致大量的代码都处于调整状态,并且数据都处于静态化状态,以至于视图渲染的效果很差。

能不能将模拟数据与业务逻辑完全隔离呢?如果编写一个浏览器插件,利用DOM进行通信,由插件负责创造模拟数据,而页面的HTTP通信方法负责抓取数据,同时加入是否启用模拟数据通信开关,即可完全满足上述条件,即模拟数据动态化,并且与业务数据完全隔离。

核心代码如下:

//  数据由插件返回
var obj = [{username : 'yiifaa', age : 32}],
    virtualUrl = true,//    是否采用模拟通信
    url = 'abc.json', //    通信地址
    el = document.getElementById('abc.json');
//  经数据存入dom元素
$(el).val(JSON.stringify(obj));
//  页面引用的Http工具函数,这是通信的关键
var Http = {
    ajax : function(url) {
        var defered = new $.Deferred();
        //  判断是否启用了模拟状态
        if(virtualUrl) {
            //  读取DOM元素状态
            //  改用HTML5的Observer接口
            setTimeout(function() {
                var value = JSON.parse($(el).val());
                defered.resolve(value)
            }, 10)
        } else {
            //  直接返回$.ajax Deferred对象
            return $.ajax(url);
        }
        return defered.promise();
    }
}

调用方式如下:

//  完全兼容$.ajax调用方式
Http.ajax('abc.json')
    .done(function(data) {
          // 输出yiifaa
          alert(data[0].username);
    })

针对Chrome的浏览器插件”STI AJAX MOCKER”,正在紧急开发中,敬请期待。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值