Cajon — это загрузчик модулей JavaScript для браузера, который может загружать модули CommonJS/node и AMD. Он построен на основе RequireJS.
Вы можете использовать его для кодирования модулей для своего проекта в стиле CommonJS/node, а затем использовать оптимизатор RequireJS для сборки всех модулей в пакет, совместимый с AMD. Это позволяет вам затем использовать небольшую прокладку AMD API, например миндаль, чтобы получить хорошо оптимизированный код без необходимости использования полноценного загрузчика времени выполнения.
Зачем использовать это вместо RequireJS? Некоторые возможные причины:
define ( function ( require ) {
/*module code here */
} ) ;
В противном случае вам следует использовать RequireJS или другой загрузчик AMD.
Обратите внимание на раздел «Ограничения» ниже. Скорее всего, вы будете скрежетать зубами от разочарования, если не прислушаетесь к ним.
Если вам не нравится этот конкретный загрузчик, но нравится идея двойного загрузчика модулей в стиле AMD и CommonJS/node, то вам может понравиться загрузчик Inject от LinkedIn.
Кахон состоит из:
//@ sourceURL=
для указания имен сценариев для отладчиков сценариев. Cajon будет использовать подход XHR+eval только в том случае, если запрос относится к тому же домену, что и HTML-документ. Если считается, что запрос сценария находится в другом домене, он просто делегирует функцию requirejs.load() по умолчанию, где он загрузит сценарий с тегом и ожидает, что он будет в формате AMD или традиционный сценарий «браузерных глобальных переменных».
Вы можете переопределить это поведение, чтобы использовать XHR для некоторых междоменных запросов, если вы знаете, что ваши пользователи будут использовать браузеры и серверы с поддержкой CORS. См. раздел «Конфигурация» ниже.
Извлекаемые сценарии заключаются в следующую оболочку AMD:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
и это позволяет использовать __dirname и __filename внутри этого завернутого кода.
Cajon присваивает переменной cajon
то же самое, что и переменной requirejs
, поэтому вы можете использовать ее, если хотите конкретно указать использование Cajon. Однако оптимизатор requirejs понимает только require
, requirejs
и define
, но не cajon
. Это особенно важно, если вы используете опцию mainConfigFile
оптимизатора.
Лучше всего просто использовать глобальное require
, если вы хотите, чтобы код был переносим для RequireJS, Almond и других загрузчиков AMD, и выполнять обнаружение cajon
только в том случае, если вы хотите знать, доступен ли кахон.
Существует demo
каталог, в котором показаны примеры использования, но в основном поместите cajon.js в тег и загрузите модули через
require([])
. Однако обратите внимание на раздел «Ограничения» ниже.
Чтобы оптимизировать демо, запустите:
node tools/r.js -o demo/app.build.js
Это создаст оптимизированный проект в demo-built
каталоге. Все модули в выходных данных сборки будут преобразованы в стиль AMD, чтобы их можно было загружать в междоменном режиме без особых требований к CORS.
Профиль сборки app.build.js требует, чтобы оптимизатор r.js был версии 2.0.2 или новее, поскольку он использует опцию сборки cjsTranslate
версии 2.0.2, которая преобразует модули CommonJS/node в оболочку define() для сборки.
Если используете Воло:
volo add cajon
Если вы используете npm:
npm install cajon
Или URL-адрес последней версии:
https://raw.github.com/requirejs/cajon/latest/cajon.js
Так что не ждите, что npm install
какой-то код, а затем потребует его с помощью кахона.
Node использует несколько поисков пути node_modules
для поиска кода, и это неэффективно в контексте браузера. Кроме того, многие модули узла зависят от стандартной библиотеки узла или среды узла, которые по умолчанию недоступны в веб-браузере.
Если вы хотите использовать какой-либо код, установленный npm, и знаете, что он будет работать в браузере, вы можете заставить его работать с Cajon, но вам, вероятно, придется использовать конфигурацию paths , map и packages requirejs, чтобы заставить его работать. работа.
Модульные системы CommonJS/node — это синхронные локальные файловые системы ввода-вывода. Таким образом, они допускают такие конструкции:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
Первый пример не будет работать в среде браузера AMD, поскольку все зависимости должны быть известны, загружены и выполнены до запуска кода. Если «a» и «b» еще не находятся в этом состоянии, первый пример, скорее всего, выдаст ошибку.
Второй пример может работать, но знайте, что загрузчик AMD загрузит и выполнит «a» и «b» перед запуском этого кода.
Если вы используете решение во время выполнения для получения зависимости, используйте метод обратного вызова require(), поддерживаемый загрузчиками AMD:
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
Или рассмотрите возможность создания плагина-загрузчика AMD, который может выполнять логику принятия решений, но при этом рассматриваться как зависимость от одного строкового литерала:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
Плагины require и загрузчика в стиле обратного вызова можно использовать с Cajon, поскольку он просто использует requirejs за кулисами.
Cajon будет использовать подход XHR+eval только в том случае, если запрос относится к тому же домену, что и HTML-документ. Вы можете переопределить это поведение, если знаете, что будут использоваться браузеры и серверы с поддержкой CORS.
Настройте функцию useXhr
в конфигурации cajon
, переданной загрузчику:
require . config ( {
cajon : {
useXhr : function ( url , protocol , hostname , port ) {
//Return true if XHR is usable, false if the
//script tag approach to an AMD module/browser globals
//script should be used.
//url is the url being requested.
//protocol, hostname and port area all values from the
//current page that is using cajon. Compare them with
//what is in `url` to make your decision.
}
}
} ) ;
Если вам нужно настроить каждый объект XHR перед отправкой запроса, вы можете реализовать метод onXhr
, который вызывается после xhr.open(), но до настройки xhr.onreadystatechange() и до вызова xhr.send(). :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
Массачусетский технологический институт
Кодекс поведения jQuery Foundation.