Vaak als je met jQuery aan de gang gaat is het al snel een brij van code en zie je door de bomen het bos niet meer. In dit artikel ga ik je uitleggen hoe ik mijn javascript (jquery) document opbouw zodat het enigszins overzichtelijk blijft.
De start van je document is waarschijnlijk hetzelfde als je zelf altijd al begint, namelijk:
$(document).ready(function(){
});
Na dit stukje maak ik een object met de naam van de website. In dit object maak ik een init function aan en vanuit deze init functie ga ik de rest van mijn functionaliteiten aanroepen, hieronder een voorbeeld:
var martijncuijten = {
init: function(){
}
}
In de $(document).ready kun je nu deze init functie aan gaan roepen, dit doe je als volgt:
$(document).ready(function(){
martijncuijten.init();
});
Deze functie aanroep is het enige dat we in de $(document).ready plaatsen. Al onze functionaliteiten schrijven we in het gemaakte object. In principe maak je nu voor elke functionaliteit een aparte functie waarna je de functie aanroept in de init() functie.
Hieronder een voorbeeld van hoe je dat zou doen met een functie die een div openklapt als er op een link wordt geklikt:
var martijncuijten {
init: function(){
this.handle_div_click();
},
handle_div_click: function(){
$("a").click(function(e){
e.preventDefault();
$(this).siblings("div.dropdown").slideToggle();
});
}
}
Op deze manier ga je door voor alle functionaliteiten. Als je je aan de regels hieronder houd zal je code waarschijnlijk een stuk overzichtelijker worden:
1. Iedere functionaliteit krijgt zijn eigen functie
2. Iedere functie wordt aangeroepen vanuit de init functie.
Natuurlijk kun je hiervan afwijken, bijvoorbeeld als een bepaalde functionaliteit een helper functie nodig heeft dan wordt die helper functie natuurlijk niet vanuit de init functie aangeroepen.
Heb je vragen naar aanleiding van dit artikel, stel ze dan in de comments. Ik zal dan proberen hier zo goed en snel mogelijk antwoord op te geven.
Reageren