Erstellen eines Remote JQuery UI -Widgets mit Anforderungen

Question

Ich habe ein JQuery UI -Widget erstellt, das von einigen anderen benutzerdefinierten JavaScript -Modulen abhängig ist. Ich rufe diese Module unter Verwendung von RequestJs während der "_create" -Methode des Widgets ab. Dies funktioniert tatsächlich großartig, wenn ich meine Endverbraucher meine "Datenmark" -Fobilie definieren lasse. In der Situation, in der meine Verbraucher Anforderungen selbst einsetzen und ihre eigene "Daten-Main" -Fotie definieren, funktioniert dies nicht.

Da ich ReformeJs verwende, um Skripte über mein Widget von einem völlig anderen Server zu injizieren, stieß ich mit der normalen Art und Weise, wie ich damit umgegangen bin, auf einige Probleme zu.

• Erstens kann ich keine Paket.json -Datei verwenden, es sei denn, ich gehe davon aus, dass alle meine Verbraucher ein Paket haben.json, das genau die gleichen Ressourcen enthält wie ich. Darüber hinaus habe ich URLs von Entwicklungs-, Test- und Prod -Server -URLs zu tun.
• Zweitens kann ich fordern.config nicht verwenden, um meine BasisaRl während einer Last auf ihrem Server festzulegen, denn es kann alles unterbrechen, was sie verwenden, für das sie benötigen.

Die aktuelle Implementierung, die ich habe, erfordert, dass der Verbraucher eine Skriptreferenz hinzufügt, die mit meinem Data-Main-Standort (externer Server) erforderlich ist. Fügen Sie dann meinem Widget (externer Server) einen Skript -Ref hinzu. Dies funktioniert, weil niemand in meiner Firma jemals von Anforderungen gehört hat :). In dem zweiten, dass ich ihnen zeige, wie man ihren gesamten Code in wiederverwendbare JavaScript -Module bündelt. Meine Lösung ist kaputt.

Ich möchte eine Lösung finden, während der Endverbraucher einfach auf mein einzelnes JavaScript -Widget verweisen kann, was wiederum alles lädt, was er für die Funktionsweise benötigt.

Irgendwelche Vorschläge, wie das geht? Ich habe darüber nachgedacht, meine eigene Version von Request mit einem statischen Datenmark zu hacken, und dann davon ausgehen, dass sie mehrere Anforderungen haben können. Ich würde das hassen, das zu tun ... aber ich kann mir nicht wirklich einen besseren Weg vorstellen.

Answer 1

Hier ist, was ich tun werde ...

Ein paar Notizen:

• Ich verwende das JQuery UI -Widget -Werksmuster (aber dies ist nicht gerade ein Widget)
• Der Widget -Code lebt auf einem Remote -Server, und Verbraucher verweisen nur auf ihn, laden Sie ihn nicht herunter
• Ich benutze Anforderungsjagd, um Widget -Abhängigkeiten zu laden
• Ich möchte die größte Benutzerfreundlichkeit für den konsumierenden Entwickler

Da mein JQuery UI -Widget so schnell wie möglich geladen wird, so dass der Verbraucher den Kontext des Widgets sofort hat ($ (Selector) .myWidget) habe beschlossen, mein Problem innerhalb der _create -Methode anzugehen.

Dieser Code installiert im Grunde genommen Anforderungen, wenn er nicht vorhanden ist, und installiert ihn dann eine Reihe von Anforderungen, die das oben genannte Widget konsumieren muss. Auf diese Weise können ich davon ausgehen, dass der Endbenutzer auf mein "Widget" -Skript per URL verweisen kann, anschlüssig auf einem "Data-Requiremodule"gleichnamigem Attribut und erhalten Sie eine vollständige Liste der Remote -Abhängigkeiten.

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

Ich zeige hier nicht mein "_configurations" -Objekt ... aber Sie haben die Idee. Ich hoffe das hilft jemand anderem außer mir :).