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