Inleiding tot jQuery (deel 3): wachten tot de pagina is geladen en anonieme functies

Advertentie

jQuery is misschien wel een essentiële vaardigheid voor het moderne webontwikkelaar Welke programmeertaal om te leren - WebprogrammeringVandaag gaan we kijken naar de verschillende webprogrammeertalen die het internet van stroom voorzien. Dit is het vierde deel van een programmeerserie voor beginners. In deel 1 leerden we de basis van ... Lees verder , en in deze korte miniserie hoop ik je de kennis te geven om er gebruik van te gaan maken in je eigen webprojecten. In de eerste deel van onze jQuery-zelfstudie jQuery-zelfstudie - Aan de slag: basisprincipes en selectorsVorige week sprak ik over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd is dat we onze handen vuil maken met wat code en leren hoe ... Lees verder hebben we gekeken naar enkele taalprincipes en hoe u selectors kunt gebruiken; in deel 2 zijn we verder gegaan methoden om de DOM te manipuleren Inleiding tot jQuery (deel 2): ​​methoden en functies

Dit maakt deel uit van een doorlopende introductie voor beginners in de jQuery-webprogrammeerserie. Deel 1 behandelde de basis van jQuery over hoe u het in uw project kunt opnemen, en selectors. In deel 2 gaan we verder met ... Lees verder .

In deel 3 gaan we in op het probleem van het uitstellen van jQuery totdat de pagina is geladen. Vervolgens zal ik proberen uit te leggen wat anonieme functies zijn en waarom u hiervan op de hoogte moet zijn.

Vertraagd laden: hoe en waarom?

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

Nou, het heeft allemaal te maken met de volgorde waarin de dingen door de browser worden geladen. In het eenvoudigste geval, als u een jQuery-script in de browser heeft voordat het DOM-element waarnaar het op zoek is, is daadwerkelijk gemaakt, het script wordt eerst geladen, maar doet niets omdat het het element niet kan vinden, daarna wordt het DOM-element geladen. Dit is minder een probleem als u al uw scripts in de buurt van de voettekst plaatst, maar het kan nog steeds gebeuren.

De oplossing is om je scripts in te pakken in wat heet a document gereed evenement. Hierdoor wacht de ingesloten code totdat de DOM volledig is geladen (totdat het is klaar). Het gebruik ervan is eenvoudig:

$ (document) .ready (function () { // uw code om te vertragen komt hier. });

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

Dit documentklare evenement 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 wat programmeerervaring op beginnersniveau hebt, is het idee van anonieme functies - wat de kern is van jQuery en Javascript - is misschien een beetje verontrustend. Ten eerste maakt het fouten als gevolg van niet-overeenkomende beugels heel gewoon, daarom ga ik het nu uitleggen. Als u een grondige uitleg wilt over waarom anonieme functies beter zijn dan reguliere namen functies op een meer technisch niveau, zou ik aanraden om deze vrij complexe blogpost te lezen Beschikbaar].

Tot nu toe ben je waarschijnlijk alleen maar tegengekomen benoemde functies. Dit zijn functies die zijn gedeclareerd met een naam en daarom overal zo vaak kunnen worden aangeroepen als u maar wilt. Beschouw dit triviale voorbeeld, dat een bericht naar de console logt wanneer de pagina wordt geladen.

functie doStuffOnPageLoad () { console.log ("dingen doen!"); } $ (document) .ready (doStuffOnPageLoad);

Dit is handig als uw functie is ontworpen om opnieuw te worden gebruikt, maar in dit geval is het een beetje ingewikkeld, omdat we willen dat het maar één keer wordt geactiveerd wanneer de pagina wordt geladen. In plaats daarvan nemen we niet de moeite om een ​​afzonderlijke functie te definiëren en verklaren we deze gewoon als parameter als en wanneer nodig. Het vorige voorbeeld zou daarom beter herschreven kunnen worden als:

$ (document) .ready (function () { console.log ("dingen doen"); });

Je ziet hier misschien niet veel voordelen van - het is in dit geval slechts iets minder code - maar als uw scripts vorderen in complexiteit. U zult het waarderen als u niet hoeft rond te springen om een ​​functie te vinden definities. Helaas maakt het het voor beginners een beetje moeilijker - kijk maar naar al die beugels - dus zorg ervoor dat je de volgende punten controleert als je fouten krijgt:

• Correct aantal overeenkomstige accolades - het inspringen van uw code helpt.
• Krullend versus ronde beugels.
• Statement sluiten met een puntkomma - maar niet nodig na het sluiten van een accolade.

Met behulp van een code-editor zoals Sublieme tekst 2 Probeer Sublime Text 2 uit voor uw platformonafhankelijke bewerkingsbehoeftenSublime Text 2 is een platformonafhankelijke code-editor waar ik pas onlangs van gehoord heb, en ik moet zeggen dat ik erg onder de indruk ben ondanks het beta-label. U kunt de volledige app downloaden zonder een cent te betalen ... Lees verder kan echt helpen omdat het de bijbehorende accolades markeert en de code automatisch voor u laat inspringen. Een speciale code-editor is eigenlijk essentieel.

Dat is het voor deze les, maar je moet de gewoonte aannemen om enkele basis DOM-manipulaties in te sluiten in document ready event voordat je verder gaat en begin met het bewerken van bestanden in een code-editor als je dat niet bent nu al. De volgende keer bekijken we evenementen en hoe ze worden gebruikt om interactiviteit aan een pagina toe te voegen, zoals jQuery iets laten doen wanneer er op een knop wordt geklikt. Vragen of opmerkingen zijn altijd welkom hieronder.