JavaScript模块化之使用requireJS按需加载(2)

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暂存起来，等待数据全部加载完毕后再执行，更加复杂的场景此方法仍然通用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章: