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

来源：互联网发布：淘宝安装服务平台编辑：程序博客网时间：2024/05/19 12:24

在前端编程中，经常需要编写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”，正在紧急开发中，敬请期待。

0 0