Deze tutorial is bedoeld voor mensen die kennis hebben van OOP en inzicht hebben in geavanceerde Javascript technieken.
De aanleiding van deze tutorial was toen ik het bericht las dat Eclipse een webeditor heeft uitgebracht. Daarin zat ik direct in de Javascript broncode te neuzen. Daar viel me op dat ze met OOP technieken als namespaces en klasses werkten. Nu wist ik al een paar dingen zoals prototype en de object notatie in Javascript. Wat ik nog niet wist dat je zo ver kon gaan met Javascript. Dus eerst en vooral een dankjewel aan IBM voor het delen van die techniek (maar die bestaat al een paar jaar toen ik erop Googelde).
Deze tutorial gaat om te tonen dat je OOP kan doen in Javascript. Ik geef toe dat ik alle termen of de scopes van variabelen nog niet 100% begrijp maar ik zal zien voor verdere leesmateriaal die ikzelf ook later zal doornemen. Het is de bedoeling dat dit een start is en dat er nog tutorials volgen (door mij, door geïnteresseerden of door ervaren mensen) over deze techniek.
2. Inleiding
In deze tutorial gaan we een simpele adresboek maken. Een adresboek bestaat uit een aantal klasses zoals beschreven in volgende UML diagram.
3. Namespace "adresboek" maken
Een namespace laat toe om klasses te groeperen onder eenzelfde naam. Een namespace in Javascript is eigenlijk simpelweg een variabele dat een leeg object vasthoudt. In die variabele zitten dan terug objecten die onze klasses gaan voorstellen. Een namespace defineer je als eerste in je Javascript bestand.
var adresboek = adresboek ||{};
Moest er al een adresboek namespace bestaan, dan wordt die gewoon overgenomen. Dit kan voorkomen omdat andere Javascript files ook die namespace gebruiken. Indien die niet bestaat, wordt een leeg object toegekend.
De constructie (function() { ...}()); is een speciale constructie. Wat dit doet is eenvoudig. We maken een naamloze functie en roepen die aan. Het resultaat kennen we toe aan adresboek.Persoon. Dit resultaat is een functie (zie de return waarde). Dus wanneer je new doet, gaat hij een nieuwe instantie maken van die functie en dan gaat hij ook die extended items (functies en variabelen van prototype) eraan toevoegen.
adresboek.Persoon = (function() {….})();
Dit is een speciale constructie. Dit kan je zien als de constructie van je klasse (class Persoon {}). Die constructie komt vaak voor in Javascript frameworks. Ik ben niet zeker van de term maar denk dat dit anonieme functies zijn.
De functie Persoon is de constructor. Daarin kan je private variabelen initialiseren of functies aanroepen. Een klasse moet publieke properties en functies kunnen bevatten. Persoon.prototype = { }; bevat alle publieke data van de klasse zoals properties en functies. De klasse Persoon bevat 1 publieke methode, de toString() methode. Je kan ook private properties en functies hebben, zie Adresboek hiervoor.
De var personen = []; is een private variabele die enkel in die klasse kan gelezen worden. In de prototype van de klasse staat een teller, count, daarnaast zijn twee functies in de klasse opgenomen.
De functie validate is een private methode. Die kan je niet van buitenaf oproepen.
De code spreekt voor zich. Hij zal de personen van de adressen in een alert gooien.
8. Tot slot
Zoals ik al zei was dit een inleiding om jou eens kennis te maken met een andere manier van OOP. Die manier heb ik geleerd door de code van IBM te bestuderen. Op internet vind je ook nog andere manieren maar deze lijkt me het beste om OOP te doen in Javascript.
Het enige wat ik mij nu afvraag is, hoe zit dit met overerving? Stel dat ik een Klant klasse wil die erft van Persoon maar die heeft een extra property bedrijf.
Plaats gerust een reactie, vraag of extra uitleg in de reacties.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4) 
