Учебник по модульному инструменту JS RequireJS (2): Базовые знания

Предыдущая:Учебник по модульному инструменту JS RequireJS (1): Первое знакомство с RequireJSМы представили RequireJS очень простым способом. В этой статье будут рассмотрены некоторые базовые знания RequireJS, включая использование API, и т. д.

Базовый API

require определяет три переменные: define, require, requirejs. При этом require === requirejs, и обычно короче использовать require.

define: Как следует из названия, этот API используется для определения модуля.
require: Загружает зависимые модули и выполняет функцию обратного вызова после загрузки.

a.js из предыдущей статьи:

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

    fun1();
})

Модуль определяется через функцию define, а затем используется на странице:

require(["js/a"]);

для загрузки модуля (Обратите внимание, что зависимости в require — это массив. Даже если зависимость только одна, её нужно задать с помощью массива.), второй параметр API require — callback, функция, используемая для обработки логики после загрузки, например:

require(["js/a"],function(){
    alert("load finished");
})

Загрузка файлов

В предыдущих примерах загружаемые модули были локальными JS-файлами. Однако в большинстве случаев JS, который требуется загрузить веб-странице, может находиться на локальном сервере, других сайтах или CDN, поэтому его нельзя загрузить таким способом. Рассмотрим загрузку библиотеки jQuery в качестве примера:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Здесь используетсяrequire.config，require.configиспользуется для настройки местоположения загрузки модуля. Проще говоря, он даёт модулю более короткое и легко запоминающееся имя. Например, обозначьте адрес библиотеки jQuery от Baidu какjquery, поэтому при вызове require достаточно написать["jquery"]чтобы загрузить этот JS. Мы можем настроить локальные JS-файлы таким же образом:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Настройка paths делает имена наших модулей более краткими. У paths также есть важная особенность: можно настроить несколько путей. Если удалённая библиотека CDN не загружается, можно загрузить локальную библиотеку, например:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

С этой конфигурацией, если jQuery от Baidu не загрузится, будет загружен jQuery из локального каталога js.

При использовании RequireJS не нужно писать.jsв качестве суффикса. Конечно, также нельзя писать суффикс.
В функции обратного вызова из примера выше можно увидеть$параметр. Это выходная переменная зависимогоjqueryмодуля. Если вы зависите от нескольких модулей, можно записать несколько параметров по порядку, чтобы использовать их:

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

Если модуль не выводит значение переменной, то соответствующего параметра нет. Поэтому старайтесь сначала писать модули, которые выводят значение, чтобы предотвратить путаницу, вызванную несовпадением позиций.

Глобальная конфигурация

В приведённых выше примерах конфигурация повторяется.require.configЕсли добавлять конфигурацию на каждую страницу, это неизбежно будет выглядеть неэлегантно. RequireJS предоставляет функцию под названием "main data". Сначала мы создадим main.js:

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

Затем используйте на странице следующий способ, чтобы использовать RequireJS:

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

Поясню: в тег script, загружающий скрипт RequireJS, добавленdata-mainатрибут. JS, указанный этим атрибутом, будет обработан после загрузки require.js. Мы добавляемrequire.configконфигурацию вdata-main, чтобы каждая страница могла использовать эту конфигурацию. Тогда страница может напрямую использоватьrequireдля загрузки всех коротких имён модулей.

data-mainЕсть ещё одна важная особенность: когда тег script указывает атрибут data-main, require по умолчанию использует JS, указанный в data-main, в качестве корневого пути. Что это значит? Как в приведённом вышеdata-main="js/main"после настройки, когда мы используемrequire(['jquery'])(без настройки путей jQuery), require автоматически загрузит файл js/jquery.js вместо jquery.js, что эквивалентно конфигурации по умолчанию:

require.config({
    baseUrl : "js"
})

Сторонние модули

Черезrequireзагружаемые модули обычно должны соответствовать спецификации AMD, т.е. использоватьdefineдля объявления модулей. Однако иногда нам нужно загрузить JS, который не следует спецификации AMD. В таких случаях нам нужна другая особенность: shim. shim также немного сложно объяснить. shim дословно переводится как "прокладка", и это значение действительно есть. В настоящее время я в основном использую его в двух местах.
1. Вывод не-AMD модулей: shim нестандартных AMD модулей в используемые модули. Например, в старых версиях jQuery спецификация AMD не была унаследована, поэтому вы не можете напрямую require["jquery"]. В этом случае нужен shim. Например, если я хочу использовать библиотеку Underscore, но она не реализует спецификацию AMD, мы можем настроить её так:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

После этой настройки мы можем ссылаться на модуль Underscore в других модулях:

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

Не-AMD модули в форме плагинов: мы часто используем плагины jQuery, и эти плагины в основном не соответствуют спецификации AMD, например, плагин jquery.form. В этом случае нам нужно подключить плагин form к jQuery с помощью shim:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

Это также можно сократить как:

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
})

После этой настройки мы можем использовать jQuery с загруженным плагином.

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

Итак, это примерно вся базовая конфигурация RequireJS. Есть некоторые расширенные возможности, о которых будет рассказано в следующих статьях.

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