Εισαγωγή στο jQuery (Μέρος 3): Αναμονή για φόρτωση της σελίδας και ανώνυμες συναρτήσεις

Διαφήμιση

Το jQuery είναι αναμφισβήτητα απαραίτητη δεξιότητα για το σύγχρονο προγραμματιστής ιστού Ποια γλώσσα προγραμματισμού πρέπει να μάθετε - Προγραμματισμός ΙστούΣήμερα θα ρίξουμε μια ματιά στις διάφορες γλώσσες προγραμματισμού Ιστού που τροφοδοτούν το Διαδίκτυο. Αυτό είναι το τέταρτο μέρος σε μια σειρά προγραμματισμού για αρχάριους. Στο μέρος 1, μάθαμε τα βασικά ... Διαβάστε περισσότερα , και σε αυτήν τη σύντομη μίνι σειρά ελπίζω να σας δώσω τη γνώση για να αρχίσετε να τη χρησιμοποιείτε στα δικά σας web έργα. Στο πρώτο μέρος του σεμιναρίου jQuery Tutorial jQuery - Ξεκινώντας: Βασικά στοιχεία & ΕπιλογείςΤην περασμένη εβδομάδα, μίλησα για το πόσο σημαντικό είναι το jQuery για οποιονδήποτε σύγχρονο προγραμματιστή ιστού και γιατί είναι φοβερό. Αυτή την εβδομάδα, νομίζω ότι ήρθε η ώρα να βρώσουμε τα χέρια μας με κάποιο κώδικα και να μάθουμε πώς ... Διαβάστε περισσότερα , εξετάσαμε ορισμένες βασικές γλώσσες και πώς να χρησιμοποιήσουμε τους επιλογείς. στο μέρος 2, προχωρήσαμε στο μέθοδοι χειρισμού του DOM

Εισαγωγή στο jQuery (Μέρος 2): Μέθοδοι & συναρτήσειςΑυτό είναι μέρος μιας συνεχούς εισαγωγής για αρχάριους στη σειρά προγραμματισμού Ιστού jQuery. Το μέρος 1 κάλυψε τα βασικά στοιχεία του jQuery σχετικά με τον τρόπο συμπερίληψής του στο έργο σας και των επιλογών. Στο μέρος 2, θα συνεχίσουμε με ... Διαβάστε περισσότερα .

Στο μέρος 3, θα αντιμετωπίσουμε το πρόβλημα του τρόπου καθυστέρησης του jQuery έως ότου φορτωθεί η σελίδα και, στη συνέχεια, θα προσπαθήσω να εξηγήσω ποιες είναι οι ανώνυμες λειτουργίες και γιατί πρέπει να γνωρίζετε γι 'αυτές.

Καθυστέρηση φόρτωσης: Πώς και γιατί;

Εάν δοκιμάσατε κάποιο από τον κώδικα από τα μέρη 1 και 2, μπορεί να έχετε αντιμετωπίσει κάποια σφάλματα, περίεργη συμπεριφορά ή πράγματα που απλά δεν λειτουργούν. Το πιο κοινό σφάλμα που αντιμετώπισα κατά την εκμάθηση του jQuery ήταν ότι δεν βρέθηκαν στοιχεία DOM - ακόμη αν και μπορούσα να τα δω απλώς στην πηγή της σελίδας, το jQuery συνέχισε να μου λέει ότι δεν μπορούσε να βρει τους! Γιατί αυτό?

Λοιπόν, όλα έχουν να κάνουν με τη σειρά με την οποία φορτώνονται τα πράγματα από το πρόγραμμα περιήγησης. Είναι απλούστερο, εάν έχετε ένα σενάριο jQuery στο πρόγραμμα περιήγησης πριν το στοιχείο DOM που αναζητά έχει πραγματικά δημιουργηθεί, το σενάριο θα φορτώνεται πρώτα, αλλά δεν θα κάνει τίποτα επειδή δεν μπορεί να βρει το στοιχείο, τότε το στοιχείο DOM θα φορτωθεί αργότερα. Αυτό είναι λιγότερο πρόβλημα αν τοποθετήσετε όλα τα σενάρια σας κοντά στο υποσέλιδο, αλλά μπορεί να συμβεί.

Η λύση είναι να τυλίξετε τα σενάρια σας σε αυτό που ονομάζεται α εκδήλωση έτοιμη για έγγραφο. Αυτό κάνει τον κώδικα που περιμένει να περιμένει έως ότου φορτωθεί πλήρως το DOM (έως ότου είναι έτοιμος). Η χρήση του είναι απλή:

$ (έγγραφο). ήδη (συνάρτηση () { // ο κωδικός σας για καθυστέρηση πηγαίνει εδώ. });

Υπάρχει ένας ακόμη πιο σύντομος τρόπος για να το κάνετε αυτό που περιγράφεται στο Τεκμηρίωση jQuery, αλλά σας προτείνω να χρησιμοποιήσετε αυτόν τον τρόπο για την αναγνωσιμότητα του κώδικα.

Αυτό το συμβάν έτοιμο για έγγραφο είναι ένα άλλο καλό παράδειγμα ενός ανώνυμη συνάρτηση, λοιπόν, ας προσπαθήσουμε να καταλάβουμε τι σημαίνει αυτό.

Ανώνυμες συναρτήσεις

Αν σαν εμένα, έχετε κάποια εμπειρία προγραμματισμού επιπέδου για αρχάριους, η ιδέα του ανώνυμες συναρτήσεις - που είναι πυρήνας του jQuery και του Javascript - μπορεί να είναι λίγο ενοχλητικό. Πρώτον, κάνει λάθη εξαιτίας της ασυμφωνίας τιράντας πολύ συνηθισμένο, γι 'αυτό θα το εξηγήσω τώρα. Αν θέλετε μια λεπτομερή εξήγηση για το γιατί οι ανώνυμες λειτουργίες είναι καλύτερες από τις κανονικές λειτουργεί σε πιο τεχνικό επίπεδο, θα πρότεινα να διαβάσετε αυτήν την αρκετά περίπλοκη ανάρτηση ιστολογίου [Όχι πλέον Διαθέσιμος].

Μέχρι τώρα, πιθανότατα έχετε συναντήσει μόνο ονομαζόμενες συναρτήσεις. Αυτές είναι συναρτήσεις που έχουν δηλωθεί με όνομα και μπορούν επομένως να κληθούν οπουδήποτε αλλού, όσες φορές θέλετε. Σκεφτείτε αυτό το ασήμαντο παράδειγμα, το οποίο θα καταγράφει ένα μήνυμα στην κονσόλα όταν φορτώνεται η σελίδα.

συνάρτηση doStuffOnPageLoad () { console.log ("κάνει πράγματα!"); } $ (έγγραφο). ήδη (doStuffOnPageLoad);

Αυτό είναι χρήσιμο εάν η λειτουργία σας έχει σχεδιαστεί για επαναχρησιμοποίηση, αλλά σε αυτήν την περίπτωση είναι κάπως περίπλοκη, καθώς θέλουμε να ενεργοποιηθεί μόνο μία φορά κατά τη φόρτωση της σελίδας. Αντ 'αυτού, δεν ασχολούμαστε με τον ορισμό μιας ξεχωριστής συνάρτησης, και απλώς την δηλώνουμε ενσωματωμένη ως παράμετρος όπως και όταν χρειάζεται. Το προηγούμενο παράδειγμα θα ήταν καλύτερα να ξαναγραφεί ως:

$ (έγγραφο). ήδη (συνάρτηση () { console.log ("κάνει πράγματα"); });

Μπορεί να μην βλέπετε πολλά πλεονεκτήματα αυτού του παρόντος - είναι μόνο οριακά λιγότερος κώδικας σε αυτήν την περίπτωση - αλλά ως τα σενάρια σας προχωρούν σε πολυπλοκότητα, θα εκτιμήσετε ότι δεν χρειάζεται να μετακινηθείτε προσπαθώντας να βρείτε λειτουργία ορισμοί. Δυστυχώς, κάνει τα πράγματα λίγο πιο δύσκολα για τους αρχάριους - απλώς κοιτάξτε όλα αυτά τα τιράντες - οπότε φροντίστε να ελέγξετε τα ακόλουθα σημεία εάν λαμβάνετε σφάλματα:

• Ο σωστός αριθμός των αντίστοιχων τιράντες - βοηθάει στην εισαγωγή του κωδικού σας.
• Σγουρά και στρογγυλά τιράντες.
• Κλείσιμο της δήλωσης με ερωτηματικό - αλλά δεν απαιτείται μετά από ένα σγουρό στήριγμα κλεισίματος.

Χρησιμοποιώντας έναν επεξεργαστή κώδικα όπως Υψηλό κείμενο 2 Δοκιμάστε το Sublime Text 2 για τις ανάγκες επεξεργασίας κώδικα μεταξύ πλατφορμώνΤο Sublime Text 2 είναι ένας επεξεργαστής κώδικα πολλαπλών πλατφορμών για τους οποίους μόλις άκουσα πρόσφατα και πρέπει να πω ότι είμαι πραγματικά εντυπωσιασμένος παρά την ετικέτα beta. Μπορείτε να κατεβάσετε την πλήρη εφαρμογή χωρίς να πληρώσετε ούτε δεκάρα ... Διαβάστε περισσότερα μπορεί πραγματικά να βοηθήσει, καθώς επισημαίνει αντίστοιχες τιράντες και αυτόματα εισάγει κώδικα για εσάς. Ένας αποκλειστικός επεξεργαστής κώδικα είναι απαραίτητος.

Αυτό είναι για αυτό το μάθημα, αλλά θα πρέπει να συνηθίσετε να περικλείετε μερικούς βασικούς χειρισμούς DOM στο συμβάν έτοιμο για έγγραφα πριν προχωρήσετε και ξεκινήστε την επεξεργασία αρχείων σε ένα πρόγραμμα επεξεργασίας κώδικα, εάν δεν το κάνετε ήδη. Την επόμενη φορά, θα ρίξουμε μια ματιά στα συμβάντα και στον τρόπο με τον οποίο χρησιμοποιούνται για την προσθήκη διαδραστικότητας σε μια σελίδα - όπως το jQuery να κάνει κάτι όταν πατηθεί ένα κουμπί. Ερωτήσεις ή σχόλια είναι πάντα ευπρόσδεκτα παρακάτω.