Question

As a project I have been working on has grown, so has the frequency of situations where all scripts on a page are not available when other code tries to access them. Though this happens most often after code is updated (e.g. not cached) I’ve had it come up more and more in testing, when it never used to happen.

I’ve addressed this, partially, by using a function to wait for a module to become available (see this question) and this addresses the concern, mostly, but I’m not totally thrilled with the implementation, and am looking for a more industrial strength pattern to deal with this. These are possible solutions I’ve come up with:

1) Load scripts on demand with something like ensure – not ideal. Requires actual script name dependency information to be included in each script, not just module/object name, to do this. Still have to take some action before using a resource to ensure it’s available.

2) Manage script loading order. If this would even work (e.g. I don’t think that simply putting script A before script B guarantees it will be available since they can be loaded concurrently), it would be a pain, since you don’t know a dependency until you’ve loaded the thing that depends on it. Would require a lot of work to set up on a site that has lots of pages that use different resources (and I have no intention of loading everything used everywhere on the site on every page).

3) Wait for everything to be loaded on a given page before allowing user interaction. Far from ideal for obvious reasons. Still doesn’t address dependencies that happen in initialization code.

4) Expand upon my current solution. Currently works like (this is pseudocode, but the basic logic process):

// Depends on Module2
Module1 = (function () {
   self = {};
   // function requires dependency
   // waitFor waits until global named 'dependency' is available then calls callback
   self.initialized=false; 
   self.init = function() {
       waitFor('Module2', function() {
           self.intialized=true;
       });
   }
  // waitForInitialization sets a callback when self.initialized=true
   self.func = self.waitForInitialization(func() {
           Module2.doStuff();
       });
   }
   //UI-initiated function requires dependency
   self.uiFunc = function() {
       if (!self.initialized) {
          showPleaseWaitDialog();
          self.waitForInitialization(function() {
              dismissPleaseWaitDialog();
              self.uiFuncImpl);
       } else {
          self.uiFuncImpl();
       }
   }
   self.uiFuncImpl= function() { 
       Module2.doStuff();
   }
} ());

I can think of ways to create a prototype that would deal with the dependency issue more transparently than my code above, and fully intend to do that if I have to, but is this truly the best solution? What do others do? What are considered best practices?

Answer 1

2) Script Load Order – scripts will always be executed in the order they are placed in the DOM, so while they might load concurrently they will execute in an orderly fashion (faced this same problem on a large project I worked on).

?) If script load order is not an ideal solution for you, you could look into the Promise model.

??) If Promises and Load Order won’t work for you, you could listen for a namespaced event that each module could fire when it’s initialized, that way if the object exists it can be used and if not its initialization could be listened for.