Question

I am writing a framework that allows your modules to define which JS files will be added to the page before serving it. The idea is that a module might add something like this:

require([ 'dojo/topic', 'dojo/_base/window', 'hotplate/hotDojoWidgets/AlertBar' ], function( topic, win, AlertBar
){
  globalAlertBar = new AlertBar( { background: '#FF4444' } );
  globalAlertBar.placeAt( document.body, 'first' );
  globalAlertBar.startup();

  topic.subscribe('globalAlert', function( message, displayFor ){
    displayFor = displayFor || 2500;
    globalAlertBar.set( 'message', message );
    globalAlertBar.show( displayFor );
  });
});

This allows me for example to allow other widgets around the application to publish globalAlert in order to show an alertBar.
Right now:

• Any JS/Dojo file added to the list of JS to be loaded starts with “require”. To me, this is simply asynchronous code that will run at some point after loading. Most of the code loaded this way in the framework will wait for topics to be published, and will act accordingly
• The “application” will simply be one of those modules, which will subscribe to a topic publishing the container’s object
• “Proper” Dojo widgets loaded by require() will obviously use “define” — that’s business as usual, no worries there

Questions:

1) If I run ready() within one of the JS/Dojo files referenced in the page, will that be a page-level ready(), including all of the .js files loaded in the document? Or only for the files loaded by the current file?

2) I realise that the “right” way of doing things is by having only one JS file that runs require(), and have everything else loaded from that one (or even better using data-dojo-main ). However, I am trying to define modules (with server and client code) which work independently and add themselves to the page… So, is it actually bad practice, having having a bunch of files in the application page, and then having them require()‘ing and running Dojo code?

Thank you!

Merc.

P.S.
If you are curious, https://github.com/mercmobily/hotplate … the project started after a post here!

Answer 1

You can have as many requires per page/file/script as you would like. It’s define that should only be used once per page, as that is what makes the association between the page/script location and the module ID. define isn’t strictly for widgets – it defines a module which can be a function, constructor (class) a singleton object, or just do some work without returning anything.

require is asynchronous; hence the callback method which fires when all teh dependencies have finished loading:

require(modules, callback);

dojo/ready is essentially “block” based. The callback will not fire until all the dependencies have loaded and the DOM is ready. It is not page based nor global – it’s quite possible to have a second require on the page that fires before the first if the first is held up waiting for the DOM.