AMD: какова цель в контексте javascript?

Что касается AMD (определение асинхронного модуля), я прочитал фазу следующим образом:

Формат AMD появился из-за желания иметь формат модуля, который был бы лучше, чем сегодняшний «написать кучу тегов сценария с неявными зависимостями, которые вы должны упорядочить вручную», и что-то, что было бы легко использовать непосредственно в браузере.

Какова цель в контексте javascript? Можете ли вы привести пример? за и против использования AMD?


person underscore666    schedule 15.04.2012    source источник


Ответы (2)


Задолго до того, как JavaScript получил нативную модульную систему, единственным способом размещения скриптов на странице были <script> элементы. Они выполняются последовательно, в том порядке, в котором они появляются в HTML. Это означает, что если ваш скрипт основан на jQuery, то <script> jQuery должен стоять перед <script> вашего скрипта. В противном случае он взрывается.

Нередко приложение логически разбивается на несколько файлов, особенно по мере его роста. Но использование этой системы ручного заказа сценариев быстро превращается в кошмар. Ваши сценарии имеют неявные зависимости, управление которыми определено в другом месте. Тут на помощь приходит AMD.

AMD — это спецификация модуля, а RequireJS — реализация такой системы. Проще говоря, это оболочка вокруг вашего кода, которая 1) сохраняет ваш сценарий инертным до тех пор, пока он не будет вызван, 2) позволяет вашему сценарию явно определять свои зависимости и 3) позволяет системе модулей определять, какие зависимости выполняются в каком порядке.

Вот грубый пример:

// your-app.js
define(['jquery', 'underscore'], function($, _){
  // Your script sits in this "wrapper" function.
  // RequireJS now knows app.js needs jquery and underscore.
  // It loads and executes them first before your script.
})

// jquery.js
define('jquery', [], function(){
  // jQuery stuff
  return jQuery
})

// underscore.js
define('underscore', [], function(){
  // underscore stuff
  return underscore
})

// Then on your HTML, load up your app.
<script data-main="path/to/app.js" src="path/to/require.js"></script>
person Joseph    schedule 15.04.2012
comment
in require(['jQuery','underscore'],function($,_){ } -- jQuery и подчеркивание загружаются только в этом порядке. Допустим, если функция в подчеркивании использует jQuery, будет ли она работать правильно? - person Ankur Marwaha; 12.09.2016
comment
@AnkurMarwaha В этом случае подчеркивание зависит от jQuery. Underscore должен определить jQuery как свою зависимость, чтобы jQuery загружался первым. Это не ваш код должен беспокоиться об этом. Кроме того, зависимости в этом массиве не загружаются и не выполняются в указанном порядке. - person Joseph; 12.09.2016

Для библиотек Javascript, которые зависят друг от друга, обычно требуется, чтобы они загружались в определенном порядке. Например, тег скрипта, включающий библиотеку jQuery, должен стоять перед тегом скрипта, который включает библиотеку пользовательского интерфейса jQuery.

Если бы библиотеки использовали AMD, их можно было бы включать в любом порядке. Библиотека AMD позаботится об инициализации библиотек в правильном порядке, потому что вы указываете, какая библиотека от чего зависит.

(Несколько иронично, но тег script, который включает библиотеку AMD, конечно же, должен стоять перед кодом, который включает любые библиотеки, использующие AMD...)

person Guffa    schedule 15.04.2012