Code overzichtelijk maken

See the Pen Code overzichtelijk maken by Frank Los (@franklosdus) on CodePen.

Tot nu toe hebben we alle code in één functie gezet: de functie die wordt aangeroepen als het frame klaar is.

 

Als je programma ingewikkelder wordt gaat dat eruit zien als een brei. De kans op fouten wordt groter.

 

Het is een goede gewoonte om je code op te delen in kleinere functies die allemaal verantwoordelijk zijn voor een stukje van het programma.

 

Scope

Als je een stofzuiger aanzet zit de knop aan de buitenkant. Het is fijn dat je de stofzuiger niet eerst open hoeft te schroeven.

 

Als je de stofzuiger wilt repareren moet je hem wel open schroeven. Het is ook fijn dat al die onderdelen niet aan de buitenkant zitten.

 

Zo kun je ook een functie zien. Het is handig als de onderdelen van de functie niet bereikbaar zijn vanaf de buitenkant.

 

De "knoppen" van de functie zet je natuurlijk wél aan de buitenkant.

 

Globaal

Alle lets die ik als knoppen in het programma heb staan nu helemaal bovenaan in de code, buiten alle functies.

Nu zijn ze bereikbaar in het hele programma. Ook vanuit de functies.

 

Lokaal

In de functie maakListeners staat de functie geklikt.

 

Deze functie heb ik alleen maar hier nodig. Deze functie is daarom lokaal 

 

Je kunt deze functie alleen maar aanroepen vanuit maakListeners

 

Eén EventListener voor twee knoppen

Code maak je ook overzichtelijk door efficiënt te schrijven. Zo weinig mogelijk dus. Daar wordt je programma ook sneller van.

 

In de functie maakListeners voeg ik de luisteraar toe aan de stage.

 

De stage luistert nu of er een knop wordt ingedrukt.

 

In de functie kan je via de parameter e achterhalen om welke knop het ging.

 

e staat hier voor het event, de gebeurtenis die de functie aanroept. Deze wordt automatisch meegenomen. Daar hoef je niks voor te doen.

 

Opdracht

Log vanuit de functie geklikt het object e naar de console. En kijk wat erin zit.

 

Commentaar

Als je na een tijdje je eigen code weer terug ziet ben je blij als je zonder al te veel moeite nog snapt wat je gedaan hebt.

 

Dat kun je bewerkstelligen door heldere omschrijvende namen te bedenken voor je lets , consts en functies.

 

En je kunt je eigen code voorzien van commentaar.

 

// stukje commentaar

 

Als de computer twee slashes tegenkomt weet hij dat hij de code op die regel kan negeren.

 

/*

een paar regels commentaar

*/

 

Je kunt ook van een paar regels commentaar maken zoals hierboven. Je moet dan duidelijk laten weten waar het commentaar ophoudt.

 

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Ik geef gelijk ook een e-book cadeau met tips over goede uitleg!

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn aanpak.

Wellicht wil je meer weten over mij.

illustratie van Frank Los
Frank Los
frank@weereenlos.nl06 430 466 58

TUSSEN DE OREN

uitleg die aankomt

Goede uitleg
is ontzettend lastig.

Deze tips helpen jou
keer op keer.
Download mijn gratis e-book
met poster!
illustratie van Frank Los
CookiesDisclaimerPrivacystatement