По мере того как функциональность сайтов постепенно становится богаче, JavaScript на веб-страницах становится всё более сложным и раздутым. Изначальный способ подключения отдельных JS-файлов через теги script больше не может удовлетворить текущую модель интернет-разработки; нам нужен ряд сложных требований, таких как командная работа, повторное использование модулей, модульное тестирование и так далее.

RequireJS — это очень компактный фреймворк для загрузки модулей JavaScript и одна из лучших реализаций спецификации AMD. Последняя версия RequireJS после минификации занимает всего 14K, что делает её чрезвычайно лёгкой. Он также может работать совместно с другими фреймворками. Использование RequireJS определённо улучшит качество вашего фронтенд-кода.

Какие преимущества может принести requirejs

Официальное описание requirejs:

RequireJS — это загрузчик JavaScript-файлов и модулей. Он оптимизирован для использования в браузере, но может применяться и в других средах JavaScript, таких как Rhino и Node. Использование модульного загрузчика сценариев, подобного RequireJS, повысит скорость и качество вашего кода.

Приблизительный смысл:

В браузере он может служить загрузчиком модулей для JS-файлов, а также использоваться в средах Node и Rhino, бла-бла-бла... В этом отрывке описывается базовая функция requirejs — «модульная загрузка». Что такое модульная загрузка? Мы объясним это по порядку в следующих разделах.

Давайте сначала рассмотрим типичный сценарий и объясним, как использовать requirejs, на примерах.

Обычный способ написания

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="a.js.html"></script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

a.js:

function fun1(){
  alert("it works");
}

fun1();

Возможно, вы предпочитаете писать так

(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})()

Второй способ использует блочную область видимости для объявления функций, чтобы не загрязнять глобальные переменные, но суть остаётся той же. При запуске двух приведённых выше примеров вы заметили, что при выполнении alert содержимое HTML пустое, то есть<span>body</span>оно не отображается; оно появляется только после нажатия OK. Этоблокировка отрисовки браузера JS-кодоми есть получившийся эффект.

Способ написания с requirejs

Конечно, сначала нужно перейти на сайт requirejs и скачать JS ->requirejs.org
index.html:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js.html"></script>
        <script type="text/javascript">
            require(["a"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

a.js:

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})

Браузер выводит «it works», что указывает на корректность работы, но есть одно отличие: на этот раз браузер не пуст; элемент body уже появился на странице. Пока мы можем знать, что requirejs имеет следующие преимущества:

1. Предотвращение блокировки рендеринга страницы при загрузке JS
2. Использование программных вызовов для загрузки JS позволяет избежать уродливых ситуаций, подобных следующим

<script type="text/javascript" src="a.js.html"></script>
<script type="text/javascript" src="b.js.html"></script>
<script type="text/javascript" src="c.js.html"></script>
<script type="text/javascript" src="d.js.html"></script>
<script type="text/javascript" src="e.js.html"></script>
<script type="text/javascript" src="f.js.html"></script>
<script type="text/javascript" src="g.js.html"></script>
<script type="text/javascript" src="h.js.html"></script>
<script type="text/javascript" src="i.js.html"></script>
<script type="text/javascript" src="j.js.html"></script>

Конкретное значение кода и другие возможности будут объяснены в следующих разделах:Учебник по модульному инструменту JS requirejs (часть 2): Базовые знания

Источник статьи: https://github.com/liuxey/blog/issues/1