ninetails
5/17/2014 - 2:31 AM
Trying to make a AMD (Asynchronous Module Definition) approach to load jsonp
Trying to make a AMD (Asynchronous Module Definition) approach to load jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<title>I need a title</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//static.folha.uol.com.br/library/modernizr/2.6.2/modernizr.js"></script>
<script src="//static.folha.uol.com.br/library/jquery/1.8.3/jquery.js"></script>
<script src="//static.folha.uol.com.br/folha/js/5.4/common/plugins.js?2014040802"></script>
<script src="//static.folha.uol.com.br/folha/js/5.4/common/common.js?2014041401"></script>
<script src="//static.folha.uol.com.br/folha/js/5.4/home/common.js?2014040802"></script>
</head>
<body>
<p>nothing.</p>
<script src="//static.folha.uol.com.br/library/jquery/1.8.3/jquery.js"></script>
<script src="test.js"></script>
</body>
</html>
(function ($, window) {
var bucket = {},
AjaxRequest = function (id, data, cache) {
this.cache = typeof cache === 'boolean' ? cache : true;
this.id = id;
this.data = (!(data instanceof Array)) ? [data] : data;
},
recall = function (depends, callback) {
var data = [];
$.each(depends, function(idx, id) {
var content;
try {
content = bucket[id].get_content();
if (typeof content !== 'undefined'){
data.push(bucket[id].get_content());
}
} catch (err) {
switch(bucket[id].poll()) {
case false:
bucket[id].request().then(function () {
var content = [];
$.each(arguments, function (idxa, val) {
$.each(val, function(idxb, val) {
var tint = window.setInterval(function(){
if (typeof val.responseText !== 'undefined') {
if (typeof content[idxa] === 'undefined') {
content[idxa] = [];
}
//console.log(JSON.parse(val.responseText));
//content[idxa][idxb] = JSON.parse(val.responseText);
recall(depends, callback);
window.clearInterval(tint);
}
}, 100);
});
});
if (depends.length == content.length) {
bucket[id].content = content;
}
}, function () {
throw new Error('There was an error requesting some ajax.');
});
break;
}
}
});
if (depends.length === data.length) {
callback.apply(window, data);
}
};
AjaxRequest.prototype.get_content = function () {
if (typeof this.content === 'undefined') {
throw new Error('Content not loaded.');
}
return this.content;
};
AjaxRequest.prototype.request = function () {
this.ajax = $.when($.map(this.data, $.ajax));
return this.ajax;
};
AjaxRequest.prototype.poll = function () {
return typeof this.ajax !== 'undefined' && this.ajax;
};
AjaxRequest.prototype.forget = function () {
if (typeof this.content !== 'undefined') {
delete this.content;
}
};
AjaxRequest.prototype.reset = function () {
this.forget();
delete this.ajax;
};
$.RequireJson = {
define: function (id, data, cache) {
if (typeof cache === 'boolean' && cache === false) {
bucket[id] = new AjaxRequest(id, data, false);
} else {
bucket[id] = new AjaxRequest(id, data);
}
},
require: function (depends, callback) {
if (typeof depends === 'string') {
depends = [depends];
}
// find unmatched dependencies
$.each(depends, $.proxy(function(idx, id) {
if (typeof bucket[id] === 'undefined') {
throw new Error('Data "' + id + '" not defined.');
}
if (bucket[id].cache === false) {
bucket[id].reset();
}
}, this));
recall(depends, callback);
}
};
}).apply(this, [jQuery , window]) ;
(function ($, window) {
$.RequireJson.define('f1', {url: './file1.json', async: true, cache: false, dataType: 'jsonp', jsonpCallback: 'file_one'}, false);
$.RequireJson.define('f2', {url: './file2.json', async: true, cache: false, dataType: 'jsonp', jsonpCallback: 'file_two'});
$.RequireJson.require(['f1', 'f2'], function(d1, d2) {
console.log('1:', d1[0][0], d2[0][0]);
});
window.setTimeout(function(){
console.log('calling 2...');
$.RequireJson.require(['f1', 'f2'], function(d1, d2) {
console.log('2:', d1[0][0], d2[0][0]);
});
}, 1000);
}).apply(this, [jQuery, window]);