Construire un widget jQuery UI à distance avec dépendances requirejs

Question

J'ai créé un widget jQuery UI qui dépend d'autres modules JavaScript personnalisés. Je ces modules à l'aide aille chercher requirejs au cours de la méthode « _create » du widget. Cela fonctionne en fait bien si, j'ai mes consommateurs finaux définissent ma propriété « données-principales ». Cependant, dans la situation où les consommateurs utilisent mes requirejs eux-mêmes, et la définition de leurs propres propriété « données principale », cela ne fonctionne pas.

Depuis que je suis en utilisant des scripts requirejs à injectent via mon widget de partir d'un serveur totalement différent, je rencontre quelques problèmes avec la façon normale de requirejs de traiter cette question.

• Tout d'abord, je ne peux pas utiliser un fichier package.json à moins que je suppose que tous mes consommateurs ont une package.json qui contient exactement les mêmes ressources que moi. En plus de cela, j'ai DEV, TEST et URL serveur PROD à traiter.
• Deuxièmement, je ne peux pas utiliser require.config pour régler mon baseUrl lors d'une charge sur leur serveur, car il peut tout casser qu'ils utilisent pour exiger.

La mise en œuvre actuelle je travaille exige que le consommateur d'ajouter une référence de script pour exiger avec mon emplacement de données principal (serveur externe). Ensuite, ajoutez un ref script à mon widget (serveur externe). Cela fonctionne parce que personne d'autre à ma compagnie n'a jamais entendu parler de requirejs :). Le deuxième, je commence à leur montrer comment regrouper tous leur code JavaScript en modules réutilisables ma solution est brisée.

Je veux trouver une solution alors que le consommateur final peut simplement faire référence à mon seul JavaScript widget qui charge à son tour tout ce qu'il a besoin pour fonctionner.

Toutes les suggestions sur la façon de le faire? J'ai pensé à ma propre version de piratage de besoin avec les données statiques-principaux, puis simplement supposer qu'ils peuvent avoir plusieurs requirejs libs. Je ne voudrais pas faire ... mais je ne peux pas vraiment penser à une façon meilleure.

Answer 1

Voici ce que je vais faire ...

Couple de notes:

• J'utilise le modèle d'usine de jQuery UI (mais ce n'est pas exactement un widget)
• La vie de code widget sur un serveur distant et les consommateurs référence seulement, ne télécharger pas
• J'utilise requirejs pour charger les dépendances widget de
• Je veux la plus grande facilité d'utilisation pour le développeur consommation

Comme il est nécessaire que mon jQuery UI widget charger dès que possible afin que le consommateur a le contexte du widget tout de suite ($ (sélecteur) .mywidget) J'ai décidé d'aborder mon problème à l'intérieur de la méthode _create.

Ce code installe essentiellement requirejs si elle n'existe pas, utilise pour installer un tableau des besoins que les besoins de widget ci-dessus à consommer. Cela me permet de supposer que l'utilisateur final peut faire référence à mon script « Widget » par URL, amure sur un « données requiremodule » attribut du même nom, et d'obtenir une liste complète des dépendances à distance.

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

Je ne suis pas montrer mon objet « _configurations » ici ... mais vous voyez l'idée. J'espère que cela aide quelqu'un d'autre à côté de moi.)