Múltiples instancias en una página con Javascript

Question

Tengo problemas para entender cómo manejar varias instancias de algunas funciones de JavaScript que quiero ejecutar en una página. Es parte de un proyecto de análisis personalizado en el que estoy trabajando.

Tengo una función llamada initData(); La función usa setInterval para llamar a otra función que envía un ping a mi servidor cada 1000 ms.

El problema es que quiero poder tener más de una instancia de esta función en una sola página. Mi problema actual es que, tan pronto como se llama a la segunda instancia, sobrescribe todas las variables de la primera.

¿Cuál es la mejor manera de evitar esto? ¿Hay alguna manera de hacer que las funciones se separen y/o instancias privadas para que no se interfieran entre sí?

Answer 1

De forma predeterminada, todas las variables (y, por lo tanto, también las declaraciones de funciones) viven en el espacio de nombres global.

La única forma de introducir un espacio de nombres separado en javascript es con una llamada a función. Así es como lo hace:

(function() { 
    /* your stuff here */ 
}()); 

Envuelve sus cosas en una función anónima y luego la llama de inmediato. De esta manera, sus funciones estarán separadas, incluso con el mismo nombre.

Ejemplo

Así, por ejemplo, si tiene un código como éste:

var my, local, data; 

function initData() { 
    // use my, local and data here. 
} 

y tiene otro lugar:

var some, other, data; 

function initData() { 
    // use some, other, data here. 
} 

entonces uno initData se sobreponen a la otra initData. Sin embargo, si envuelve cada uno en su propio (function() {}());, estarán separados.

(function() { 
    var my, local, data; 

    function initData() { 
     // use my, local and data here. 
    } 
}()); 


(function() { 
    var some, other, data; 

    function initData() { 
     // use some, other, data here. 
    } 
}()); 

Tenga en cuenta sin embargo, que estos nombres ya no está en el espacio de nombres global son, por lo que tampoco están disponibles para su uso fuera de la función anónima.

Una mundial

Para controlar cuánto y qué se expone en el espacio de nombres global, es costumbre para exponer lo que necesita a través de un objeto global, por lo general en letras mayúsculas.

FOO.module1.initData(); 
FOO.module2.initData(); 

Para ello, asegúrese de que FOO exista, y si no: crearlo.

var FOO = this.FOO || {}; 

Lo mismo para los espacios de nombres del módulo:

FOO.module1 = FOO.module1 || {}; 

y luego dentro de la función anónima, expone lo que quiere.

Ejemplo completo

módulo 1.JS:

var FOO = this.FOO || {}; 
FOO.module1 = FOO.module1 || {}; 

(function() { 
    var my, local, data; 

    function initData() { 
     // use my, local and data here. 
    } 

    FOO.module1.initData = initData; 
}()); 

module2.js:

var FOO = this.FOO || {}; 
FOO.module2 = FOO.module2 || {}; 

(function() { 
    var some, other, data; 

    function initData() { 
     // use some, other and data here. 
    } 

    FOO.module2.initData = initData; 
}()); 

controller.js:

FOO.module1.initData(); 
FOO.module2.initData(); 

Un último consejo

El controlador como escrito depende de ambos module1.js y module2.js y necesita ser cargado el último. Eso se puede evitar usando algo como jQuery 's document.ready, haciéndolo esperar a que se carguen todos los scripts.

jQuery(document).ready(function() { 
    FOO.module1.initData(); 
    FOO.module2.initData(); 
}); 

Si usted aún no está usando jQuery, puede utilizar un pequeño script como domReady para evitar la hinchazón.