Cómo evitar conflictos de nombres en widgets de JavaScript

Question

Tengo un widget de JavaScript (una pieza de código JS y HTML incrustado) que está incrustado en otros sitios. ¿Qué debo hacer para asegurarme de que los nombres de las variables no entren en conflicto con las variables de la página de alojamiento?

Me gustaría que este widget esté "en línea" es decir, en la misma página que la página de alojamiento, no en un iframe, ¿cuál es la mejor manera de evitar conflictos de nombres con la página de alojamiento o conflictos con otros widgets?

Los conflictos de nombres pueden ocurrir de varias maneras:

• Nombres de variables de JavaScript
• Nombres de funciones de JavaScript
• identificadores de elementos DOM
• Nombres de clase CSS
• quizás más ...

Puedo pensar en varias formas de evitar enfrentamientos de nombres, pero me preguntaba si hay una mejor práctica u otras recomendaciones generales. Así que aquí está mi 2c:

1. Solo usa nombres largos y trata de ser único. Eso es feo y no es a prueba de completo, pero es simple en concepto.
2. Use un iframe. Pero como se mencionó, no quiero usar un iframe por varias razones. Quiero que el widget herede los atributos de estilo de la página (como la fuente predeterminada y el color de fondo) y, lo que es más importante, no sé qué tan grande será el widget. Depende de los datos en tiempo real y puede ser de cualquier tamaño.
3. Utilice funciones anónimas para mejorar el alcance, p. (function () {mi código aquí}) (). Esta solución, aunque elegante, todavía no funciona para mí b / c primero, solo resuelve el nombre JS en conflicto, pero no los DOM ID o los nombres de clase CSS y, en segundo lugar, también uso jsonp para el que necesito proporcionar una función de devolución de llamada nombre, que eventualmente debe estar en el alcance global, por lo que no puede anidarse en el alcance de la función anónima.
4. Cree un mecanismo de espacio de nombres en JavaScript que proporcione la unicidad de las variables y la función JS. Algo del estilo de la ventana ['my_app'] [variable_name] o window ['my_app'] function_name. Eso también es un poco feo, pero al menos tengo control sobre el espacio de nombres y puedo generar espacios de nombres únicos garantizados.

Answer 1

Espacios de nombres Javascript:

http://www.codeproject.com/KB/scripting/jsnamespaces.aspx

Se usa mucho en varios frameworks / bibliotecas javascript, como YUI: http://developer.yahoo.com/yui/yahoo/

Answer 2

En mi proyecto anterior tenía un widget que estaba incrustado en otros sitios, y para evitar conflictos de nombres prefije todos los nombres que se usarían en los sitios de incrustación con un prefijo de dos letras (obtuve la idea del objetivo C, donde todas las clases comienzan con un prefijo como NS ...).

Por supuesto, también utilicé espacios de nombres (por ejemplo, var Foo = {bar: function () {...}}) y '' clases '' (usando la implementación de clase de John Resig), porque los uso independientemente de si tengo un widget o no, pero los nombres de los espacios de nombres, clases y variables o funciones globales tenían el prefijo, p. HMWidget, HMClass, hmDoSomething (), etc.

Con respecto a las ID de DOM y las clases de CSS, primero tuve que deshacerme de la mayoría de las ID debido a la posibilidad de tener múltiples widgets de mi servicio en el mismo sitio. Entonces, los únicos ID que quedaron fueron algo así como "widget_12345" para distinguir los widgets El resto de los elementos fueron identificados por las clases CSS, y todas las declaraciones CSS se hicieron en relación con el contenedor principal de widgets (por ejemplo, " .my_widget .left_column " en lugar de solo " .left_column ").