Jak wyizolować mój kod javascript, aby zapobiec kolizjom?

Question

Piszę wiele funkcji javascript i detektorów zdarzeń i chcę przenieść je do ich własnego, izolowanego miejsca izolowanego, które nie powoduje konfliktu, gdy łączę je i minuję z innymi plikami javascript.

Nadal nie używam javascript, więc może być proste rozwiązanie tej odpowiedzi. Zacząłem od stworzenia JavaScript Object:

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

potem w moim html, na stronie chcę użyć go można zainicjować ten kod:

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

Ale wtedy metoda init zaczęła wzrastać i Muszę rozpocząć podział tego kodu na mniejsze porcje, ale utknąłem na składni i jak ustawić prywatne metody/zmienne i wywołać je z metody init i innych prywatnych metod. Jak mogę to zrobić?

Czy zmierzam w dobrym kierunku? Jakie inne sposoby powinienem/powinienem robić w ten sposób?

Answer 1

zmierzasz we właściwym kierunku. Można użyć module pattern utworzyć obiekt z prywatnym członków i metod tak:

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 
    } 


}(); 

Tylko to, co jest w blok powrót jest publiczna, ale można wywołać żadnych metod prywatnych/dostępu do żadnych prywatnych metod od wewnątrz bloku powrotnego .

Answer 2

Dzięki Józefowi z linkami do innego SO pytanie, który wyjaśnił to podejście:

Innym sposobem na to, co uważam za trochę mniej restrykcyjne niż obiektu formie dosłownej:

var MySpecialStuff = new function() { 

    var privateFunction = function() { 

    }; 

    this.init = function() { 

    }; 
}; 

Answer 3

Chciałbym podzielić mój kod na bardziej modularne podejście. Załóżmy, że mamy stronę z listą postów na blogu, menu strony i paska bocznego. Skończyłbym z tym:

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

... i tak dalej. Dzięki temu kod jest uporządkowany według celu, pomaga utrzymać jasność obszaru i umożliwia ponowne użycie elementów kodu, które mogą często występować (na przykład, jeśli AJAX'd w nowym poście blogu, można ponownie zadzwonić pod numer this.applySomePlugin).

To oczywiście jest szybkie i-brudny przykład, ale mam nadzieję, że masz pomysł

Answer 4

Podziel odpowiedzialność za kod, który umieściłeś wewnątrz funkcji init w podobiektach głównego obiektu.

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