# Handboek voor macros.js Dit handboek biedt een uitgebreide uitleg over het gebruik van `macros.js` in je webprojecten. `macros.js` is een lichtgewicht JavaScript-bibliotheek die veelgebruikte DOM-manipulaties en event-handling vereenvoudigt, vergelijkbaar met jQuery, maar met een moderne en compacte aanpak. Het is ontworpen om direct in de browser te werken zonder afhankelijkheden. ## Inhoudsopgave 1. [Introductie](#introductie) 2. [Installatie](#installatie) 3. [DOM-selectors](#dom-selectors) 4. [DOM-manipulatie](#dom-manipulatie) 5. [Event-handling](#event-handling) 6. [Valuta-opmaak](#valuta-opmaak) 7. [Voorbeeldproject](#voorbeeldproject) 8. [Vergelijking met jQuery](#vergelijking-met-jquery) 9. [Best practices](#best-practices) ## Introductie `macros.js` biedt een verzameling hulpfuncties en methoden om DOM-elementen te selecteren, manipuleren en gebeurtenissen te beheren. Het is een moderne vervanging voor jQuery, met een focus op eenvoud en prestaties. Het ondersteunt: - Verkorte DOM-selectors (`$`, `$$`, `$id`) - Ketenbare methoden voor DOM-manipulatie (`addClass`, `removeClass`, `toggleClass`, `show`, `hide`, `toggleVisibility`) - Flexibele event-handling (`on`, `off`) - Valuta-opmaak (`formatCurrency`) In tegenstelling tot jQuery is `macros.js` compacter en maakt het gebruik van moderne JavaScript-API's zoals `querySelector` en `classList`. ## Installatie Voeg `macros.js` toe aan je project door het script in je HTML-bestand op te nemen: ```html ``` Plaats het ` ``` Dit voorbeeld: - Gebruikt `onReady` om te wachten tot de DOM is geladen. - Voegt een klikgebeurtenis toe aan elk `.item`-element om de `active`-klasse te wisselen. - Voegt een knop toe om de lijst te tonen/verbergen. - Formateert prijzen met `formatCurrency`. ## Vergelijking met jQuery Hier is een snelle vergelijking om de overgang van jQuery naar `macros.js` te vergemakkelijken: | Functionaliteit | jQuery | macros.js | |------------------------|---------------------------------|---------------------------------| | Selecteer één element | `$('div')` | `$('div')` | | Selecteer meerdere | `$('div')` | `$$('div')` | | Selecteer op ID | `$('#id')` | `$id('id')` | | Klasse toevoegen | `$('#id').addClass('cls')` | `$id('id').addClass('cls')` | | Klasse verwijderen | `$('#id').removeClass('cls')` | `$id('id').removeClass('cls')` | | Klasse wisselen | `$('#id').toggleClass('cls')` | `$id('id').toggleClass('cls')` | | Toon element | `$('#id').show()` | `$id('id').show()` | | Verberg element | `$('#id').hide()` | `$id('id').hide()` | | Event toevoegen | `$('#id').on('click', fn)` | `$id('id').on('click', fn)` | | Gedelegeerd event | `$(document).on('click', '.item', fn)` | `document.on('click', '.item', fn)` | | DOM klaar | `$(document).ready(fn)` | `onReady(fn)` | **Verschillen**: - `macros.js` retourneert native DOM-elementen (`Element` of `NodeList`), terwijl jQuery een jQuery-object retourneert. - `macros.js` heeft geen animaties of AJAX-functionaliteit, wat jQuery wel biedt. - `macros.js` is veel kleiner en heeft geen externe afhankelijkheden. ## Best practices 1. **Gebruik `onReady` of `onLoad`**: Plaats je scripts aan het einde van de `` of gebruik `onReady` om te zorgen dat de DOM beschikbaar is. 2. **Keten methoden**: Maak gebruik van de ketenbaarheid van methoden zoals `addClass` en `show` voor leesbare code. ```javascript $id('my-element').addClass('highlight').show(); ``` 3. **Gebruik gedelegeerde events**: Voor dynamisch toegevoegde elementen, gebruik `document.on('click', '.selector', handler)` om prestaties te optimaliseren. 4. **Minimaliseer DOM-toegang**: Cache selectors in variabelen om herhaalde DOM-query's te vermijden. ```javascript const button = $id('my-button'); button.on('click', () => button.toggleClass('active')); ``` 5. **Valideer selectors**: Zorg ervoor dat je selectors correct zijn om `null`-fouten te voorkomen. ```javascript const element = $('div.my-class'); if (element) { element.addClass('active'); } ``` ## Conclusie `macros.js` is een krachtige, lichtgewicht tool voor moderne webontwikkeling. Het biedt een vertrouwde, jQuery-achtige API, maar maakt gebruik van native browser-API's voor betere prestaties. Door de bovenstaande richtlijnen en voorbeelden te volgen, kun je snel en efficiënt interactieve webapplicaties bouwen.