¿Cómo puedo inyectar Javascript (incluido Prototype.js) en otros sitios sin saturar el espacio de nombres global?

Question

Actualmente estoy en un proyecto que es un gran sitio que usa la biblioteca Prototype, y ya hay una gran cantidad de código Javascript.

Ahora estamos trabajando en un trozo de código que se obtiene "inyecta" en sitios de otras personas (personas Foto añadiendo un > etiqueta < guión en sus sitios) que luego ejecutar nuestro código y añadir un montón de elementos DOM y funcionalidad a su sitio. Esto tendrá nuevas piezas de código y también reutilizará gran parte del código que usamos en nuestro sitio principal.

El problema que tengo es que es claro que no se enfríe simplemente agregar una secuencia de comandos > < que incluirá Prototipo en las páginas de las personas. Si hacemos eso en una página que ya usa CUALQUIER marco, estamos seguros de que lo arruinaremos todo.
jQuery nos da la opción de "cambiar el nombre" del objeto $, por lo que podría manejar esta situación decentemente, excepto obviamente por el hecho de que no estamos usando jQuery, entonces tendríamos que migrar todo.

En este momento estoy contemplando una serie de opciones feas, y no estoy seguro de qué es lo mejor ...

• reescritura todo para usar jQuery, con un objeto $ renombrado por todas partes.
• Creando una "nueva" biblioteca de prototipos con solo el subconjunto que estaríamos usando en el código "inyectado", y renombrando $ a otra cosa. Por otra parte, tendría que adaptar las partes de mi código que se compartirían de alguna manera.
• No está utilizando una biblioteca en absoluto en el código inyectado, para mantenerlo lo más limpio posible, y volver a escribir el código compartido para no utilizar ninguna biblioteca. Esto obviamente degeneraría en nosotros creando nuestro propio frankenstein de una biblioteca, que probablemente sea el peor escenario de la historia.

Me pregunto lo que ustedes piensan que podía hacer, y también si hay alguna opción mágica que resolvería todos mis problemas ...

Por ejemplo, ¿cree que podría utilizar algo como Caja/Cajita para guardar mi propio código y aislarlo del resto del sitio, y tener prototipo dentro de allí? ¿O estoy completamente perdiendo el punto con eso?

También leí una vez acerca de una técnica para bookmarklets, se le añade el código de la siguiente manera:

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

Y a continuación, el código es todo dentro de su función anónima y no se ha tocado el espacio de nombres global en absoluto . ¿Cree que podría hacer un archivo que contiene:

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

    InitializeStuff_CreateDOMElements_AttachEventHandlers(); 
})(); 

¿Funcionaría? ¿Lograría el objetivo de no saturar el espacio de nombre global, y no matar la funcionalidad en un sitio que usa jQuery, por ejemplo?

¿O es prototipo demasiado complejo de alguna manera para aislarlo así?
(NOTA: Creo que sé que eso crearía cierres todas partes y eso es más lento, pero no me importa demasiado sobre el rendimiento, el código no está haciendo nada que compleja)

Answer 1

Si va a inyectar su código en otros sitios, requieren que también incluyan un prototipo, o no usan una biblioteca en absoluto.

Cualquier otra opción es, en mi opinión, demasiado intrusiva.

Answer 2

Daniel,

Estoy funcionando con el mismo problema para algunas de las mismas razones. Gracias, puedo usar jquery. Lo que quiero hacer es crear un archivo js único que cargue una instancia de jquery y cualquier biblioteca dependiente que necesite. Entonces quiero cargar css de la misma manera.

Encontré una secuencia de comandos que cargará estos archivos en el DOM, pero parece que no funcionan. Aquí es lo que estoy utilizando:

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

que puedo ver en Firebug que se carga el css, pero el contenido de mi archivo css no vienen a través. Tenía la esperanza de poder cargar dinámicamente las bibliotecas que necesitaba según las herramientas que utilizaba este WIDGET. Así que me gustaría hacer algo de lógica programática que determinaría qué bibliotecas y archivos css deberían ser "importados".

No estoy seguro de si esta línea de pensamiento juega en sus esfuerzos, pero me gustaría saber su opinión o ver dónde termina con esto.