Метод загрузки по умолчанию через теги JS через сценарии синхронизируется, то есть после того, как JS в первом теге сценария загружается, второй начинает загружаться, и так далее, пока все файлы JS не будут загружены. Более того, зависимости JS должны быть обеспечены через заказ сценария; А во время загрузки JS браузер перестанет реагировать, что сильно влияет на пользовательский опыт. Основываясь на этом, появилось и загружено много решений JS, что требуется, чтобы JS был одним из них.
Модули, загружаемые по требованиям, являются, как правило, модули, которые соответствуют стандартам AMD, то есть модулям, которые определяют с помощью и возврата, обнаруженных методов и переменных с помощью Ruturn; Требование может также загружать модули, которые летают в стандартах AMD, но это более хлопотно и не будут участвовать на этот раз.
Требовать загрузки JS Main включает в себя следующие аспекты:
HTML DEMO
<script src = "js/require.js" defer async = "true" data-main = "js/main"> <!-Дайте необходимый путь, объявить его как асинхронизация, укажите модуль входа как main.js (может быть пропущен.js)->
main.js
require.config ({// объявить местоположение путей модуля: {"jquery": "libs/jquery" "login": "libs/login"} // или использовать Baseurl, чтобы указать путь всех модулей baseurl: "js/libs"}); // использование требуется для загрузки модуля. Первый параметр - это массив, то есть модуль, который будет загружен, будет загружен в порядке массива; Второе - это функция обратного вызова, которая выполняется после завершения всей загрузки. require (['jquery', 'login'], function ($, login) {alert ("jQuery и Module Module Success!"); login.do_login (); // Некоторые и другие});Определение модуля входа в систему в соответствии с AMD
// Определение определения jQuery (['jQuery'], function ($) {// некоторые определения функции do_login () {$ .post ('/sessions/create', {uname: $ ("#uname"). Val (), пароль: $ ("#password"). Val ()}, function (data) {//}); }); // определение определения других модулей (function () {// Некоторые определения возвращают {xx: xx};});Rails не применяет JS -погрузчик. С одной стороны, новая версия Rails Asset Pipe будет упаковывать все файлы JS в один файл JS, без нескольких статуса загрузки JS. С другой стороны, Turbolink использует так называемую технологию PJAX со смешанной похвалой и критикой. Ссылка по умолчанию изменяется на метод AJAX и получает только часть BOD HTML, а часть головки остается неизменной, так что загрузка JS выполняется только тогда, когда веб -сайт открывается в первый раз.
Случай 1: Загрузка файлов JavaScript
<script src = "./ js/require.js"> </script> <cript> require (["./ js/a.js", "./js/b.js"], function () {myfunctiona (); myfunctionb ();}); </script>Параметр массива строковой массивы в методе «Требуется» может разрешить различные значения. Когда строка заканчивается ".js" или начинается с "/", или является URL, requirejs будет думать, что пользователь напрямую загружает файл JavaScript. В противном случае, когда строка аналогична «My/Module», она будет думать, что это модуль, и загрузит файл JavaScript, где соответствующий модуль расположен с BaseUrl и путями, настроенными пользователем. Раздел конфигурации будет подробно описан позже.
Здесь следует указать, что по умолчанию requirejs не гарантирует, что myfunctiona и myfunctionb должны быть выполнены после загрузки страницы. Когда необходимо убедиться, что сценарий выполняется после загрузки страницы, requirejs предоставляет независимый модуль Domready. Вам необходимо скачать этот модуль с официального веб -сайта requirejs, который не включен в edrejs. С помощью модуля Domready код в случае 1 лишь слегка изменен и зависимость от Domready.
Случай 2: выполнить JavaScript после загрузки страницы
<script src = "./ js/require.js"> </script> <cript> require (["domready!", "./js/a.js", "./js/b.js"], function () {myfunctiona (); myfunctionb ();}); </script>После выполнения кода Case 2 через Firebug вы можете увидеть, что redize JOS вставит тег <Script> на текущей странице как A.JS и B.JS, соответственно, объявляет тег <Script> для загрузки файлов javaScript асинхронно. Async Attribute в настоящее время поддерживается большинством браузеров, что указывает на то, что файл JS в этом теге <Script> не будет блокировать загрузку другого содержимого страницы.
Случай 3: <Script> вставлен по требованиям
<script type = "text/javascript" charset = "utf-8" async = "" data-requirecontext = "_" data-requiremodule = "js/a.js" src = "js/a.js"> </script>
Использовать требования для определения модулей JavaScript
Что отличается от традиционного кода JavaScript здесь, так это то, что он не требует доступа к глобальным переменным. Модульная конструкция позволяет коду JavaScript передать эти «глобальные переменные» в качестве параметров через зависимости, когда ему необходимо получить доступ к «глобальным переменным» и избежать доступа или объявления глобальных переменных или функций в реализации, эффективно избегая большого количества и сложного управления пространством имен.
Как указано в спецификации AMD CommonJS, определение модулей JavaScript реализуется с помощью метода определения.
Давайте сначала посмотрим на простой пример. Этот пример создает объекты студентов в основной программе и помещает объекты студентов в класс, определяя студенческий модуль и модуль класса.
Случай 4: Студенческий модуль, Student.js
define (function () {return {createstudent: function (name, gender) {return {name: name, gender: gender};}};}); });Случай 5: модуль класса, class.js
define (function () {var allStudents = []; return {classid: "001", department: "computer", addToclass: function (студент) {allStudents.push (студент);}, getClassSize: function () {return allStudents.length;}};});Случай 6: Основная программа
require (["Js/Student", "js/class"], function (студент, clz) {clz.addtoclass (student.createstudent ("jack", "male")); clz.addtoclass (student.createStudent («Роза», «Женщина»)); консоли.log (clz.getclassize ();Студенческий модуль и модуль класса являются независимыми модулями. Давайте определим новый модуль. Этот модуль зависит от учеников и модулей класса, так что логика основной части программы также может быть обернута.
Случай 7: Модуль менеджера, который опирается на студенческие и классовые модули, Manager.js
Define (["JS/Student", "JS/Class"], Function (Student, Clz) {return {addnewStudent: function (имя, пол) {clz.addtoclass (student.createstudent (имя, пол));}, getmyclasssize: function () {return clz.getclesize ();};Случай 8: новая основная программа
require (["js/manager"], function (Manager) {Manager.AddnewStudent ("jack", "male"); Manager.AddnewStudent ("rose", "wome"); console.log (Manager.getMyclasssize ()); // output 2});Через приведенный выше пример кода мы четко поняли, как писать модуль, как используется этот модуль и как определить зависимости между модулями. Есть еще несколько советов:
Постарайтесь не предоставлять идентификатор модуля. Как указано в спецификации AMD, этот идентификатор является опцией. Если предоставлена, на миграционность модуля будет затронута при реализации requirejs, а изменения местоположения файла приведут к изменению идентификатора вручную.
Каждый файл JavaScript определяет только один модуль. Алгоритм поиска для имени модуля и пути файла определяет, что этот метод является оптимальным. Несколько модулей и файлов будут оптимизированы оптимизатором. Избегайте круговых зависимостей модулей. Если этого действительно невозможно избежать, вы можете добавить зависимости от модулей «требовать» в модуле и использовать их непосредственно в коде.
Требуется ("DevingModulenAme")Настройка requirejs:
В предыдущем введении мы, кажется, упустили из виду основной вопрос: как произошло имя модуля? Когда мне нужен модуль, как этот модуль отображается в определенном файле JavaScript? Это включает в себя, как настроить requirejs.
Самый простой способ загрузки requirejs показан в случае 2. Если метод, показанный в случае 10, Data-Main указывает A /js/main.js в папке, параллельной текущему каталогу index.html в качестве входа в программу, а каталог /JS также будет использоваться в качестве Baseurl при определении других модулей.
Случай 9: загрузка reft.js
<script data-main = "js/main" src = "scripts/require.js"> </script>
Следовательно, все зависимости модуля в наших предыдущих примерах могут быть удалены из «JS/» и написать «Студент», «класс», «менеджер» и т. Д. Более прямой способ отображения указанного BaseUrl и Paths - использовать require.config для установки этих параметров. Как показано в случае десяти.
Случай 10. Настройка requirejs
<script type = "text/javascript" src = "./ js/require.js"> </script> <script type = "text/javascript"> require.config ({baseurl: "./js", paths: {"some": "some/v1"}, waitseconds: 10}); require (["some/module", "my/module", "./js/a.js"], function (somemodule, mymodule) {}); </script>Baseurl указывает базовый URL всех модулей. Например, сценарий, загруженный «My/Module», на самом деле является /дж/мм/module.js. Обратите внимание, что файлы, заканчивающиеся в .js, не будут использовать BaseUrl при загрузке, они все равно будут использовать относительный путь, в котором находится текущий индекс.html, поэтому вам все еще нужно добавить »./js/». Если BaseUrl не указан, будет использоваться путь, указанный в данных данных.
Путь, определенный в путях, используется для замены пути в модуле, например, некоторый/модуль в приведенном выше примере. Конкретный путь файла JavaScript IS /js/some/v1/module.js. Второстальные секунды указывают, сколько времени требуется для загрузки файла JavaScript. По умолчанию 7 секунд без указания пользователя.
Другой важной конфигурацией являются пакеты, которые могут указывать другие структуры каталога, которые соответствуют спецификации AMD CommonJS, что обеспечивает богатую масштабируемость. Такие модули, как Dojo, jQuery и т. Д. Также могут быть загружены с помощью requirejs через эту конфигурацию.
Другие настраиваемые параметры включают в себя локали, контекст, DEPS, обратный вызов и т. Д. Заинтересованные читатели могут проверить соответствующие документы на официальном веб -сайте requireJS.