javascript - How do AMD loaders work under the hood?

Question

So I've been using require.js for while now, but I realized that I actually don't know how it works under the hood. It says that it's an AMD loader.

I do understand that CommonJS is synchronous, which means that it blocks execution of other codes while it's being loaded. On the other hand, AMD is asynchronous. This is where I get confused.

When I define a module, it has to load a,b,c in order to execute the callback. How does asynchronous work here?

1. Isn't it synchronous when it has to load those three dependencies first?
2. Does it mean that AMD loads a,b,c asynchronously then checks to see if those files are loaded (doesn't care about the order) then execute the callback?

define("name",["a","b","c"], function(a,b,c){

});

Answer 1

As you know, "AMD" (Asynchronous Module Definition (AMD)) is a specific API. There are many AMD-compatible "loaders", including RequireJS, curl.js and Dojo (among others).

Just as frameworks like JQuery and Dojo give you an API over raw Javascript; a program that uses AMD:

1) requires you an AMD-compatible .js library,

2) demands certain programming "rules" and "conventions", and

3) Ultimately sits "on top" of Javascript, which runs on your "Javascript engine" (be it IE, Chrome, Firefox - whatever).

Here are a couple of links I found useful:

• https://www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/loading_jquery_with_dojo_1_7_amd_loader2?lang=en

• http://dojotoolkit.org/reference-guide/1.8/loader/amd.html

• http://blog.millermedeiros.com/amd-is-better-for-the-web-than-commonjs-modules/

• http://addyosmani.com/writing-modular-js/

PS: To answer your immediate question, the latter link has a bit of discussion about "require()" and "dynamically_loaded dependencies".