Come posso iniettare Javascript (incluso Prototype.js) in altri siti senza ingombrare lo spazio dei nomi globale?

Question

Attualmente sono su un progetto che è un grande sito che utilizza la libreria Prototype e c'è già un'enorme quantità di codice Javascript.

Stiamo lavorando su un pezzo di codice che andranno "iniettato" in siti di altre persone (foto persone aggiungendo un <sceneggiatura> tag nei loro siti) che sarà quindi eseguire il nostro codice e aggiungere un po 'di elementi DOM e funzionalità al loro sito. Questo avrà nuove parti di codice e riutilizzerà anche molto del codice che usiamo sul nostro sito principale.

Il problema che ho è che è, naturalmente, non raffreddare per aggiungere solo un <sceneggiatura> che includerà Prototype nelle pagine della gente. Se lo facciamo in una pagina che utilizza già lo ANY framework, siamo sicuri di rovinare tutto.
jQuery ci dà la possibilità di "rinominare" l'oggetto $, in modo che possa gestire questa situazione in modo decente, tranne ovviamente per il fatto che non stiamo usando jQuery, quindi dovremmo migrare lo di .

In questo momento sto contemplando una serie di scelte brutte, e io non sono sicuro di quello che è meglio ...

• riscrivere tutto da usare jQuery, con un $ oggetto rinominato in tutto il mondo.
• Creazione di una "nuova" libreria di prototipi con solo il sottoinsieme che utilizzeremmo nel codice "iniettato" e rinominare $ in qualcos'altro. Poi di nuovo dovrei adattare le parti del mio codice che sarebbero state condivise in qualche modo.
• Non utilizzare affatto una libreria nel codice iniettato, per mantenerlo il più pulito possibile e riscrivere il codice condiviso per non utilizzare alcuna libreria. Ciò ovviamente degenererebbe in noi creando il nostro stesso frankenstein di una biblioteca, che è probabilmente lo scenario peggiore di sempre.

mi chiedo che cosa pensate voi ragazzi che potevo fare, e anche se c'è qualche possibilità di magia che avrebbe risolto tutti i miei problemi ...

Per esempio, pensi che potrei usare qualcosa come Caja/Cajita per sandbox il mio codice e isolarlo dal resto del sito, e avere Prototype all'interno di lì? O mi manca completamente il punto?

Ho anche letto una volta su una tecnica per bookmarklets, sono stati si aggiunge il codice come questo:

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

E poi il codice è tutto all'interno della vostra funzione anonima e non hanno toccato il namespace globale a tutti . Pensi che ho potuto fare un file che contiene:

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

    InitializeStuff_CreateDOMElements_AttachEventHandlers(); 
})(); 

Vorrei che il lavoro? Raggiungerebbe l'obiettivo di non ingombrare lo spazio dei nomi globale e non uccidere la funzionalità su un sito che utilizza jQuery, ad esempio?

Oppure Prototype è troppo complesso in qualche modo per isolarlo in quel modo?
(NOTA: penso di sapere che ciò creerebbe chiusure ovunque ed è più lento, ma non mi interessa troppo le prestazioni, il mio codice non sta facendo nulla di così complesso)

Answer 1

Se stai iniettando il tuo codice in altri siti, richiedono che includano anche il prototipo o non utilizzino affatto una libreria.

Qualsiasi altra opzione è, a mio parere, troppo invadente.

Answer 2

Daniel,

Sono in esecuzione nello stesso problema per alcune delle stesse ragioni. Per fortuna, sono in grado di usare jquery. Quello che voglio fare è creare un singolo file js che caricherà un'istanza di jquery e tutte le librerie dipendenti di cui ho bisogno. Quindi voglio caricare i CSS allo stesso modo.

Ho trovato uno script che caricherà questi file nel DOM, ma non sembrano funzionare. Ecco quello che sto usando:

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) 
} 

posso vedere in Firebug che il CSS è stato caricato, ma il contenuto del mio file css non sono che passa. Speravo di poter caricare dinamicamente le librerie necessarie in base agli strumenti utilizzati da questo WIDGET. Quindi mi piacerebbe fare una logica programmatica che determinerebbe quali librerie e file css dovrebbero essere "importati".

Non so se questa linea di pensiero gioca nei tuoi sforzi, ma mi piacerebbe avere i tuoi pensieri, o vedere dove finisci con questo.