Подробное объяснение использования RequireJs

Одно: Почему использовать RequireJS?

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

Во время загрузки нескольких файлов js браузер останавливает рендеринг веб-страницы (JS блокирует рендеринг браузера), чем больше файлов загружается, тем дольше будет время потери реакции веб-страницы; кроме того, управление зависимостями между файлами сложно.

Функция RequireJs:

(1) Реализует асинхронную загрузку js файлов, чтобы избежать потери响应 веб-страницы;

(2) Управляет зависимостями между модулями, что упрощает написание и поддержку кода.

(3) Определяет область видимости, чтобы избежать загрязнения глобального пространства имен.

Двое: Загрузка require.js

1.СОфициальный сайтЗагрузите последнюю версию require и поместите её в директорию js, используя script для включения в страницу:

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

Чтобы не блокировать рендеринг страницы, можно поместить его в нижнюю часть HTML или изменить следующим образом:

<script src="js/require.js" defer async="true"></script>

Атрибут async указывает на то, что этот файл нужно загружать асинхронно (атрибут defer совместим с IE).

2. Загрузка логического кода страницы:

Предположим, что кодовый файл main.js находится в папке js, то можно использовать следующие способы для его включения:

Способ 1:

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

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

Способ 2:

После загрузки require.js загружайте конфигурационный файл config (если есть), а затем основной модуль:

require([‘configUrl’],function () { //config.js должен быть зарегистрирован через requirejs
 require([moduleAName],function(moduelA){
 // логический код
 }
});

Третий раздел: запись основного модуля

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

Функция require() принимает два параметра, первый параметр - это массив, который показывает зависимости текущего модуля; второй параметр - это функция обратного вызова, которая будет вызвана после успешной загрузки всех указанных модулей. Загруженные модули передаются в качестве параметра функции обратного вызова, что позволяет использовать их (модули с return значением) внутри функции обратного вызова.

require() асинхронно загружает moduleA, moduleB и moduleC, браузер не теряет реакции;指定的回调 функция будет выполняться только после загрузки и выполнения всех зависимых модулей.

Четвертый раздел: конфигурация модулей

Метод require.config() может определить путь модулей и определить зависимости в виде коротких имен модулей. Этот методМожете написать их перед каждым основным модулем (main.js), используя вместе с основным модулем.

Параметр является объектом, в котором свойство paths определяет загрузочные пути для различных модулей. pathsМожно конфигурировать несколько путейЕслиremote CDN библиотека не загрузилась успешно, то загрузите локальную библиотеку.

Если не определить конфигурацию модулей,则在 зависимости в основном модуле необходимо указывать полные пути.

На каждой странице конфигурируйте пути по мере необходимости:

require.config({  // конфигурация модулей, используемая в последующем коде
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, ”Jquery/jquery-1.12.0.min”}
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...other code; 
 fixHeight.init();
});

或者将config配置作为一个单独的js文件，然后

require([“configJsUrl”],function(){  //需要在main文件中通过require先异步加载模块配置
 require([‘ModuleName’],function(Name){
 …other code
 }
}

为了避免每个页面都要嵌套require，还可以用如下方式：

先创建单独的config.js文件：

require.config({ //注册模块的配置，供后面的代码使用
 baseUrl: "/js/app/", //其他依赖都是对于此位置的相对路径
 // 路径配置
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “模块短名”:”相对于baseUrl的路径地址，省略模块文件的后缀.js”
 },
 // 非AMD模式编写的类库需要重新配置
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（短模块名仍需要定义路径）: {
  exports: 'Backbone',  　　　　//类库输出的变量名，表明这个模块被外部调用时的名称
  deps:['jquery','underscore'] //该模块的依赖
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//js资源的参数，控制版本刷新缓存
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块

Затем можно использовать их следующим образом:}}

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

Конфигурацию модулей можно напрямую зарегистрировать в пространстве имён requirejs через основную точку входа, и в дальнейшем методы require не требуют регистрации, их можно использовать напрямую с короткими именами модулей для загрузки зависимостей.

Если не указан config и data-main, то по умолчанию baseUrl равен директории HTML-страницы, из которой загружается RequireJS. Если указан data-main, но не указан корневой путь в config, то этот путь устанавливается в baseUrl.

Если вы хотите пропустить процесс интерпретации "baseUrl + paths", а вместо этого напрямую указать загрузку скрипта из某一个 директории, можно сделать это: если ID модуля соответствует одному из следующих правил, его интерпретация будет избежать обычной конфигурации "baseUrl + paths" и напрямую загружать его в качестве скрипта по отношению к текущему пути HTML-документа:

•　　　 заканчивается на ".js".

•　　　 начинается с "/".

•　　　 содержит протокол URL, например "http:" или "https:".

например, require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

require.js требует, чтобы каждый модуль был отдельным js-файлом. Загрузка нескольких модулей вызывает несколько HTTP-запросов, что влияет на скорость загрузки веб-страницы. Поэтому require.js предоставляет инструмент оптимизации (r.js), который можно использовать после завершения部署 модулей для объединения нескольких модулей в один файл, что уменьшает количество HTTP-запросов, но требует权衡 с кэшированием.

六章、AMD-модульный стиль написания

модули, загружаемые require.js, должны быть написаны в соответствии с правилами AMD. То есть модули должны определяться с помощью специфической функции define(), которая обычно возвращает объект, содержащий методы или свойства, доступные для других модулей; или выполняет соответствующие логические операции без вывода.

七章、require.js-ю-plugin-ы

プラグイン text,разрешает require.js загружать асинхронно txt, css или html и другие текстовые ресурсы для использования в jsа не нужно создавать строку Html в script.

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template, cat) {}}
 $('body').append($(template));
 document.body.appendChild(cat);
　}
; 

Внимание:

Зависимости модуля могут быть введены через [], также могут быть введены через метод require() в回调-функции, эффект одинаковый. Потому что метод define сканирует зависимости метода require в回调-функции с помощью регулярного выражения и загружает их, прежде чем выполнять回调-функцию. Но в этом случае необходимо передать зависимость require herself, в противном случае появится ошибка:

define(function(require) {
 var helper = require('helpModuleUrI'); // также предварительно загружает это зависимое
 ...
}

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

Различие между выполнением метода require и вызовом callBack:

require('config', callBack1);
require('b', callBack2);
// Два метода require будут выполняться немедленно, но порядок выполнения callBack неопределен и зависит от порядка загрузки.
// В отличие от следующего кода, он будет выполняться строго по порядку
require('config', function() {
 require('b', callBack2)
}

Это все, что есть в этой статье, надеюсь, что это поможет вам в учебе или работе, и также ждем вашей поддержки tuition!

Заявление: содержимое статьи взято из интернета, авторские права принадлежат их законным владельцам, материалы предоставлены пользователями интернета в добровольном порядке, сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за связанные с этим юридические вопросы. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. В случае подтверждения нарушения, сайт незамедлительно удалят涉嫌侵权的内容。