pum
Gebruiker
- Lid geworden
- 18 dec 2009
- Berichten
- 193
Beste helpers,
Ik ben nu een tijdje bezig met jQuery en begin het aardig onder de knie te krijgen. Er is echter telkens een probleem waar ik tegen aan blijf lopen en dat is de scope van mijn variabels. Om mijn probleem beter uit te leggen hieronder een voorbeeld van hoe ik mijn bestandsstructuur meestal opbouw.
vanuit mijn index.html / index.php link ik vanuit de <head> naar controller.js en een ander bestand in dit geval slider.js
[JS]
<script src="controller.js"></script>
<script src="slider.js"></script>
[/JS]
vervolgens bouw ik mijn controller.js op de volgende manier op.
controller.js file
[JS]
$(function(){
// als de dom klaar is met laden.
// vanuit controller.js een functie aanroepen die in slider.js file staat
slider.init();
});
[/JS]
slider.js file
[JS]
var slider = {
init: function() {
// hier zet ik al mijn variabels die op slider slaan, of mee te maken hebben
var currentSlide = 0;
// hier doe ik alle bindings
$(.elem).click(function(){ slider.slide($(this)); })
},
slide: function(elem){
var id = elem.attr('id');
if(id == 'next'){
// naar de volgende slide en currentSlide updaten
}else {
// naar de vorige slide currentSlide terug zetten naar 0
}
// hier een andere functie
}
}[/JS]
Ik gebruik een controller.js en apart js bestand zodat ik mijn code netjes gescheiden kan houden.
Het probleem:
In het voorbeeld hierboven wil ik bijvoorbeeld currentSlide updaten zodra er op .elem is gedrukt.
het probleem is dat ik niet kan zeggen currentSlide ++; omdat currentSlide niet binnen slide functie word herkend.
om currentslide toch binnen de slide functie te krijgen doe ik het volgende
[JS]$(.elem).click(function(){ slider.slide(elem, currentSlide) });[/JS]
om meerdere variabels te parsen stuur ik meerdere variabels mee
[JS]$(.elem).click(function(){ slider.voorbeeldfunctie(currentSlide, voorbeeldVar) });[/JS]
nu kan ik de waarde 0 binnen de slide functie wel gebruiken. Het probleem is alleen dat op deze manier mijn code erg rommelig en onoverzichtelijk word, althans dat vind ik zelf. Ook zijn op deze manier de variabels altijd local en kan ik ze alleen binnen de functie benaderen. Het moet volgens mij op een andere en nettere manier kunnen. Ik heb wel eens gezien dat bovenin een .js bestand alleen variabels namen stonden zoals:
[JS]
var slider = {
init: function() {
var currentSlide,
voorbeeldVar;
},
voorbeeldfunctie: function(e){
}
[/JS]
maar wanneer ik dit toepas binnen mijn huidige structuur en ik bijvoorbeeld vanuit een andere functie de waarde van currentSlide wil updaten loop ik vast. Nu weet ik dat wanneer je een variabel binnen een functie schrijft deze local is, en dus alleen binnen de functie gebruikt kan worden. Maar wat nu als ik een variabel wil hebben die ik overal kan gebruiken? ik heb we eens iets gelezen over getters en setters, maar hier kwam ik niet echt uit.
Ligt het misschien aan mijn opbouw en structuur? Ik hoop dat iemand mij nu eens duidelijk kan vertellen hoe dit zit.
Ik ben nu een tijdje bezig met jQuery en begin het aardig onder de knie te krijgen. Er is echter telkens een probleem waar ik tegen aan blijf lopen en dat is de scope van mijn variabels. Om mijn probleem beter uit te leggen hieronder een voorbeeld van hoe ik mijn bestandsstructuur meestal opbouw.
vanuit mijn index.html / index.php link ik vanuit de <head> naar controller.js en een ander bestand in dit geval slider.js
[JS]
<script src="controller.js"></script>
<script src="slider.js"></script>
[/JS]
vervolgens bouw ik mijn controller.js op de volgende manier op.
controller.js file
[JS]
$(function(){
// als de dom klaar is met laden.
// vanuit controller.js een functie aanroepen die in slider.js file staat
slider.init();
});
[/JS]
slider.js file
[JS]
var slider = {
init: function() {
// hier zet ik al mijn variabels die op slider slaan, of mee te maken hebben
var currentSlide = 0;
// hier doe ik alle bindings
$(.elem).click(function(){ slider.slide($(this)); })
},
slide: function(elem){
var id = elem.attr('id');
if(id == 'next'){
// naar de volgende slide en currentSlide updaten
}else {
// naar de vorige slide currentSlide terug zetten naar 0
}
// hier een andere functie
}
}[/JS]
Ik gebruik een controller.js en apart js bestand zodat ik mijn code netjes gescheiden kan houden.
Het probleem:
In het voorbeeld hierboven wil ik bijvoorbeeld currentSlide updaten zodra er op .elem is gedrukt.
het probleem is dat ik niet kan zeggen currentSlide ++; omdat currentSlide niet binnen slide functie word herkend.
om currentslide toch binnen de slide functie te krijgen doe ik het volgende
[JS]$(.elem).click(function(){ slider.slide(elem, currentSlide) });[/JS]
om meerdere variabels te parsen stuur ik meerdere variabels mee
[JS]$(.elem).click(function(){ slider.voorbeeldfunctie(currentSlide, voorbeeldVar) });[/JS]
nu kan ik de waarde 0 binnen de slide functie wel gebruiken. Het probleem is alleen dat op deze manier mijn code erg rommelig en onoverzichtelijk word, althans dat vind ik zelf. Ook zijn op deze manier de variabels altijd local en kan ik ze alleen binnen de functie benaderen. Het moet volgens mij op een andere en nettere manier kunnen. Ik heb wel eens gezien dat bovenin een .js bestand alleen variabels namen stonden zoals:
[JS]
var slider = {
init: function() {
var currentSlide,
voorbeeldVar;
},
voorbeeldfunctie: function(e){
}
[/JS]
maar wanneer ik dit toepas binnen mijn huidige structuur en ik bijvoorbeeld vanuit een andere functie de waarde van currentSlide wil updaten loop ik vast. Nu weet ik dat wanneer je een variabel binnen een functie schrijft deze local is, en dus alleen binnen de functie gebruikt kan worden. Maar wat nu als ik een variabel wil hebben die ik overal kan gebruiken? ik heb we eens iets gelezen over getters en setters, maar hier kwam ik niet echt uit.
Ligt het misschien aan mijn opbouw en structuur? Ik hoop dat iemand mij nu eens duidelijk kan vertellen hoe dit zit.
Laatst bewerkt:
