Inleiding tot jQuery (deel 3) Wacht tot de pagina wordt geladen en anonieme functies

jQuery is aantoonbaar een essentiële vaardigheid voor de moderne webontwikkelaar Welke programmeertaal om te leren - Webprogrammering Welke programmeertaal om te leren - Webprogrammering Vandaag gaan we de verschillende webprogrammeertalen bekijken die het internet voeden. Dit is het vierde deel in een beginnersprogrammaserie. In deel 1 leerden we de basis van ... Lees meer en in deze korte mini-serie hoop ik je de kennis te geven om er gebruik van te maken in je eigen webprojecten. In het eerste deel van onze jQuery-zelfstudie jQuery Tutorial - Aan de slag: Basics & Selectors jQuery Tutorial - Aan de slag: Basics & Selectors Vorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met een code en leren hoe ... Lees meer, we hebben gekeken naar een aantal taalfundamenten en hoe selectors te gebruiken; in deel 2 zijn we overgegaan op methoden voor het manipuleren van de DOM Inleiding op jQuery (deel 2): ​​Methoden en functies Inleiding op jQuery (deel 2): ​​methoden en functies Dit maakt deel uit van een doorlopende introductie voor beginners van jQuery-webprogrammaserie . Deel 1 behandelde de jQuery-basisprincipes van hoe deze in uw project moest worden opgenomen, en selectors. In deel 2 gaan we verder met ... Lees meer .

In deel 3 behandelen we het probleem hoe jQuery moet worden vertraagd totdat de pagina is geladen. Vervolgens zal ik proberen uit te leggen wat anonieme functies zijn en waarom u ze moet weten.

Vertraagde laden: hoe en waarom?

Als je een deel van de code van deel 1 en 2 hebt uitgeprobeerd, ben je misschien een aantal fouten, vreemd gedrag of dingen die gewoon niet werken tegengekomen. De meest voorkomende fout bij het leren van jQuery was dat DOM-elementen niet werden gevonden - hoewel ik ze duidelijk in de bron van de pagina kon zien, bleef jQuery me vertellen dat het ze gewoon niet kon vinden! Waarom is dat?

Nou, het heeft allemaal te maken met de volgorde waarin dingen door de browser worden geladen. Op zijn eenvoudigst, als u een jQuery-script in de browser uitvoert voor het DOM-element waarnaar het zoekt, is feitelijk gemaakt, het script wordt eerst geladen, maar niets gedaan omdat het het element niet kan vinden, waarna het DOM-element later wordt geladen. Dit is minder een probleem als u al uw scripts in de buurt van het voetgedeelte plaatst, maar het kan nog steeds gebeuren.

De oplossing is om je scripts in te pakken in wat a heet documentklaar evenement. Hierdoor blijft de bijgevoegde code wachten tot de DOM volledig is geladen (totdat deze is voltooid) klaar). Het gebruiken ervan is eenvoudig:

$ (document) .ready (function () // je code om uit te stellen gaat hier);

Er is een nog kortere manier om dit te doen, zoals beschreven in de documentatie van jQuery, maar ik raad je aan om deze manier te gebruiken voor het lezen van de code..

Dit evenement dat klaar is voor documenten is een ander goed voorbeeld van een anonieme functie, dus laten we proberen te begrijpen wat dit betekent.

Anonieme functies

Als je net als ik een programmeerervaring op beginnersniveau hebt, dan is dat het idee anonieme functies - wat de kern is van jQuery en Javascript - misschien een beetje verontrustend. Ten eerste maakt het fouten door niet-overeenkomende beugels vrij vaak, daarom ga ik het nu uitleggen. Als je een grondige uitleg wilt waarom anonieme functies beter zijn dan reguliere benoemde functies op een meer technisch niveau, raad ik aan dit vrij complexe blogbericht te lezen [niet langer beschikbaar].

Tot nu toe bent u waarschijnlijk alleen maar tegengekomen benoemde functies. Dit zijn functies die zijn gedeclareerd met een naam en die daarom nergens anders kunnen worden gebeld, zo vaak als u maar wilt. Overweeg dit triviale voorbeeld, dat een bericht bij de console zal registreren wanneer de pagina wordt geladen.

function doStuffOnPageLoad () console.log ("dingen doen!");  $ (document) .ready (doStuffOnPageLoad);

Dit is handig als je functie is ontworpen om opnieuw te worden gebruikt, maar in dit geval is het een soort van ingewikkelde omdat we alleen echt willen dat het eenmaal vuurt wanneer de pagina is geladen. In plaats daarvan doen we niet de moeite om een ​​afzonderlijke functie te definiëren en verklaren we deze inline gewoon als een parameter waar en wanneer nodig. Het vorige voorbeeld zou daarom beter herschreven kunnen worden als:

$ (document) .ready (function () console.log ("doing stuff"););

Op dit moment zie je misschien niet veel voordelen hiervan - in dit geval is het maar een klein beetje minder code - maar naarmate je scripts complexer worden, zul je het prettig vinden als je niet hoeft te zoeken naar functiedefinities. Helaas maakt dit dingen voor beginners een beetje moeilijker - kijk maar naar al die beugels - dus zorg ervoor dat je de volgende punten controleert als je fouten krijgt:

• Juist aantal corresponderende accolades - het inspringen van uw code helpt.
• Krullen versus ronde beugels.
• Verklaring sluiten met een puntkomma - maar niet nodig na een sluitende accolade.

Een codebewerker gebruiken zoals Sublime Text 2 Try Out Sublime-tekst 2 voor uw platformonafhankelijke codebewerkingsbehoeften Probeer uit sublieme tekst 2 voor uw codewijzigingsprogramma's op verschillende platforms U hebt Sublime nodig Tekst 2 is een platformonafhankelijke codebewerker waar ik pas onlangs van hoorde en ik moet zeggen dat ik erg onder de indruk ben ondanks het bèta-label. Je kunt de volledige app downloaden zonder een cent te betalen ... Read More kan echt helpen, omdat het corresponderende accolades en automatisch inspringende code voor jou markeert. Een speciale code-editor is echt essentieel.

Dat is het voor deze les, maar je moet er wel een gewoonte van maken om een ​​aantal elementaire DOM-manipulaties bij te houden in een document-ready evenement voordat je verdergaat, en beginnen met het bewerken van bestanden in een code-editor als je dat nog niet bent. De volgende keer bekijken we gebeurtenissen en hoe deze worden gebruikt om interactiviteit aan een pagina toe te voegen, zoals jQuery laten doen wanneer er op een knop wordt geklikt. Vragen of opmerkingen zijn altijd welkom hieronder.

Ontdek meer over: JavaScript, jQuery, Programming, Web Development.