Construyendo un widget de interfaz de usuario de jQuery remoto con dependencias de requisitos

Question

He creado un widget jQuery UI que depende de otros módulos JavaScript personalizados. Obtengo estos módulos usando requiradores durante el método "_create" del widget. Esto realmente funciona muy bien si, tengo a mis consumidores finales, definen mi propiedad de "datos principales". Sin embargo, en la situación en la que mis consumidores están utilizando los requisitos por su cuenta, y definiendo su propia propiedad de "datos principales", esto no funciona.

Dado que estoy usando requisitos para inyectar scripts a través de mi widget desde un servidor totalmente diferente, me encuentro con algunos problemas con la forma normal de Requirjs de lidiar con esto.

• Primero, no puedo usar un archivo Packle.json a menos que asumo que todos mis consumidores tienen un paquete. Json que contiene exactamente los mismos recursos que yo. Además de eso, tengo URL de servidor Dev, Test y Prod para tratar.
• En segundo lugar, no puedo usar requerir.

La implementación actual que tengo que trabajo requiere que el consumidor agregue una referencia de script para requerir con mi ubicación de mayor dato (servidor externo). Luego agregue una referencia de script a mi widget (servidor externo). Esto funciona porque nadie más en mi empresa ha oído hablar de Requirjs :). En el momento en que empiezo a mostrarles cómo agrupar todo su código en módulos JavaScript reutilizables, mi solución está rota.

Quiero encontrar una solución, mientras que el consumidor final puede simplemente hacer referencia a mi widget de JavaScript único, que a su vez carga todo lo que necesita para funcionar.

¿Alguna sugerencia sobre cómo hacer esto? He pensado en piratear mi propia versión de Requerir con un Data Data Mayor estático, solo supongo que pueden tener múltiples LIBS requeridos. Odiaría hacer eso ... pero realmente no puedo pensar en una mejor manera.

Answer 1

Esto es lo que voy a hacer ...

Un par de notas:

• Estoy usando el patrón de fábrica de widget jquery ui (pero esto no es exactamente un widget)
• El código del widget vive en un servidor remoto y los consumidores solo lo hacen referencia, no lo descargue
• Estoy usando requiradores para cargar dependencias de widgets
• Quiero la mayor facilidad de uso para el desarrollador consumidor

Dado que se requiere que mi widget jQuery UI se cargue lo antes posible para que el consumidor tenga el contexto del widget de inmediato ($ (selector) .mywidget) He decidido abordar mi problema dentro del método _create.

Básicamente, este código instala los requisitos si no existe, luego lo usa para instalar una variedad de requisitos que el widget mencionado debe consumir. Esto me permite asumir que el usuario final puede hacer referencia a mi script "widget" por URL, tachar un "requiremódulo de datos"Atributo del mismo nombre y obtenga una lista completa de dependencias remotas.

 _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); 
         });
       });
     });
   }
 },

No estoy mostrando mi objeto "_configuraciones" aquí ... pero se entiende la idea. Espero que esto ayude a alguien más además de mí :).