title: How does AMD behave differently than CommonJS
body: <p>From what I can tell, the differences between CommonJS and AMD are simply that CommonJS requires a static bundle to be made so that all dependencies can be resolved before runtime whereas AMD allows us to load/resolve deps in an async fashion. Just about everything I've read explains the major difference in this way however I am reading Addy Osmani's "Writing Modular JavaScript" and I have a few questions with some of the AMD examples:</p>
  
  <h2>Understanding AMD define():</h2>
  
  <pre><code>// A module_id (myModule) is used here for demonstration purposes only
  
  define('myModule', 
     ['foo', 'bar'], 
     // module definition function
     // dependencies (foo and bar) are mapped to function parameters
     function ( foo, bar ) {
         // return a value that defines the module export
         // (i.e the functionality we want to expose for consumption)
  
         // create your module here
         var myModule = {
             doStuff:function(){
                 console.log('Yay! Stuff');
             }
         }
  
         return myModule;
  });
  
  // An alternative example could be..
  define('myModule', 
     ['math', 'graph'], 
     function ( math, graph ) {
  
         // Note that this is a slightly different pattern
         // With AMD, it's possible to define modules in a few
         // different ways due as it's relatively flexible with
         // certain aspects of the syntax
         return {
             plot: function(x, y){
                 return graph.drawPie(math.randomGrid(x,y));
             }
         }
     };
  });
  </code></pre>
  
  <hr>
  
  <p>Now when I read this, I think to myself ok this is different from CommonJS because we pass in a callback function to the define function, so that our callback function is invoked when our dependencies have been loaded/resolved. This allows our callback to be called asynchronously ONLY when everything we need is available..ok cool..Then I read the following example:</p>
  
  <h2>Understanding AMD require():</h2>
  
  <pre><code>// Consider 'foo' and 'bar' are two external modules
  // In this example, the 'exports' from the two modules loaded are passed as
  // function arguments to the callback (foo and bar)
  // so that they can similarly be accessed
  
  require(['foo', 'bar'], function ( foo, bar ) {
          // rest of your code here
          foo.doSomething();
  });
  </code></pre>
  
  <h2>Dynamically-loaded Dependencies</h2>
  
  <pre><code>define(function ( require ) {
      var isReady = false, foobar;
  
      // note the inline require within our module definition
      require(['foo', 'bar'], function (foo, bar) {
          isReady = true;
          foobar = foo() + bar();
      });
  
      // we can still return a module
      return {
          isReady: isReady,
          foobar: foobar
      };
  });
  </code></pre>
  
  <p>Now after reading these two examples I'm confused. It seems to say that <code>require()</code> is used for dynamically loaded dependencies, however wasn't that the reason we're using AMD/define in the first place? To support async/dynamically loaded deps?? If <code>require()</code> allows us to dynamically load deps, then what good is <code>define()</code>, or I should say, then how does AMD's <code>define()</code> differ from a plain old CJS implementation?</p>