Создание удаленного виджета пользовательского интерфейса jQuery с зависимостью requirejs

StackOverflow https://stackoverflow.com/questions/8811034

Вопрос

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

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

  • Во -первых, я не могу использовать файл package.json, если я не предполагаю, что у всех моих потребителей есть Package.json, который содержит те же ресурсы, что и я. Кроме того, у меня есть URL -адреса Dev, Test и Prod Server.
  • Во -вторых, я не могу использовать require.config для установки моего Baseurl во время загрузки на их сервере, потому что он может сломать все, что они используют, необходимо.

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

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

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

Это было полезно?

Решение

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

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

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

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

Этот код, в основном, установлен, требуется, если он не существует, то использует его для установки массива требований, которые необходимо потреблять вышеупомянутый виджет. Это позволяет мне предположить, что конечный пользователь может ссылаться на мой сценарий «виджета» по 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" здесь ... но вы поняли идею. Я надеюсь, что это поможет кому -то другому, кроме меня :).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top