Created
May 17, 2014 02:31
-
-
Save ninetails/b0e784567ef389512d23 to your computer and use it in GitHub Desktop.
Trying to make a AMD (Asynchronous Module Definition) approach to load jsonp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment