Istanze multiple su una pagina con Javascript

Question

Non riesco a capire come gestire più istanze di alcune funzioni javascript che voglio eseguire su una pagina. Fa parte di un progetto di analisi personalizzata su cui sto lavorando.

Ho una funzione chiamata initData(); La funzione utilizza un setInterval per chiamare un'altra funzione che invia un ping al mio server ogni 1000ms.

Il problema è che voglio essere in grado di avere più di una istanza di questa funzione su una singola pagina. Il mio problema attuale è che non appena viene richiamata la seconda istanza, sovrascrive tutte le variabili dal primo.

Qual è il modo migliore per aggirare questo? C'è un modo per rendere le funzioni separate e/o private in modo che non interferiscano tra loro?

Answer 1

Per impostazione predefinita tutte le variabili (e quindi anche le dichiarazioni di funzione) risiedono nello spazio dei nomi globale.

L'unico modo per introdurre uno spazio dei nomi separato in javascript è con una chiamata di funzione. Ecco come si fa:

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

Si avvolge il proprio materiale in una funzione anonima, quindi si chiama immediatamente. In questo modo le tue funzioni saranno separate, anche con lo stesso nome.

Esempio

Così, per esempio, se si dispone di codice come questo:

var my, local, data; 

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

e si ha qualche altra parte:

var some, other, data; 

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

poi uno initData sovrascriverà l'altro initData. Tuttavia, se si avvolgono ciascuno nel proprio (function() {}());, saranno separati.

(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. 
    } 
}()); 

Attenzione però, che questi nomi non sono più nel namespace globale sono, quindi non sono anche disponibili per l'uso al di fuori della funzione anonima.

Uno globale

Per controllare quanto e cosa si espone nello spazio dei nomi globale, è usanza di esporre ciò che è necessario attraverso un oggetto globale, di solito in tutte le lettere maiuscole.

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

Si farebbe questo assicurandosi che FOO esista, e in caso contrario: crearlo.

var FOO = this.FOO || {}; 

Lo stesso per i vostri spazi dei nomi dei moduli:

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

e poi all'interno della funzione anonima, esporre ciò che si desidera.

Esempio completo

module1.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 ultimo suggerimento

Il controller, come scritto dipende entrambi module1.js e module2.js e deve essere caricato per ultimo. Questo può essere evitato usando qualcosa come , facendo in modo che tutti gli script vengano caricati.

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

Se non stai già utilizzando jQuery, è possibile utilizzare un piccolo script come domReady per evitare la pesantezza.