14.07.10 | kl. 11:24 | Aktuelt, Prosabladet
Sæt fut i dit Javascript med JQuery
Uden JQuery ville Lønsomfortjent.dk ikke fungere, som det gør. Det er især brugerfladekomponenter i biblioteket, der benyttes på sitet.
De unge ved det ikke, men gamle gråskæg kan fortælle: I fordums tid var Javascript-udvikling, der skulle virke i flere browsere, et rent helvede.
Kompabiliteten på tværs af browserne var nærmest ikke-eksisterende, og tit endte koden som en gru af if-sætninger, der skulle udføre specifikke kald til en bestemt klients Javascript-motor.
Gudskelov har tingene ændret sig til det langt bedre. Men der kan stadig være hjørner, hvor tingene ikke er helt afstemt. Derfor har en lang række Javascript-biblioteker, som Dojo og Qooxdoo, set dagens lys, og det mest populære af slagsen er JQuery, som efterhånden har et par år på bagen.
Blandt funktionerne i JQuery er muligheden for at finde og manipulere elementer i HTML-koden, som f.eks. at gøre et div-tag usynligt. Events kan også nemmere håndteres, og stylesheet kan manipuleres. Dertil kommer en række effekter og animationer samt en nemmere måde at udføre Ajax-kald på. Oven i hatten er et selvstændigt bibliotek med brugerfladekomponenter, som kan give ekstra funktionalitet og spræl i webapplikationen.
– Vi bruger det til at gøre applikationen lækker. Med det her bibliotek kan du få det hele til at ligne en million, samtidig med at det er et letvægts-miljø, siger Klaus Lokmann Knudsen, som står bag websitet Lønsomfortjent.dk, der som navnet fortæller kan afgøre, om man får det rigtige i løn i forhold til kvalifikationer og andre parametre.
Nej til tunge enterprise-frameworks
Til daglig arbejder Klaus Lokmann Knudsen som systemudvikler hos ATP, men i enterprise-verdenen er der ikke så meget efterspørgsel på de lette værktøjer. Hos ATP er det Oracles tunge Java-produkter, som kører butikken, men det kan også blive for meget af det gode.
– Vi kendte de her enterprise-løsninger, og det gad vi ikke. Så vi har skrevet vores eget simple webframework, og der indkorporerede vi vores eget Javascript. Det er smartere at få det ind i koden og genbruge det hele tiden.
Det gik fint nok til at starte med, men Lønsomfortjent.dk blev hurtigt mere kompliceret, og da begyndte problemerne med browserkompatibiliteten. Klaus Lokmann Knudsen og hans partnere begyndte at kigge sig om efter en bedre løsning.
– Vi spurgte folk, hvad de brugte – det var JQuery, og det fungerer jo fremragende. Vi ville også have et uafhængigt framework, altså et, som ikke er gift med noget andet.
Her faldt Dojo af vognen, da det bibliotek er for tæt knyttet til Java-verdenens Spring-framework efter Klaus Lokmann Knudsens smag.
– Og jeg har fået nok af alle de der frameworks. Det sidder jeg og bokser med til daglig, så det kunne jeg ikke selv finde på at bruge.
Det er først og fremmest brugerfladekomponenterne i JQuery, som Lønsomfortjent.dk udnytter, og det er ikke kun til pynt. I sin nuværende udgave ville sitet slet ikke kunne fungere uden JQuery.
Slip for at vedligeholde kode
Alle funktioner i JQuery starter med et dollartegn, som simpelthen er navnet på JQuery-objektet, der indeholder al funktionaliteten. Det kan se lidt spøjst ud ved første øjekast, men humlen er blot, at man slipper for at skulle skrive objektets navn igen og igen ved hvert eneste kald.
Men man kunne jo også blot skrive det hele selv. Hertil siger Klaus Lokmann Knudsen:
– Fordelen ved at skrive selv er, at du har fuld kontrol. Sådan gjorde jeg også før, men problemet er, at nu kommer der HTML5, og det skal vi jo også være med på. Der ville man jo nok komme ud i nogle problemer, hvis man skrev selv. Jeg er ikke sikker på, at mit eget Javascript virker på samme måde i HTML5, og så står du med en masse kode, som du selv har skrevet på i mange år, og det er dit problem at vedligeholde det.
-
Sådan fungerer JQuery
JQuery gør det nemt at benytte funktionalitet som eksempelvis Ajax-kald, uden at man skal spekulere på forskelle i browsernes måde at håndtere teknologien på. Herunder ses et eksempel fra Wikipedia, hvor der udføres en POST-forespørgsel via Ajax. Det mystiske dollartegn er JQuery-objektet, som kaldes med metoden Ajax. Parametrene er type, som angiver http-metoden, kaldets URL, de data, som skal sendes, og en callback-metode "success", som kaldes, når Ajax-forespørgslen er afsluttet.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
PRINT
