¿Cuál es la mejor forma de resolver conflictos de nombres en javascript?

Question

Hace poco escribí algunos códigos de JavaScript que llenaban una lista desplegable basada en XML, cosas bastante simples. El problema fue que tuve que escribir un código similar para hacer casi lo mismo en una página diferente.

Como el código era casi idéntico, nombré la mayoría de las funciones de la misma manera, pensando que nunca se incluirían en la misma página. Sin embargo, surgieron conflictos de nombres porque ambos archivos javascript finalmente se incluyeron en la misma página HTML.

Cuando tuve que volver atrás y cambiar los nombres simplemente agregué first_ o second_ a los nombres del método. Esto fue un dolor y no me parece muy elegante. Me preguntaba si existe una forma mejor de resolver conflictos de nombres en JavaScript.

Answer 1

Pruebe el JavaScript module pattern (o espacios de nombres) utilizado en varias bibliotecas.

Trate de estar SECO (no se repita) para evitar colisiones de nombres. Si el código es casi el mismo, es mejor evitar la duplicación de código creando una función que pueda manejar ambos casos. La función puede tomar dos parámetros: qué menú desplegable poblar y con qué datos. Esto también ayuda a la mantenibilidad.

actualización: supongo que toma el XML de una solicitud AJAX. En este caso, puede crear funciones anónimas sobre la marcha con los parámetros adecuados para la devolución de llamada dentro de un bucle.

Answer 2

Me gustaría ver cómo podría fusionar las dos piezas de código (¿funciones?) En una sola función. Si necesita rellenar un cuadro de lista, pase el ID del cuadro de lista a la función, para que no esté codificado para operar con un solo control ...

Lo hice en el sitio web de mi cohete donde Vendí motores de cohete con diferentes valores de retardo, pero en esencia, eran el mismo producto, solo un valor de retardo diferente.

Quizás esto podría intentar y explicar lo que estoy tratando de decir ... Lo uso si falta un archivo de imagen, se mostrará una imagen "sin imagen" en lugar de la imagen real.

function goBlank(image) 
{ 
    if(image) { 
    var imgobj = document[image]; 
    imgobj.src="/images/blank.png"; 
    } 
} 

En este caso, se le llama con:

<img src="/images/aerotech.png" name="header" onError="goBlank('header');"> 

Si necesita más ejemplo con cosas como cuadros de lista utilizado, que me haga saber. Quizás incluso publiques un código de muestra tuyo.

Answer 3

Otra opción (si es posible) es unir cuidadosamente el código al elemento en sí.

p. Ej.

<input type="text" name="foo" id="foo" value="World" onchange="this.stuff('Hello ' + this.value);"/> 
<script> 
    document.getElementById('foo').stuff = function(msg){ 
    //do whatever you want here... 
    alert('You passed me: ' + msg); 
    }; 
</script>