Я работаю над модулем JavaScript, который использует jQuery, некоторые функции jQuery UI (draggable) и jPlayer. Недавно я познакомился с requireJS для правильного управления зависимостями.Включить jQuery UI с requireJS с помощью noConflict jQuery
Я не хочу создавать конфликты с возможно уже существующей версией jQuery, которую использует сайт, содержащий мой сценарий. По этой причине я сопоставляю зависимости jQuery с модулем «jquery-private» с вызовом noConflict(), как описано в requireJS guide.
Поскольку пользовательский интерфейс jQuery занимает много места, я также хотел бы просто включить модули, которые я фактически использую. ui.draggable имеет зависимости ui.core, ui.mouse и ui.widget, поэтому мне нужно включить эти 4 модуля.
Моя проблема в том, что я хотел бы, чтобы модули jQuery UI и модуль jPlayer использовали мою собственную версию jQuery, но, очевидно, она недоступна глобальной переменной $ после того, как я вызвал метод noConflict(). К сожалению, ни jQuery UI, ни jPlayer не являются модулями AMD, поэтому мне нужно было создать их конфигурацию.
Вот мое определение зависимостей:
require.config({
baseUrl: 'javascript/modules',
paths: {
jquery: 'jquery-2.1.3',
jPlayer: 'jquery.jplayer',
uiCore: 'jquery.ui.core',
uiMouse: 'jquery.ui.mouse',
uiWidget: 'jquery.ui.widget',
uiDraggable: 'jquery.ui.draggable'
},
map: {
// '*' means all modules will get 'jquery-private'
// for their 'jquery' dependency.
'*': { 'jquery': 'jquery-private' },
// 'jquery-private' wants the real jQuery module
// though. If this line was not here, there would
// be an unresolvable cyclic dependency.
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
jPlayer: {
deps: ['jquery']
},
uiCore: {
deps: ['jquery']
},
uiMouse: {
deps: ['jquery','uiCore']
},
uiWidget: {
deps: ['jquery','uiCore']
},
uiDraggable: {
deps: ['jquery','uiCore','uiMouse','uiWidget']
}
}
});
require(["json","jquery","jPlayer","uiDraggable"], function(json,___jQuery,jplayer,uiDraggable) {
(...)
}
Очевидно, что этот код выдает ошибки, как переменную $ в модулях JQuery UI не определен.
Есть ли способ передать мой собственный объект jQuery для модулей? Главный ответ в другом потоке (How use require.js to load jQuery with noConflict) предполагает, что то, что я пытаюсь сделать, невозможно, но, возможно, есть и другой способ сделать это?
Если его нет, я, возможно, придется использовать глобальные переменные и сильно изменить включенные модули, которые отчасти делает его questionnable почему использовать библиотеку управления зависимостей, как requireJS в первую очередь ...
Спасибо! Мне нужно было выяснить, как установить фигурные скобки, но модуль jPlayer, который я также использую, имеет очень похожий заголовок. Итак, теперь модули jQuery UI корректно включены в requireJS! К сожалению, метод перетаскиваемым(), кажется, не будет доступна в noConflict JQuery задается переменной Требовать() вызов ... вызов ___ JQuery («DIV # тест»). Перетаскиваемым() выдает сообщение об ошибке «undefined is not a function» ... Я думал, что модули jQuery UI будут регистрировать новые методы в существующем объекте jQuery? Это потому, что ___jQuery является noConflict и загружается перед пользовательским интерфейсом jQuery? – stefanS
@stefanS, я полагаю, проблема связана с тем, как вы назвали/ссылались на каждый модуль. вам не нужно определять «прокладку» из-за поддержки модулей AMD. Не могли бы вы структурировать свои файлы и настроить файл конфигурации на основе [http://learn.jquery.com/jquery-ui/environments/amd/](http://learn.jquery.com/jquery-ui/environments/amd/) –