Теперь, require.js - мой любимый способ программировать JavaScript. Это разбивает код на части и легко управлять. Require.js Optimizer может помочь нам распределить более крупное приложение в несколько небольших приложений, подключить его через зависимости и, наконец, объединить его во время компиляции и упаковки. Эти причины побуждают нас использовать require.js.
Итак, давайте посмотрим, что требуют удивительных функций.
Совместим с CommonJS
AMD (спецификация определения асинхронного модуля) появляется из рабочей группы CommonJS. Commonjs стремится создать экосистему JavaScript. Важной частью CommonJS является транспорт/C, предшественник AMD, и require.js является реализацией этой спецификации.
Разница в синтаксисе между модулем CommonJS и модулем AMD в основном связана с необходимостью AMD для поддержки асинхронных особенностей браузера. Например: модуль CommonJS должен быть синхронизирован:
Кода -копия выглядит следующим образом:
var somemodule = require ("somemodule");
var nothermodule = require ("nothermodule");
exports.asplode = function () {
somemodule.dotehawesome ();
nothermodule.domoarawesome ();
};
Модуль AMD загружает модуль асинхронно, поэтому определение модуля требует массива в качестве первого параметра, а функция обратного вызова после загрузки модуля передается в качестве второго параметра.
Кода -копия выглядит следующим образом:
определить (["somemodule"], function (somemodule) {
возвращаться {
asplode: function () {
somemodule.dotehawesome ();
// это будет выполнено асинхронно
require (["nothermodule"], function (inomemodule) {
nothermodule.domoarawesome ();
});
}
};
});
Тем не менее, AMD также совместим с синтаксисом CommonJS в require.js. Обертывая модуль CommonJS с помощью функции AMD, вы также можете иметь модуль CommonJS в AMD, например:
Кода -копия выглядит следующим образом:
Определите (функция (требуется, экспорт, модуль)
var somemodule = require ("somemodule");
var nothermodule = require ("nothermodule");
somemodule.dotehawesome ();
nothermodule.domoarawesome ();
exports.asplode = function () {
somemodule.dotehawesome ();
nothermodule.domoarawesome ();
};
});
Фактически, require.js интерпретирует содержание модуля функции обратного вызова через функцию .toString, находит ее правильную зависимость и превращает его в обычный модуль AMD. Следует отметить, что если вы пишете модули таким образом, это может быть несовместимо с другими погрузчиками AMD, потому что это нарушает спецификацию AMD, но может понять, как этот формат написан хорошо.
То, что здесь происходит, требуется. JS действительно выполняет функцию. Тонка обратного вызова анализирует содержимое модуля и находит правильную зависимость, точно так же, как это, если это нормальный модуль AMD. Важно отметить, что если вы решите писать подобные модули, они, скорее всего, будут несовместимы с другими погрузчиками модуля AMD, поскольку это нарушает спецификацию AMD, но это хорошая идея, чтобы понять этот формат!
CDN обратно
Еще одно скрытое требование. Мы можем достичь этого с помощью require.config:
Кода -копия выглядит следующим образом:
requirejs.config ({
Пути: {
jQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jQuery'
]
}
});
Нет зависимостей? Объект буквального? без проблем!
Когда вы пишете модуль, который не имеет зависимостей и просто возвращает объект, который содержит некоторые функциональные функции, мы можем использовать простой синтаксис:
Кода -копия выглядит следующим образом:
определять({
forcechoke: function () {
},
forcelighting: function () {
},
Forcerun: function () {
}
});
Это просто и полезно, если модуль - это просто набор функций или просто пакет.
Круговая зависимость
В некоторых случаях нам может понадобиться функции в модулях Modulea и Modulea, чтобы полагаться на некоторые приложения. Это круговая зависимость.
Кода -копия выглядит следующим образом:
// js/app/modulea.js
Определите (["require", "app/app"],
функция (require, app) {
возвращаться {
foo: function (title) {
var app = require ("app/app");
return app.something ();
}
}
}
);
Получите адрес модуля
Если вам нужно получить адрес модуля, вы можете сделать это ...
Кода -копия выглядит следующим образом:
var path = require.tourl ("./ style.css");
Базовый
Обычно при проведении модульных тестов ваш исходный код может быть помещен в папку, аналогичную SRC, и в то же время ваш тест может быть помещен в папку, аналогичную тестам. Это может быть сложно получить правильную тестовую конфигурацию.
Например, у нас есть файл index.html в папке Tests и нужно загружать тесты/spec/*. JS локально. И предположить, что весь исходный код находится в SRC/JS/*. JS, и в этой папке есть Main.js.
В index.html данные не установлены при загрузке.
Кода -копия выглядит следующим образом:
<script src = "src/js/vendor/require.js"> </script>
<Скрипт>
require (["../src/js/main.js"], function () {
require.config ({
baseurl: "../src/js/"
});
требовать([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], function () {
// запустить тестовую структуру
});
});
</script>
Вы можете обнаружить, что main.js загружен. Однако, поскольку данные не установлены, нам нужно сформулировать Baseurl, как мы хотим. При использовании Data-Main Baseurl будет автоматически устанавливать в соответствии с установленным файлом.
Здесь вы можете увидеть main.js загружен. Однако, поскольку он не загружает основной тег сценария данных, вы должны указать базу. Когда данные в основном используются для BaseUrl, выводятся из местоположения в основном файле. Настраивая Baseurl, мы можем легко сохранить тестовый код и код приложения отдельно.
Jsonp
Мы можем справиться с терминалами JSONP, как это:
Кода -копия выглядит следующим образом:
требовать( [
"http://someapi.com/foo?callback=define"
], function (data) {
console.log (data);
});
Для библиотек, не являющихся AMD, используйте Shim для решения
По многим запросам нам нужно использовать не AMD библиотеки. Например, магистраль и подчеркивание не адаптируются к спецификации AMD. И JQUERY на самом деле просто определяет себя как глобальную переменную, называемую JQUERY, поэтому вам не нужно ничего делать с JQUERY.
К счастью, мы можем использовать конфигурацию SHIM для решения этой проблемы.
Кода -копия выглядит следующим образом:
require.config ({
Пути: {
«Магистраль»: «Продавец/магистраль»,
«Подчеркивается»: «Продавец/подчеркивание»
},
Shim: {
"Сэкова": {
Deps: ["Подчеркнуть"],
Экспорт: "Магистраль"
},
"Подчеркнуть": {
Экспорт: "_"
}
}
});