Предыдущая статья: Мы представили requirejs очень простой способ к модульному инструменту JS. Эта статья сообщит вам некоторые базовые знания в отношении requirejs, в том числе о том, как использовать API.
Базовый API
Требование будет определять три переменных: определить, требовать, requirejs, где требуется === requirejs, как правило, требуется короче, используя требование.
Определите из имени, вы можете видеть, что этот API используется для определения модуля
Требовать нагрузки зависимого модуля и выполняет загруженную функцию обратного вызова
A.JS в предыдущей статье:
define (function () {function fun1 () {alert ("it работает");} fun1 ();})Модуль определяется через функцию определения, а затем используется на странице:
требуется (["js/a"]);
Чтобы загрузить модуль (обратите внимание, что зависимость в требовании является массивом. Даже если есть только одна зависимость, вы должны использовать массив для его определения). Вторым параметром API API является обратный вызов, функция, которая используется для обработки логики после загрузки, например:
require (["js/a"], function () {alert ("загрузка закончен");})Загрузите файл
В предыдущих примерах модули загрузки были локальными JS, но в большинстве случаев JS, который необходимо загрузить веб -страницу, может поступать с локального сервера, других веб -сайтов или CDN, поэтому этот способ не может быть загружен. Давайте возьмем загрузку библиотеки jQuery в качестве примера:
require.config ({paths: {"jquery": ["http://libs.baidu.com/jquery/2.0.3/jquery"]}}) требуется (["jquery", "js/a"], функция ($) {$ (function () {alert ("Загрузка закончена");Это включает в себя require.config. tress.config используется для настройки места загрузки модуля. Проще говоря, это дать модулю более короткое и лучше запоминающееся имя. Например, отметьте адрес библиотеки JQUERY в Baidu как jQuery, чтобы вам нужно было написать [«jQuery»], когда требуется загрузить JS. Мы также можем настроить локальный JS, как это:
require.config ({paths: {"jQuery": ["http://libs.baidu.com/jquery/2.0.3/jquery"], "a": "js/a"}}) требуется (["jquery", "a"], функция ($) {$ () {alert ("загружается");Конфигурация путей сделает название нашего модуля более утонченным. Пути также имеют важную функцию, которая заключается в настройке нескольких путей. Если удаленная библиотека CDN не загружена успешно, локальная библиотека может быть загружена, например:
require.config ({paths: {"jquery": ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a": "js/a"}}) require (["jquery", "], функция ($) {$ () {alert alert") {) {alert ") {) {alert") {) {alert) {) {) {) {) {) {) {) {) {) {) {) {)})}})}}).После этой конфигурации, когда JQUERY Baidu не загружается успешно, JQUERY в локальном каталоге JS будет загружена
При использовании requirejs вам не нужно писать суффикс .js при загрузке модуля, и, конечно, вы не можете написать суффикс.
В функции обратного вызова в приведенном выше примере есть параметр $. Это выходная переменная модуля зависимости jQuery. Если вы полагаетесь на несколько модулей, вы можете написать несколько параметров, в свою очередь, для использования:
require (["jquery", "underscore"], function ($, _) {$ (function () {_.each ([1,2,3], оповещение);})})Если модуль не выводит значения переменной, нет никого. Постарайтесь написать выходной модуль впереди, чтобы предотвратить недоразумения, вызванные недоразумениями из -за недопонимания из -за недоразумений из -за недопонимания, когда позиция запуталась.
Глобальная конфигурация
Конфигурация require.config повторяется в примере выше. Если на каждую страницу добавлена конфигурация, она неизбежно будет выглядеть очень непристойной. Requirejs предоставляет функцию, называемую «основные данные». Сначала мы создаем 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"> </script>
Объясните, что тег сценария загрузки сценария requirejs добавляет атрибут данных. JS, указанный в этом атрибуте, будет обработан после загрузки reuqire.js. После того, как мы добавим необходимую конфигурацию к данным, мы можем заставить каждую страницу использовать эту конфигурацию, а затем страница может напрямую использовать необходимость для загрузки всех коротких имен модулей.
Data-Main также имеет важную функцию. Когда тег сценария указывает атрибут данных-MAIN, потребование по умолчанию выберите JS, указанный Data-Main в качестве пути корневого. Что это значит? Например, после настройки Data-Main = "js/main" выше, после того, как мы используем require (['jquery']) (не настроены пути jQuery), требуется автоматически загружать файл js/jquery.js вместо jQuery.js, что эквивалентно конфигурации по умолчанию:
require.config ({baseurl: "js"})Сторонние модули
Модули, загружаемые через требование, обычно необходимо соблюдать спецификации AMD, то есть использовать определение для объявления модулей, но в некоторых случаях вам необходимо загрузить не AMD-спецификации JS. В настоящее время вам нужно использовать другую функцию: Shim. Шим трудно понять, чтобы объяснить. Шим напрямую переводится как «Pad», что на самом деле имеет это значение. В настоящее время я в основном использую его в двух местах
1. Неустойчивый модуль модуля, нестандартный «PAD», в доступные модули. Например: в старой версии jQuery спецификация AMD не унаследована, поэтому мы не можем напрямую потребовать ["jQuery"]. В настоящее время необходим Шим. Например, если я использую библиотеку класса подчеркивания, но она не реализует спецификацию AMD, то мы можем настроить ее так.
require.config ({shim: {"underscore": {exports: "_";}}})После этой конфигурации мы можем обратиться к модулю подчеркивания в других модулях:
require (["Underscore"], function (_) {_.each ([1,2,3], оповещение);})Для не AMD модулей в форме плагина мы часто используем плагины jQuery, и эти плагины в основном не соответствуют спецификациям AMD, таким как плагин jQuery.form. В настоящее время вам нужно «подготовить» подключаемость формы в jQuery:
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, и некоторые расширенные функции будут упомянуты в будущем. Не пропустите их!