Here’s this posts sample code, rewritten with my technique:

  var instance = $LAB
  .script("framework.js")
  .script("myscript.js")
  .wait(function(){ myscript.init(); });

  instance.wait(function(){
    framework.init();
    framework.doSomething();
  });

new=>

$LAB
.script("jquery.js")
.block(function(){
      $LAB
      .script("jquery.ui.js")
      .script("myplugin.jquery.js")
      .block(function(){
            $LAB.script("initpage.js");
      });
});

I know its wrong now.
Thank you again

I think I’m clear about it now.

Thanks a lot again!

To try and clarify for you: A single $LAB chain consists of a starting $LAB followed by a chain of one or more .script() calls and .wait() calls, interspersed as you need them to be. You should always try to avoid *multiple* $LAB calls, as they operate completely independently. Also, by nesting a $LAB inside a .wait(), you prevent that chain from even *loading* until the .wait() has executed. By doing a single chain with all your scripts, LABjs can load them *all* in parallel, but control their execution order based on where you have .wait() calls. That’s what .wait() is for, to ensure *execution* order.

As for your $document.ready()… the use of $document.ready() is entirely separate from and orthagonal to the order of your scripts loading. It is only for making sure some logic doesn’t run until the dom is ready. LAB script loads *do not* affect dom readiness at all (they don’t hold it up) so there’s no connection that you should make between sequencing $LAB with document.ready.

Instead, you should load all your scripts with LABjs and use .wait() where it’s most appropriate to run code. If that code happens to be dependent on the dom-readiness, wrap the code (inside your .wait()) with a document.ready. In some cases, your scripts may load and execute before dom-ready, and thus your logic will protected to run later when the dom is ready. In other cases, dom-ready will pass before your scripts load and execute, and using document.ready() will essentially pass through and execute immediately.

If the code you need to wrap in $(document).ready() only cares about jquery, and not about the plugins, then do this:

$LAB
.script("jquery.js")
.wait(function(){
   $(document).ready(function() {  /* do something */ });
})
.script("plugin1.js")
.....

If the code you have to run needs the plugin to be there, then do it this way:

$LAB
.script("jquery.js")
.wait()
.script("plugin1.js")
.wait(function(){
   $(document).ready(function() {  /* do something */ });
});

Does that make sense more now?

Many thanks for the brief insight! I will keep it in mind.

Also, I really think that there are a lot of novice labjs users who are confused like I’ve been. Could you please post some links to examples of LABjs used with various javascript libraries like jquery , yui etc. ?

I had a very hard time coming across examples of labjs on the internet.
Also, I thought I was doing the right thing loading dependent group of scripts (e.g., jquery.validate, jquery.form, etc.) into a single .block (I’ll use .wait now on though) that would load after the jquery library is loaded.

Looking at your example above, I think I still am not 100% sure.

Due to the dependency of validate and jquery form upon jquery, I assume the following would be efficient – I am assuming that validate and form will both loading in parallel after jquery.js finishes loading :
–
$LAB
.script(‘jquery.js’).wait(function(){$LAB.script(‘jquery.validate.js’).wait().script(‘jquery.form.js’)})

But you stated above:
–
$LAB
.script(‘jquery.js’).wait().script(‘jquery.validate.js’).script(‘jquery.form.js’).wait();

which looks much simpler than expected! So if I am assuming it wrong and the example you’ve given is how it should be, I suppose I can write documentready function at the earliest possible .wait ? i.e., after adding a .wait right behind .script(‘jquery.validate.js’) ?

Also, once again, please could you post some links that you could be helpful and save you the hassle?

Thanks

$LAB.script(…).wait(…).script(….).script(….).wait(…)……

You’re doing stuff like this and it’s less efficient:

$LAB.script(….).wait(function(){ $LAB.script(….).wait(…)…. })……

Do you see the difference?

Secondly, the “.block” is a deprecated name for “.wait”, so you should always use .wait, not .block. And make sure you’re using LABjs 1.0.2rc1, which is the latest stable available version.

Also, do *not* assume that a $LAB.wait() call is equivalent to waiting for dom-ready. The dom-ready event is entirely separate from the dynamic loading of scripts, so you may have sometimes where the dom-ready happens before the scripts finish, and other times the reverse. So you should always use $(document).ready() to protect any code which relies on the presence/readiness of the DOM.