Question

Hey right now I’m using jQuery and I have some global variables to hold a bit of preloaded ajax stuff (preloaded to make pages come up nice and fast):

 $.get('content.py?pageName=viewer', function(data)     {viewer = data;}); $.get('content.py?pageName=artists', function(data)     {artists = data;}); $.get('content.py?pageName=instores', function(data)     {instores = data;}); $.get('content.py?pageName=specs', function(data)     {specs = data;}); $.get('content.py?pageName=about', function(data)     {about = data;}); 

As you can see, we have a huge violation of the DRY principle, but… I don’t really see a way to fix it… any ideas?

maybe an array?

Answer 1

You don’t need eval() or Function() for this. An array, as you suspected, will do the job nicely:

(function() // keep outer scope clean {    // pages to load. Each name is used both for the request and the name    // of the property to store the result in (so keep them valid identifiers    // unless you want to use window['my funky page'] to retrieve them)    var pages = ['viewer', 'artists', 'instores', 'specs', 'about'];     for (var i=0; i<pages.length; ++i)    {       // 'this' refers to the outer scope; likely the window object.        // And will result in page contents being stored in global variables        // with the same names as the pages being loaded. We use the with({})       // construct to create a local scope for each callback with the       // appropriate context and page name.       with ({context: this, pageName: pages[i]})          $.get('content.py?pageName=' + pageName, function(data)             {context[pageName] = data;});    }  })(); // close scope, execute anonymous function  // at this point, viewer, artists, etc. are populated with page contents  // (assuming all requests completed successfully)