Задолго до того, как 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