Sådan bruges AJAX til at oprette en initialiseringsfunktion til HTML5 og CSS3 Programmering - dummies

Mange HTML5 og CSS3 sider kræver en initialiseringsfunktion. Kropsbelastningsmekanismen bruges ofte i DOM / JavaScript til at gøre siderne indlæst, så snart dokumentet er begyndt at indlæse. Dette er en funktion, der løber tidligt for at oprette resten af ​​siden. Mens body onload gør dette job godt, findes der et par problemer med den traditionelle teknik:

• Det kræver en ændring af HTML'en. JavaScript-koden skal være fuldstændig adskilt fra HTML. Du skal ikke ændre din HTML for at få det til at fungere sammen med JavaScript.

• Tidspunktet er stadig ikke helt rigtigt. Koden angivet i body onload udføres ikke, før hele siden vises. Det ville være bedre, hvis koden blev registreret efter DOM'en er indlæst, men før siden vises.

Sådan bruger du $ (dokument). klar ()

jQuery har et godt alternativ til kropsbelastning, der overvinder disse mangler. Se koden for at se, hvordan det virker:

klar. html $ (dokument). klar (changeme); funktion changeMe () {$ ("# output"). html ("Jeg ændrede");}

Brug af dokumentet. klar mekanisme
Skiftede dette?

Denne kode anvender jQuery-teknikken til at køre initialiseringskoden:

• Kodenavnet har ikke en onload -attribut. Dette er et fælles træk ved jQuery programmering. HTML'en har ikke længere direkte links til JavaScript, fordi jQuery lader JavaScript-koden føjes til websiden.

• Initialiseringsfunktionen oprettes med $ (dokument). klar () funktion. Denne teknik fortæller browseren at udføre en funktion, når DOM'en er færdig med at indlæse (så den har adgang til alle elementer i formularen), men før siden vises (således at eventuelle effekter af formularen vises øjeblikkeligt for brugeren).

• $ dokument laver et jQuery-objekt fra hele dokumentet. Hele dokumentet kan omdannes til et jQuery-objekt ved at angive et dokument inde i $ () -funktionen. Bemærk, at du ikke bruger citatmærker i dette tilfælde.

• Den angivne funktion køres automatisk. I dette særlige tilfælde vil du køre funktionen changeMe (), så du placerer det i parameteren for klar () -metoden. Bemærk at dette refererer til changeMe som en variabel, så det har ingen citatmærker eller parenteser.

Du kan se flere andre steder (især i hændelseshåndtering), hvor jQuery forventer en funktion som parameter. En sådan funktion kaldes ofte som en tilbagekaldingsfunktion , fordi den hedder efter en form for begivenhed er opstået.Du kan også se tilbagekaldsfunktioner, der svarer til tastaturhændelser, musebevægelse og afslutning af en AJAX-anmodning.

Alternativer til dokumentation. klar

Du kan undertiden se et par genveje, fordi det er så almindeligt at køre initialiseringskoden. Du kan forkorte

$ (dokument). klar (changeme);

til følgende kode:

$ (changeMe);

Hvis denne kode ikke er defineret inde i en funktion, og changeMe er en funktion, der er defineret på siden, kører jQuery automatisk direkte som i dokumentet. klar tilgang.

Du kan også oprette en anonym funktion direkte:

$ (dokument). klar (funktion () {$ ("# output"). html ("Jeg ændrede");});

Denne (anonyme funktion) metode er besværlig, men du ser jQuery-kode ofte ved hjælp af denne teknik. Du kan oprette en funktion kaldet init () og kalde den med en linje som denne:

$ (init);

Denne teknik er enkel og let at forstå, men du kan støde på de andre variationer, når du undersøger kode på nettet.