¿Cómo aislar mi código de JavaScript para evitar colisiones?

Question

He estado escribiendo una gran cantidad de funciones de JavaScript y oyentes de eventos y quiero moverlos a su propio espacio de nombres, lugar aislado que no entre en conflicto cuando lo concateno y lo minimizo con mis otros archivos de JavaScript.

Todavía soy nuevo en javascript, por lo que puede haber una solución simple a esta respuesta. Empecé creando un objeto javascript:

var MySpecialStuff = { 
    init: function(){ 
     //do everything here 
    } 
}; 

Luego, en mi html, en la página quiero usarlo en lo que puedo inicializar este código:

<script> 
    MySpecialStuff.init(); 
</script> 

Pero entonces el método init comenzado a crecer y Necesito comenzar a dividir ese código en fragmentos más pequeños, pero estoy atascado en la sintaxis y cómo establecer métodos/variables privados y llamarlos desde el método init y otros métodos privados. ¿Cómo puedo hacer esto?

¿Me dirijo en la dirección correcta? ¿Qué otras maneras puedo/debo hacer para hacer este tipo de cosas?

Answer 1

se dirige en la dirección correcta. Se puede utilizar el module pattern para crear un objeto con miembros privados y métodos como éste:

var foo = function(){ 
    var bar = ""; //private 

    function funk(){ 
    //private function  
    return "stuff"; 
    } 

    return{ 
    getBar: function(){ 
     return bar; 
    }, 
    init: function(){ 
     alert(funk()); 
    }, 
    randomMember: 0 //public member 
    } 


}(); 

Sólo lo que está en el bloque de retorno es pública, pero se puede llamar a cualquiera de los métodos privados/acceder a los métodos privados dentro del bloque de retorno .

Answer 2

Gracias a Joseph para vincular a otro SO cuestión que explica este enfoque:

Otra manera de hacerlo, que considero a ser un poco menos restrictivo que el objeto forma literal:

var MySpecialStuff = new function() { 

    var privateFunction = function() { 

    }; 

    this.init = function() { 

    }; 
}; 

Answer 3

Me gusta segmentar aún más mi código en un enfoque más modular. Entonces, digamos que tenemos una página que tiene una lista de publicaciones de blog, un menú de página y una barra lateral. Terminaría con esto:

var blog_controller = { 
    init: function(){ 
     document.getElementById('some_element').addEvent('click', this.handleSomeClick); 
     this.applySomePlugin(); 
    }, 
    applySomePlugin: function() { 
     /* do whatever needs to happen */ 
    }, 
    handleSomeClick: function() { 
     // scope will be element 
     this.style.color = 'red'; 
    } 
}; 
var page_menu_controller = { 
    init: function(){ 
     document.getElementById('some_other_element').addEvent('click', this.handleSomeClick); 

    }, 
    handleSomeClick: function() { 
     // scope will be element 
     this.style.color = 'blue'; 
    } 
}; 

... y así sucesivamente. Esto mantiene el código organizado por propósito, ayuda a mantener el alcance despejado y le permite reutilizar elementos de código que pueden ocurrir con frecuencia (por ejemplo, si AJAX hizo una nueva publicación en el blog, puede llamar al this.applySomePlugin nuevamente).

Por supuesto, esto es un ejemplo rápido y sucio-, pero espero que la idea

Answer 4

Divide la responsabilidad del código que has puesto dentro de la función init en subobjetos del objeto principal.

MySpecialStuff = { 
    // Variables/constants and everything else that needs to be accessed inside the whole MySpecialStuff object 
    init: function(){ 
     //Do only whats required to be globally initiated. 
     this.MainMenu.init(); // Main menu stuff usually is. 
    } 
}; 

MySpecialStuff.MainMenu = { 
    // Variables/constants that are only important to the MainMenu subobject. 
    init: function(){ 
     //Just the initiation stuff thats related to the MainMenu subobject. 
    } 
}; 

MySpecialStuff.SlideShow = { 
    // Variables/constants that are only important to the SlideShow subobject. 
    init: function(){ 
     // Same as for the MainMenu with the difference that nonessential objects can be "fired" when required 
    } 
};