一种模仿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”，正在紧急开发中，敬请期待。