Создание удаленного виджета jQuery UI с зависимостями requirejs - PullRequest
Новая
       2

Создание удаленного виджета jQuery UI с зависимостями requirejs

0 голосов
/ 11 января 2012

Я создал виджет пользовательского интерфейса jQuery, который зависит от некоторых других пользовательских модулей JavaScript. Я извлекаю эти модули, используя requirejs во время метода _create виджета. Это на самом деле прекрасно работает, если мои конечные потребители определяют мое свойство «data-main». Однако в ситуации, когда мои потребители сами используют requirejs и определяют свое собственное свойство data-main, это не работает.

Поскольку я использую requirejs для внедрения скриптов через мой виджет с совершенно другого сервера, я столкнулся с несколькими проблемами, связанными с обычным способом requirejs справиться с этим.

  • Во-первых, я не могу использовать файл package.json, если не предположу, что у всех моих потребителей есть package.json, который содержит те же ресурсы, что и у меня. Вдобавок ко всему, у меня есть URL-адреса DEV, TEST и PROD сервера, с которыми нужно иметь дело.
  • Во-вторых, я не могу использовать require.config для установки моего baseUrl во время загрузки на их сервер, потому что он может нарушить все, что они используют, требуют.

Текущая реализация, с которой я работаю, требует, чтобы потребитель добавил ссылку на скрипт, которая требуется для моего основного расположения данных (внешний сервер). Затем добавьте скрипт ref в мой виджет (внешний сервер). Это работает, потому что никто в моей компании даже не слышал о requirejs :). Когда я начинаю показывать им, как объединить весь их код в повторно используемые модули JavaScript, мое решение не работает.

Я хочу предложить решение, тогда как конечный потребитель может просто сослаться на мой единственный JavaScript-виджет, который, в свою очередь, загружает все, что ему нужно для работы.

Есть предложения о том, как это сделать? Я думал о том, чтобы взломать мою собственную версию require со статической базой данных, а затем просто предположить, что они могут иметь несколько библиотек requirejs. Я бы не хотел делать это ... но я не могу придумать лучшего способа.

1 Ответ

1 голос
/ 12 января 2012

Вот что я собираюсь сделать ...

Пара заметок:

  • Я использую шаблон фабрики виджетов пользовательского интерфейса jQuery (но это не совсем виджет)
  • Код виджета находится на удаленном сервере, и потребители только ссылаются на него, но не скачивают его
  • Я использую requirejs для загрузки зависимостей виджетов
  • Я хочу максимально удобного использования для потребителя-разработчика

Поскольку требуется, чтобы мой виджет пользовательского интерфейса jQuery был загружен как можно скорее, чтобы у потребителя был контекст виджета сразу ($ (селектор) .mywidget), я решил решить мою проблему внутри метода _create.

Этот код в основном устанавливает requirejs, если он не существует, а затем использует его для установки массива требований, которые должен использовать вышеупомянутый виджет. Это позволяет мне предположить, что конечный пользователь может ссылаться на мой скрипт «виджета» по URL, привязать атрибут « data-requiremodule » с тем же именем и получить полный список удаленных зависимостей. 

 _create: function () {
   var widget = this;
   widget._establish(widget, function () {
     widget._install(widget);
   });
 },

 _getBaseURL: function (scriptId, callback) {
   var str = $('script[data-requiremodule="' + scriptId + '"]').attr('src');
   if (callback) callback(str.substring(str.search(/scripts/i), 0));
 },       

 _require: function (requirementAry, baseUrl, callback) {
   require.config({ baseUrl: baseUrl });
   require(requirementAry, function () {
     if (callback) callback();
   });
 },

 _establish: function (widget, callback) {
   if (typeof require === 'undefined') {
     widget._getBaseURL(widget._configurations.widgetName, function (baseUrl) {
       var requireUrl = baseUrl + 'scripts/require.min.js';
       baseUrl = baseUrl + 'scripts/';
       $.getScript(requireUrl, function (data, textStatus) {
         widget._require(widget._configurations.requiredLibs, baseUrl, function () { 
           callback(textStatus); 
         });
       });
     });
   }
 },

Я не показываю здесь свой объект "_configurations" ... но вы поняли идею. Я надеюсь, что это помогает кому-то еще, кроме меня:).

...