JavaScript-tips

Mikael Edvardsson och Andreas Hemmingsson som arbetat med HSR-appen inledde med att gå igenom strukturen. De har använt sig av PhoneGap, ett ramverk för att göra mobilappar för flera plattformar samtidigt med hjälp av HTML, CSS och JavaScript. Då de inte hade arbetat så mycket med JavaScript tidigare så kom fokus att hamna kring den delen och vi fick till en gemensam diskussion som var givande för alla närvarande.

Ett av de första tipsen som kom upp var att köra sin JavaScript-kod genom JSLint. Det är ett kodkvalitetsverktyg skrivet av Douglas Crockford som går igenom koden och varnar för syntaxfel, uppenbara missar, riskabla användningar av språket med mera. Många buggar kan hittas redan här.

En sak som en del inte gillar med JSLint är att det så strikt följer Douglas Crockfords egna kodkonventioner som man kanske inte alltid håller med om. För dessa finns JSHint som är lite snällare och dessutom har fler inställningsmöjligheter.

Diskussionen kom sedan in på inkapsling av kod. Det som kommit att kallas JavaScript Module Pattern är idag en välanvänd metod för att bland annat undvika globala variabler och funktioner. Exakt hur man gör det finns det lite olika sätt för och enklast är nog att söka efter det på webben. En länk till ett exempel finns dock i slutet av den här texten och den har i sin tur en länk vidare till en onlinebok om man vill gå ännu djupare.

Ett problem som hade uppstått under utvecklingen var långa kedjor av callbacks när det var asynkrona anrop som behövde göras i rätt ordning. Här kom vi inte riktigt fram till en verkligt snygg lösning men något som kanske skulle kunna hjälpa med sådant är till exempel jQuerys queue-funktion. Med den kan man lägga till funktioner som ska exekveras till en kö som sedan körs i den ordning man lade till dem.

JavaScript har en del egenheter som man kanske inte alltid är van vid från andra språk men med rätt verktyg och några nya designmönster så kan man skriva strukturerad och lättförståelig kod även med JavaScript.

– PhoneGap
– JSLint
– JSHint
– How Do You Structure JavaScript? The Module Pattern Edition
– jQuery API: .queue()