Comment puis-je injecter Javascript (y compris Prototype.js) dans d'autres sites sans encombrer l'espace de noms global?

Question

Je suis actuellement sur un projet qui est un grand site qui utilise la bibliothèque Prototype, et il y a déjà une quantité énorme de code Javascript.

Nous travaillons maintenant sur un morceau de code qui sera "injecté" dans les sites d'autres personnes (les gens ajoutent une balise <script> dans leurs sites) qui exécutera ensuite notre code et ajoutera un tas d'éléments DOM et la fonctionnalité de leur site. Cela aura de nouveaux morceaux de code, et réutilisera également beaucoup du code que nous utilisons sur notre site principal.

Le problème que j'ai, c'est qu'il n'est bien sûr pas cool d'ajouter simplement un <script> qui inclura Prototype dans les pages des gens. Si nous le faisons dans une page qui utilise déjà le framework ANY, nous sommes sûrs de tout bousiller. JQuery nous donne la possibilité de "renommer" l'objet $, afin qu'il puisse gérer cette situation décemment, sauf évidemment pour le fait que nous n'utilisons pas jQuery, donc nous devrons migrer tout.

En ce moment je suis envisage un certain nombre de choix laid, et je ne sais pas ce qui est mieux ...

• tout Rewrite à utiliser jQuery, avec un objet $ renommé partout.
• Création d'une "nouvelle" bibliothèque de prototypes avec seulement le sous-ensemble que nous utiliserions dans le code "injecté", et renommer $ en quelque chose d'autre. Ensuite, je devrais adapter les parties de mon code qui seraient partagées d'une manière ou d'une autre.
• Ne pas utiliser du tout une bibliothèque dans du code injecté, pour le garder aussi propre que possible, et réécrire le code partagé pour n'utiliser aucune bibliothèque du tout. Cela dégénérerait évidemment en nous créant notre propre Frankenstein d'une bibliothèque, ce qui est probablement le pire des cas.

Je me demande ce que les gars vous pensez que je pouvais faire, et aussi s'il y a une possibilité magique qui résoudrait tous mes problèmes ...

Par exemple, pensez-vous que je pourrais utiliser quelque chose comme Caja/Cajita à bac à sable mon propre code et l'isoler du reste du site, et avoir Prototype à l'intérieur de là? Ou suis-je complètement manquer le point avec ça?

J'ai lu aussi sur une technique de bookmarklets, étiez-vous ajoutez votre code comme ceci:

(function() { /* your code */ })(); 

Et puis votre code est tout à l'intérieur de votre fonction anonyme et vous n'avez pas touché l'espace de noms global du tout . Pensez-vous que je pourrais faire un fichier contenant:

(function() { 
    /* Full Code of the Prototype file here */ 
    /* All my code that will run in the "other" site */ 

    InitializeStuff_CreateDOMElements_AttachEventHandlers(); 
})(); 

Est-ce que ça marche? Cela permettrait-il de ne pas encombrer l'espace de noms global et de ne pas détruire la fonctionnalité sur un site utilisant jQuery, par exemple?

Ou est-ce que le prototype est trop complexe pour l'isoler comme ça?
(NOTE: Je pense que je sais que cela créerait des fermetures partout et c'est plus lent, mais je ne me soucie pas trop des performances, mon code ne fait rien de si complexe)

Answer 1

Si vous injectez votre code Dans d'autres sites, il faut soit inclure un prototype, soit ne pas utiliser de bibliothèque du tout.

Toute autre option est, à mon avis, beaucoup trop intrusive.

Answer 2

Daniel,

Je me présente le même problème pour certaines des mêmes raisons. Heureusement, je suis capable d'utiliser jquery. Ce que je veux faire est de créer un seul fichier js qui chargera une instance de jquery et toutes les bibliothèques dépendantes dont j'ai besoin. Ensuite, je veux charger css de la même manière.

J'ai trouvé un script qui va charger ces fichiers dans le DOM, mais ils ne semblent pas fonctionner. Voici ce que je me sers:

function loadjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
    var fileref=document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
} 
if (typeof fileref!="undefined") 
    document.getElementsByTagName("head")[0].appendChild(fileref) 
} 

Je peux voir dans Firebug que le css est chargé, mais le contenu de mon fichier CSS ne sont pas à venir à travers. J'avais espéré pouvoir charger dynamiquement les bibliothèques dont j'avais besoin en fonction des outils utilisés par ce WIDGET. Donc, je voudrais faire une logique programmatique qui permettrait de déterminer quelles bibliothèques et fichiers CSS doivent être "importés".

Je ne sais pas si cette ligne de pensée joue dans vos efforts, mais j'aimerais avoir vos pensées, ou voir où vous finissez par aller avec cela.