Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

23 Beste Praktijken voor JavaScript Beginners

by
Difficulty:BeginnerLength:LongLanguages:

Dutch (Nederlands) translation by Gregory Scheerlinck (you can also view the original English article)

In de onderstaande lijst vind je 23 tijdloze beste praktijken voor JavaScript ontwikkelaars. Integreer ze allemaal in je programmeerstijl en laat ons in de reacties weten welke regels je zelf belangrijk vindt om schonere, efficiëntere JavaScript code te schrijven. Vergeet ook niet om daarna deze "30 HTML en CSS Beste Praktijken" (Engelstalig) te lezen.

1. Gebruik === In Plaats Van ==

JavaScript heeft twee verschillende gelijkheidsoperatoren: === | !== en == | != . Doorgaans wordt het als beste praktijk beschouwd om altijd de driedubbele operator te gebruiken.

"Als twee operanden hetzelfde type en dezelfde waarde hebben, produceert === true en !== false" - JavaScript: The Good Parts

Als je echter == and != gebruikt, kunnen er zich problemen voordoen wanneer je met verschillende types werkt. In zo'n geval converteert de JavaScript engine de waarden immers automatisch.


2. Vergeet 'eval'

De 'eval'-functie geeft je toegang tot de JavaScript compiler. Wanneer je een string als parameter van 'eval' invoert, zal die door de compiler als JavaScript worden geëxecuteerd.

Dit maakt de uitvoering van je script niet enkel significant trager, maar brengt ook enorme veiligheidsrisico's met zich mee. De ingevoerde en als code geëvalueerde tekst krijgt uitzonderlijk veel rechten, waardoor je het best tegen elke prijs vermijdt!


3. Schrijf Je Code Uit

Technisch gesproken zijn niet alle puntkomma's en accolades verplicht. De meeste browsers interpreteren het volgende bijvoorbeeld correct:

Doch kijk even naar de volgende code:

Misschien denk je dat dit equivalent is aan:

Maar dan denk je dat verkeerd, want dit is wat er echt gebeurt:

Zoals je ziet kan indentatie de functionaliteit van accolades niet vervangen. Accolades weglaten doe je dan ook beter niet omdat het enkel werkt voor one-liners - en zelfs deze praktijk wordt door veel ervaren ontwikkelaars ontmoedigd.

Denk aan de toekomst

Wat als je later bijkomende commando's aan deze if-statement wil toevoegen? Je zou dan het hele codefragment moeten herschrijven. Pas dus heel goed op je tellen als je zaken weglaat.


4. Gebruik JSLint

JSLint is een door Douglas Crockford geschreven debugger. Plak je script in de tool om mogelijke problemen en fouten in je code op te sporen.

"JSLint neemt een JavaScript bron en scant het. Telkens het een probleem vindt, stuurt het een bericht terug met een beschrijving van het probleem en de locatie ervan. Deze problemen zijn niet altijd syntactische fouten, maar kunnen dat wel zijn want JSLint neemt zowel structurele fouten als stijlconventies in beschouwing. Het kan onmogelijk garanderen dat je programma correct functioneert, maar geeft je wel de mogelijkheid om potentiële problemen te identificeren."
- JSLint Documentatie

Laat JSLint op je script los voor het als helemaal klaar te beschouwen. Op die manier sluit je allerlei mogelijke problemen op voorhand uit.



5. Plaats Je Scripts Onderaan Je Pagina

Deze tip werd in een voorgaand artikel in deze reeks besproken, ziehier een screenshot:

Plaats JS onderaan

Het primaire doel moet altijd zijn om de pagina zo snel mogelijk te doen laden voor de gebruiker. Wanneer je een extern script invoegt, kan de browser niet verder voordat het hele bestand ingeladen is. Dat betekent dat de gebruiker langer moet wachten.

Als je JS-bestanden hebt die enkel extra functionaliteit toevoegen -- event handlers voor knoppen bijvoorbeeld -- laad die dan gerust onderaan in de pagina, net voordat je de body tag sluit. Dit is een universele beste praktijk.

Beter


6. Declareer Variabelen Buiten 'for'-statements

Doe de JS engine niet harder werken dan nodig wanneer je lange for-statements uitvoert. Bijvoorbeeld:

Slecht

Dit codefragment evalueert de lengte van someArray en doorloopt de DOM op zoek naar het 'container'-element bij elke nieuwe iteratie van de lus. Dit is uiterst inefficiënt!

Beter

Bonuspunten voor degene die in de reacties aantoont hoe dit codefragment nog verder kan worden geoptimaliseerd.


7. De Snelste Manier Om Strings Samen Te Stellen

Grijp niet altijd automatisch naar een for-statement wanneer je een array of object wil doorlopen. Wees creatief en gebruik de snelst mogelijke oplossing.

Ik ga je niet vervelen met benchmarks, maar geloof me vrij (of test het zelf uit) - dit is veruit de snelste methode!

Native methods (zoals join() ) zijn gewoonlijk veel sneller dan non-native alternatieven.
- James Padolsey, james.padolsey.com


8. Vermijd Globale Variabelen

"Door het aantal globals te reduceren tot één, herleid je de kans op conflicten met andere applicaties, widgets of libraries tot een minimum."
- Douglas Crockford

Beter

Merk op dat het aantal global variables nu tot één is herleid, namelijk het 'DudeNameSpace' object.


9. Voeg Commentaren Toe

Het lijkt onnodig in het begin, maar geloof me: het is erg belangrijk om je code van zo goed mogelijke commentaren te voorzien. Wat immers wanneer je binnen enkele maanden terugkeert naar je project om dan te ontdekken dat je niet meer weet wat lang geleden je redenering was? Of wat als een collega je code moet nakijken? Voorzie belangrijke secties van je code altijd - altijd! - van commentaar!


10. Geleidelijke Verbetering

Hou altijd rekening met gebruikers die JavaScript gedeactiveerd hebben. Het kan verleidelijk zijn om te denken, "de meeste mensen hebben JavaScript aan staan in hun browser, dus ik maak me geen zorgen om die kleine minderheid voor wie dit niet het geval is". Een dergelijke gedachtegang is echter helemaal verkeerd.

Bekijk je mooie slider eens met JavaScript gedeactiveerd. (Download de Web Developer plugin om dit snel en eenvoudig na te kijken.) Mogelijk faalt dan je hele site! Maak er daarom een gewoonte van om je sites eerst te ontwerpen in de veronderstelling dat JavaScript uit staat en verbeter daarna gaandeweg je layout met JavaScript. Deze aanpak heet progressive enhancement of geleidelijke verbetering.


11. Geef 'setInterval' of 'setTimeOut' Geen Strings Mee

Bekijk de volgende code:

Niet enkel is deze code uiterst inefficiënt, maar het functioneert ook op exact dezelfde wijze als 'eval'. Geef nooit een string mee aan setInterval of setTimeout.. Passeer in de plaats daarvan een functie:


12. Vermijd 'with'

Op het eerste zicht lijkt 'with' een uitstekende manier om diep genestelde objecten te selecteren. Bijvoorbeeld:

-- in plaats van --

Jammer genoeg hebben tests uitgewezen dat er vreemde dingen kunnen gebeuren als je 'with' gebruikt. Gebruik daarom 'var' als alternatief:


13. Gebruik {} In Plaats Van 'new Object()'

Je kan op verschillende manieren nieuwe JavaScript objecten aanmaken. De meest traditionele manier is wellicht via de 'new'-constructor:

Deze methode heeft echter een slechte reputatie in de developmentwereld. Beroep je daarom liever op de robuustere object literal methode.

Beter

Een leeg object aanmaken kan overigens zeer snel via {} :

"Object literals laten ons toe om uiterst functionele code te schrijven op een manier die voor de hand ligt voor ontwikkelaars. Het is niet nodig om constructors in te roepen of een welbepaalde volgorde van ingegeven argumenten te respecteren, etc." - dyn-web.com


14. Gebruik [] In Plaats Van 'new Array()'

Hetzelfde geldt ook voor het aanmaken van nieuwe arrays.

Oké

Beter

"Een vaak voorkomende fout in JavaScript programma's is het gebruik van een object wanneer eigenlijk een array nodig is of omgekeerd. De regel is eenvoudig: gebruik een array wanneer de property namen uit kleine, opeenvolgende getallen bestaan en in alle andere gevallen een object." - Douglas Crockford


15. Gebruik Komma's In Lange Lijsten Van Variable Declaraties

Beter

Dit maakt je programma niet sneller of efficiënter, maar wel duidelijker en overzichtelijker.


17. Voeg Altijd Puntkomma's Toe

In veel gevallen en in de meeste browsers kom je er mee weg wanneer je puntkomma's overslaat.

Toch is dit een erg slechte gewoonte die mogelijk tot grote en moeilijk oplosbare problemen kan leiden.

Beter


18. 'for in' & 'hasOwnProperty'

Wanneer je items in een object doorloopt via een 'for in'-loop, komen daar naast properties ook methods in voor. Voorkom dat door een bijkomende if-statement in te voegen om het object eerst te filteren.

Deze tip komt rechtstreeks uit JavaScript: The Good Parts van Douglas Crockford.


19. Gebruik 'console.time' Om Je Code Te Optimaliseren

Zoek je een snelle en eenvoudige (doch niet uiterst precieze) manier om te meten hoe lang een bepaalde operatie duurt? Gebruik dan de 'console.time' feature om je resultaten in de console te loggen. De feature is beschikbaar vanaf Chrome 2, Firefox 10, Safari 4 en Internet Explorer 11.


20. Lees Zoveel Je Kan

Web development blogs (zoals deze) zijn uitstekende bronnen van informatie, maar een goed boek is vaak nog beter. Wil je snel een kei worden in JavaScript ontwikkeling, leg dan altijd een boek over web development op je nachtkastje zodat je op elk moment van de dag (en nacht) kan bijleren! Hier een paar van mijn favorieten:

Lees ze... Meerdere malen!


21. Zelfexecuterende Functies

In plaats van een functie uit te voeren, kan je die ook zichzelf laten executeren wanneer de pagina laadt of de functie errond wordt uitgevoerd. Doe dit door haakjes toe te voegen na je functie (wat de functie inroept) en het hele fragment daarna met haakjes te omringen:


22. Pure JavaScript Is Sneller Dan Een Library

JavaScript libraries zoals jQuery en Mootools kunnen je bakken tijd besparen -- vooral als je veel AJAX gebruikt. Vergeet echter nooit dat een library nooit even snel kan zijn als pure, goed geschreven JavaScript.

De 'each'-methode van jQuery kan bijvoorbeeld veel gemakkelijker zijn dan een simpele for-statement, maar het is wel een tikkeltje trager.


23. Verwijder 'language'

In de vroege dagen van JavaScript voegden ontwikkelaars vaak een 'language'-attribuut toe in hun script tags:

Dit is echter al vele jaren voorbijgestreefd. Verwijder het dus.


That's All, Folks

Ziezo: drieëntwintig essentiële tips voor JavaScript beginners. Laat ons je eigen tips weten in de reacties en bedankt voor het lezen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.