Разница между загрузкой скриптов data-main и normal

при использовании RequireJS, в чем разница между включением вашего скрипта с 

<script data-main="scripts/main" src="scripts/require.js"></script>

и

<script src="scripts/require.js"></script>

т. е. Что значит data-main изменение атрибута о загрузке в скрипте? Я прочитайте документы по этому, и разница не совсем ясна для меня.

обычно для установки параметров конфигурации и загрузки первого модуля приложения используется сценарий data-main. Примечание: требуется тег сценария.Яш генерирует для вашего модуля data-main включает атрибут async. Это означает, что вы не можете предположить, что загрузка и выполнение сценария data-main завершится раньше других сценариев, на которые ссылаются позже на той же странице.

в документации упоминается, что вы будете обычно используйте сценарий data-main для установки параметров конфигурации и загрузки первого модуля приложения - но не можете ли вы также сделать это через простой старый script - тег? Есть ли польза от этого? конфигурация загрузка модуля приложения с помощью ?

это единственное отличие с data-main асинхронная загрузка? Или есть что-то еще?

11
javascript requirejs

3 ответов

data-main это просто еще один способ выполнить начальное require вызов приложения. Иллюстрировать... это:

<script data-main="scripts/main" src="scripts/require.js"></script>

эквивалентно этому:

<script src="scripts/require.js"></script>
<script>require(["scripts/main"])</script>

обе формы являются асинхронными. это действительно все. Соображения о том, сколько у вас точек входа или где будет расположена конфигурация RequireJS, полностью ортогональны использованию data-main. Иными словами, эти соображения играть роль в вашем использовании data-main в той же степени, в какой они играют роль в вашем использовании require(["scripts/main"]).

часть документации, которую вы процитировали, просто скрывает вещи, упоминая, что скрипт загружен data-main создает script в элементе head С элементом async набор атрибутов, потому что это не отличается от загрузки любого скрипта через RequireJS. Каждый скрипт, загруженный RequireJS, будет иметь script элемент создается за это, в head, и async набор атрибутов.

обычно используется data-main для приложений, которые имеют только одну точку входа, и поставить конфигурацию RequireJS в модуле, указанном в data-main, но это ни в коем случае не требуется. Например, это совершенно допустимое использование:

<script>
    require = {
        // RequireJS config here...
    };
</script>
<script data-main="scripts/main" src="scripts/require.js"></script>
<script>
    require(["foo"], function (foo) {
        foo.something();
    });
</script>

конфигурация дается RequireJS путем установки require в глобальном пространстве перед загрузкой RequireJS. (Если require определяется перед RequireJS загружается, займет require's значение в качестве его конфигурации.) Кроме того, запуск приложения путем загрузки scripts/main этот код также нагрузки foo и вызывает метод на нем: две точки входа.

15

data-main - когда вы хотите иметь единая точка входа для приложения. Эта единственная строка скрипта будет загружать RequireJS вместе с scripts/main.js и начать свое приложение.

результат

<script data-main="scripts/main" src="scripts/require.js"></script>

это <script async src="scripts/main.js"></script> добавляется к документу во время выполнения; это скрипт, который будет содержать ваш require.config() заблокируйте и потяните свой первый скрипт приложения. Если вы не укажете data-main, тогда вы только загружаете требуете и ни один из ваших сценарии приложений, Если вы явно не загружаете файл конфигурации и первый модуль.

как вы думаете, что потребует загрузки, если вы не скажете ему ничего загружать?

если у вас не использовать data-main, вы должны предоставить точку входа после загрузка требует (это то, как я всегда это делал, без уважительной причины, кроме того, как я это узнал.) Читайте о параметры конфигурации чтобы посмотреть, как вы это сделаете этот.

Я использую эта модель развитие:

<script src="js/lib/require.js"></script>
<script src="js/config.js"></script>
<script>
  // same as data-main
  require.config({baseUrl : 'js'});
  require(['js/main']);
</script>

как единая точка входа, содержимое config.js и в последующем require(['js/main']) вызов будет в любом скрипте, на который ссылаются как data-main.

если вы используете статический оптимизатор для создания производственного пакета, ничто из этого не имеет значения, потому что вы просто загружаете пакет.

5

data-main-это скрипт, который требует.js будет обрабатывать. Как говорится в документации, в этом скрипте обычно задаются параметры конфигурации. Но есть и другие способы сделать это. Во многих случаях это самое простое и эффективное место. Но не всегда.

скрипт, на который указывает data-main, также перечислит зависимости для кода, который определяет файл. Зависимости где мясо. Типично, хотя и не обязательно, иметь эту первую нагрузку модуля и выполните то, что в конечном счете является фактическим приложением.

добавление в ответ на комментарий:

есть некоторые концепции, которые вам нужно знать, которые помогут понять этот подход.

во-первых, нет ни одного (или пары, или даже нескольких) скриптов. Этот тип загрузчика предназначен для обработки множества очень маленьких скриптов. Каждый с очень конкретной и часто (предпочтительно) единственной целью. Вызовите эти модули сценариев (или блоки.)

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

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

Так что это совсем не похоже на размещение ссылки скрипта (или нескольких ссылок) на странице, как мы все выросли. Это совершенно другой подход к разработке javascript. Как только вы поймете это и поймете, как разбить свой код на отдельные функциональные единицы, он действительно довольно скользкий.

3