var restaurants = [
{
"name": "KFC"
},
{
"name": "7-11"
},
{
"name": "成都小吃"
}
]
载入这段数据:
$.getScript('data/restaurants.json', function(e){
var data = window.restaurants;
alert(data[0].name); //KFC
});
单一的数据源确实很简单,但是往往一个应用中会有多个数据源,比如在这个实例App中UI就需要载入用户信息、餐厅信息、订餐信息三种数据后才能工作。如果仅仅靠多层嵌套回调函数的话,可能代码的耦合就非常重了。
为了解决多个数据加载的问题,我习惯的解决方法是构造一个dataReady事件响应机制。
var foodOrder = {
//数据载入后要执行的函数暂存在这里
dataReadyFunc : []
//数据源URL及载入状态
, dataSource : [
{ url : 'data/restaurants.json', ready : false, data : null },
{ url : 'data/users.json', ready : false, data : null },
{ url : 'data/foods.json', ready : false, data : null }
]
//检查数据源是否全部载入完毕
, isReady : function(){
var isReady = true;
for(var key in this.dataSource){
if(this.dataSource[key].ready !== true){
isReady = false;
}
}
return isReady;
}
//数据源全部加载完毕,则逐一运行dataReadyFunc中存放的函数
, callReady : function(){
if(true === this.isReady()){
for(var key in this.dataReadyFunc){
this.dataReadyFunc[key]();
}
}
}
//供外部调用,会将外部输入的函数暂存在dataReadyFunc中
, dataReady : function(func){
if (typeof func !== 'function') {
return false;
}
this.dataReadyFunc.push(func);
}
, init : function(){
var self = this;
var _initElement = function(key, url){
$.getScript(url, function(e){
//每次载入数据后,将数据存放于dataSource中,将ready状态置为true,并调用callReady
self.dataSource[key].data = window[key];
self.dataSource[key].ready = true;
self.callReady();
});
}
for(var key in this.dataSource){
_initElement(key, this.dataSource[key].url);
}
}
}
用法为
foodOrder.dataReady(function(){
alert(1);
});
foodOrder.init();
dataReady内的alert将会在所有数据载入完毕后开始执行。
这段处理的逻辑并不复杂,将所有要执行的方法通过dataReady暂存起来,等待数据全部加载完毕后再执行,更加复杂的场景此方法仍然通用。