Hopp til innholdet

cjohansen.no

Syntakskontroll for JavaScript

JavaScript er et veldig dynamisk språk hvor "det meste er lov". Men selv i et så løssluppent språk er det regler for hva du kan og ikke kan gjøre. Ikke minst er det en del oppfatninger av hvordan du bør og ikke bør kode for å unngå problemer av diverse sort.

Det som er lov != det som er fornuftig

I JavaScript kan man foreta seg mye rart, selv om det ikke klassifiserer som fornuftig kode. Det er sågar mulig å få dårlig kode til å funke bra også. Så når kommer problemene? Vel, om du ikke koder riktig vil du sannsynligvis støte på problemer i flere tilfeller:

...og mange fler. Og da har jeg ikke nevnt hvilket uvurderlig verktøy ryddig syntaks er når man skal debugge kode.

Hva er dårlig og hva er god praksis?

God og dårlig praksis handler i grunnen om to ting. På den ene siden er det praksis som øker risiko for feil betraktelig, så som å benytte seg av implisitt globale variable, å utelate semikolon på slutten av en linje og enkle if-tester (og andre blokker) uten klammeparanteser.

På den andre siden er det praksis som potensielt gjør koden vanskelig å forstå, ved at den blir tett/kompakt og "tricksy". Det er kanskje stilig når du lager det, men det blir fort uforståelig, selv for deg. Av eksempler i denne båsen kan jeg nevne lange uttrykk med liberalt bruk av operatorer som ++ og --.

Hvem bestemmer, og hvordan kontrollerer man?

Hva som gjør kode farlig/usikker/"error prone" og uforståelig er ikke noe man trenger å ta stilling til i hvert eneste prosjekt man jobber med. Det er heldigvis noen smarte hoder som har gjort dette for oss, og laget syntakssjekkeren JsLint.

Hvordan kjøre JsLint

JsLint er implementert i JavaScript, og kan kjøres i en nettleser direkte fra jslint.com. Dette er vel og bra for å prøve ut en gang i blant, men skal man ta syntakskontroll alvorlig bør man hente ned js-filen og kjøre JsLint med Rhino fra kommandolinjen. På denne måten kan man gjøre det til en rutine å sjekke all kode før man synkroniserer mot versjonskontrollsystem eller lignende.

jslint.com har en oppskrift for å kjøre med Rhino. Rhino er forøvrig Mozillas JavaScript-motor implementert i Java. Hvis du allerede har installert for eksempel JsDocToolkit (som jeg skrev om forleden), har du allerede Rhino. Gitt at du har det kan du lage følgende bat-fil for Windows for å enkelt kunne kjøre JsLint mot script-filer hvor som helst:

@echo off
set JSDOC_BASE_DIR=d:\bin\jsdoc_toolkit-1.4.0
set JSLINT_BASE_DIR=d:\bin\jslint
java -jar %JSDOC_BASE_DIR%\app\js.jar %JSLINT_BASE_DIR%\jslint.js %*

Et tilsvarende shell-script for Linux ser ut som:

@echo off
export JSDOC_BASE_DIR=~/bin/jsdoc_toolkit-1.4.0
export JSLINT_BASE_DIR=~/bin/jslint
java -jar $JSDOC_BASE_DIR/app/js.jar $JSLINT_BASE_DIR/jslint.js $*

For å kunne kjøre denne som "jslint fil.js" må du under Windows putte bat-filen i en mappe som er på PATH-en, og under Linux må du gjøre scriptet kjørbart ( chmod u+x jslint.sh) og symlinke det til et sted som finnes på PATH-en.

Hva kan JsLint hjelpe med?

Vel, du kan lese detaljer om hva JsLint finner og klager på på dokumentasjonen, men noen høydepunkter kan nevnes:

Implisitte globale variable

Følgende kode er tillatt i JavaScript:

enVar = 'en streng';

Selv uten at enVar er deklarert. Uten en var vil JavaScript anta at variabelen er global. Dette kan gi problemer som er vanskelig å finne når du setter sammen flere script.

Semikolon

Som tidligere nevnt; alle statements skal avsluttes med semikolon. Om du bruker et pakkeverktøy så som YUI Compressor eller Packer er dette helt nødvendig.

Påkrevde blokker

Skriver du:

if (a == b)
    alert('hey!');

...gir JsLInt deg fingeren. Alle blokker skal settes i klammeparanteser, altså:

if (a == b) {
    alert('hey!');
}

Dette vil hjelpe deg å unngå unødvendige feil, og vil være helt nødvendig når du pakker sammen koden.

Tilordning i tester

Rekk opp hånda alle som har gjort følgende:

if (a = b) {
    alert('hey!');
}

...og lurt på hvorfor testen alltid slår til. Vel, JsLint sier ifra når du har tilordninger i en test, ettersom den antar at du egentlig mente å sammenligne. Noe du sannsynligvis også gjorde.

...og mye mer

Sjekk ut dokumentasjonen eller test JsLint nå.

Dine erfaringer?

Er det noen der ute som har brukt JsLint eller lignende systemer? Hva er i så fall deres erfaring over tid? Og finnes det noen gode konkurrenter til dette glimrende programmet?

Muligens relatert

2006 - 2012 Christian Johansen Creative Commons Lisens