Zoals veel mensen overkomt die het jQuery framework leren kennen zonder zich eerst te hebben verdiept in Javascript, zo overkwam het ook mij. Met jQuery heb je ineens heel veel mogelijkheden om vrij statische websites te voorzien van interactie! Het dynamisch aanpassen van HTML en CSS eigenschappen of het toevoegen van een animatie wanneer de bezoeker ergens op klikt: het gaat allemaal erg gemakkelijk.

Javascript code testen

Het testen van dit soort code is een heel ander verhaal. Wanneer er geen duidelijke structuur in de code zit komt het testen neer op handmtaig proberen. Wil je echter een (unit) testing framework gaan gebruiken, dan is het eerst van belang om betere code te schrijven. Dit lost ook direct een ander groot probleem op: de bekende pastabrij waar je Javascript code al gauw op gaat lijken als je niet uitkijkt!

Het is dus tijd geworden om eens wat dieper in Javascript te duiken om de code te verbeteren…

De presentatie van Damian Nicholson (Writing (testable | maintainable | scalable | rock solid) JavaScript gehouden op de ScotlandJS2013 conferentie) bevat veel goede aanknopingspunten en hielp me direct op weg: gewoon maar een eind scripten in jQuery is een laagdrempelige start en in het begin leidt dit snel tot het gewenste resultaat. Maar pas op voor die pastabrij… Op de lange duur moet je dus code schrijven die gestructureerd, georganiseerd en opgedeeld is in kleine blokjes. De take home message van Damian was niet voor niks

Refactor your code, force yourself to test through objects (because they have properties and methods that you can unit test) and break up your code in modules.

Modules in Javascript

Maar wat is een module eigenlijk in Javascript?

Gelukkig is daar aardig wat over te vinden online. Dan moet je deze informatie alleen nog op een rij zetten om te begrijpen hoe het precies werkt… De volgende lijst met links heeft mij goed op weg geholpen:

• How good c# habits can encourage bad Javascript habits: part 1, door Mike Hostetler (2010)
• The mind-boggling universe of JavaScript Module strategies, door Tiago Romero Garcia (2015)
• Learning Javascript design patterns, boek van Addy Osmani (2015)

Na het lezen is het tijd om het geleerde in de praktijk te brengen. Dus ben ik een module gaan bouwen om te proberen alle ideeën te doorgronden.

Een eenvoudige module voor optellen en aftrekken

Modules worden gebruikt om te voorkomen dat variabelen in de global scope terecht komen. Daarnaast kun je met een module min of meer hetzelfde bereiken als met traditionele classes in Object georiënteerde programmeertalen: je kunt delen van je code inkapselen (encapsulation) en bepaalde functies publiekelijk toegankelijk maken, terwijl je de rest prive houdt.

Uit het boek van Addy Osmani vond ik met name het Revealing Module pattern heel elegant en daarvoor heb ik een jsFiddle gemaakt met een voorbeeld:

Deze code bestaat uit een anonieme direct uitgevoerde functie die een object teruggeeft dat wordt gekoppeld aan de variabele simpleCalc. Dit object bevat 4 methoden (add, sub, get en set) die publiekelijk toegankelijk zijn. De privateCounter en de privateShowCounter zijn echter prive binnen de module en kunnen alleen via de publieke methoden ontsloten worden.

En nu?

We houden het bij deze eenvoudige module voor nu. Ik ga verder met andere Javascript design patterns, het toevoegen van jQuery events in een module en het unit testen staat ook nog op het programma. Meer volgt in een volgende blog!