Come isolare il mio codice javascript per evitare collisioni?

Question

Ho scritto molte funzioni di javascript e ascoltatori di eventi e voglio spostarli nel loro spazio riservato, con un nome, che non entra in conflitto quando concatenato e lo minimizzo con gli altri miei file javascript.

Sono ancora nuovo in javascript, quindi potrebbe esserci una soluzione semplice a questa risposta. Ho iniziato con la creazione di un oggetto JavaScript:

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

Poi nel mio html, nella pagina che voglio usarlo su posso inizializzare questo codice:

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

Ma allora il metodo init cominciato a crescere e Devo iniziare a suddividere il codice in blocchi più piccoli, ma sono bloccato sulla sintassi e su come impostare metodi/variabili privati ​​e richiamarli dal metodo init e da altri metodi privati. Come posso fare questo?

Sono diretto nella giusta direzione? Quali altri modi posso/devo fare per fare questo genere di cose?

Answer 1

Stai andando nella giusta direzione. È possibile utilizzare il module pattern per creare un oggetto con soci privati ​​e metodi come questo:

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 
    } 


}(); 

solo ciò che è nel blocco di ritorno è pubblico, ma è possibile chiamare qualsiasi metodo privati ​​/ accedere a tutti i metodi privati ​​all'interno del blocco di ritorno .

Answer 2

Grazie a Giuseppe per il collegamento ad un altro SO questione che ha spiegato questo approccio:

Un altro modo per farlo, che io ritengo essere un po 'meno restrittiva rispetto all'oggetto forma letterale:

var MySpecialStuff = new function() { 

    var privateFunction = function() { 

    }; 

    this.init = function() { 

    }; 
}; 

Answer 3

Mi piace segmentare ulteriormente il mio codice in un approccio più modulare. Quindi, supponiamo di avere una pagina con un elenco di post di blog, un menu di pagina e una barra laterale. Vorrei finire con questo:

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'; 
    } 
}; 

... e così via. Ciò mantiene il codice organizzato per scopo, aiuta a mantenere l'ambito libero e consente di riutilizzare elementi di codice che potrebbero verificarsi frequentemente (ad esempio, se si AJAX in un nuovo post del blog, è possibile chiamare di nuovo this.applySomePlugin).

Questo naturalmente è un esempio veloce-e-sporca, ma spero che l'idea

Answer 4

Dividere la responsabilità del codice inserito nella funzione init in oggetti secondari dell'oggetto principale.

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 
    } 
};