2015-02-24 4 views
0

Я работаю над модулем 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 в первую очередь ...

ответ

0

I нашел следующий код в верхней части каждого модуля в jquery.ui:

(function(factory) { 
    if (typeof define === "function" && define.amd) { 
     // AMD. Register as an anonymous module. 
     define([ "jquery" ], factory); 
    } else { 
     // Browser globals 
     factory(jQuery); 
    } 
}(function($) {...}); 

а это означает jquery.ui проверки, когда глобальная функция AMD «определить» определяется и использует «Jquery», как AMD ссылки для модуля.

Он не будет использовать конфликт jquery на основе рекомендации requirejs в this и this.

И около how to use jQuery с AMD.

+0

Спасибо! Мне нужно было выяснить, как установить фигурные скобки, но модуль jPlayer, который я также использую, имеет очень похожий заголовок. Итак, теперь модули jQuery UI корректно включены в requireJS! К сожалению, метод перетаскиваемым(), кажется, не будет доступна в noConflict JQuery задается переменной Требовать() вызов ... вызов ___ JQuery («DIV # тест»). Перетаскиваемым() выдает сообщение об ошибке «undefined is not a function» ... Я думал, что модули jQuery UI будут регистрировать новые методы в существующем объекте jQuery? Это потому, что ___jQuery является noConflict и загружается перед пользовательским интерфейсом jQuery? – stefanS

+0

@stefanS, я полагаю, проблема связана с тем, как вы назвали/ссылались на каждый модуль. вам не нужно определять «прокладку» из-за поддержки модулей AMD. Не могли бы вы структурировать свои файлы и настроить файл конфигурации на основе [http://learn.jquery.com/jquery-ui/environments/amd/](http://learn.jquery.com/jquery-ui/environments/amd/) –

 Смежные вопросы

  • Нет связанных вопросов^_^