Блог

Из того, что я могу сказать, различия между CommonJS и AMD заключаются просто в том, что CommonJS требует создания статического пакета, чтобы все зависимости могли быть разрешены до выполнения, тогда как AMD позволяет нам загружать / разрешать dep асинхронным способом. Почти все, что я прочитал, объясняет основное различие таким образом, однако я читаю «Написание модульного JavaScript» Адди Османи, и у меня есть несколько вопросов к некоторым примерам AMD:

Понимание определения AMD():

 // 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));
           }
       }
   };
});
 

Теперь, когда я читаю это, я думаю про себя: хорошо, это отличается от CommonJS, потому что мы передаем функцию обратного вызова функции define, чтобы наша функция обратного вызова вызывалась, когда наши зависимости были загружены / разрешены. Это позволяет нашему обратному вызову вызываться асинхронно ТОЛЬКО тогда, когда все, что нам нужно, доступно .. хорошо, круто..Затем я прочитал следующий пример:

Понимание AMD требует ():

 // 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();
});
 

Динамически загружаемые зависимости

 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
    };
});
 

Теперь, прочитав эти два примера, я в замешательстве. Кажется, говорится, что require() это используется для динамически загружаемых зависимостей, однако не по этой ли причине мы в первую очередь используем AMD / define? Для поддержки асинхронных / динамически загружаемых dep?? Если require() позволяет нам динамически загружать dep, то что хорошего define() , или я должен сказать, тогда чем AMD define() отличается от простой старой реализации CJS?