Πώς να χρησιμοποιήσετε το AJAX για να δημιουργήσετε μια λειτουργία αρχικοποίησης για προγραμματισμό HTML5 και CSS3 - dummies

Πολλές σελίδες HTML5 και CSS3 απαιτούν μια λειτουργία προετοιμασίας. Ο μηχανισμός φόρτωσης σώματος χρησιμοποιείται συχνά στο DOM / JavaScript για να φορτώσει σελίδες μόλις αρχίσει η φόρτωση του εγγράφου. Αυτή είναι μια λειτουργία που τρέχει νωρίς για να ρυθμίσετε την υπόλοιπη σελίδα. Ενώ το φορτίο σώματος κάνει αυτή τη δουλειά καλά, υπάρχουν δύο προβλήματα με την παραδοσιακή τεχνική:

• Απαιτεί αλλαγή στο HTML. Ο κώδικας JavaScript πρέπει να διαχωριστεί πλήρως από το HTML. Δεν χρειάζεται να αλλάξετε την HTML για να λειτουργήσει με το JavaScript.

• Ο χρόνος δεν είναι ακόμα σωστός. Ο κώδικας που καθορίζεται στο φορτίο σώματος δεν εκτελείται παρά μόνο αφού εμφανιστεί ολόκληρη η σελίδα. Θα ήταν καλύτερο αν ο κωδικός καταχωρήθηκε μετά από το DOM είναι φορτωμένο αλλά πριν εμφανιστεί η σελίδα.

Πώς να χρησιμοποιήσετε το $ (έγγραφο). ready ()

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

είναι έτοιμο. html $ (έγγραφο). έτοιμο (changeMe); συνάρτηση changeMe () {$ ("# output"). html ("Έχω αλλάξει")?}

Χρήση του εγγράφου. έτοιμος μηχανισμός
Μήπως αυτή η αλλαγή;

Αυτός ο κώδικας χρησιμοποιεί την τεχνική jQuery για την εκτέλεση κώδικα αρχικοποίησης:

• Η ετικέτα σώματος δεν έχει πλέον χαρακτηριστικό onload . Αυτό είναι ένα κοινό χαρακτηριστικό του προγραμματισμού jQuery. Το HTML δεν έχει πλέον άμεσες συνδέσεις με το JavaScript, επειδή το jQuery επιτρέπει στον κώδικα JavaScript να επισυναφθεί στην ιστοσελίδα.

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

• Το έγγραφο $ δημιουργεί ένα αντικείμενο jQuery από όλο το έγγραφο. Το σύνολο του εγγράφου μπορεί να μετατραπεί σε αντικείμενο jQuery καθορίζοντας έγγραφο μέσα στη συνάρτηση $ (). Σημειώστε ότι δεν χρησιμοποιείτε εισαγωγικά σε αυτή την περίπτωση.

• Η καθορισμένη λειτουργία εκτελείται αυτόματα. Σε αυτή τη συγκεκριμένη περίπτωση, θέλετε να εκτελέσετε τη λειτουργία changeMe (), ώστε να την τοποθετήσετε στην παράμετρο της μεθόδου ready (). Σημειώστε ότι αυτό αναφέρεται στο changeMe ως μεταβλητή, οπότε δεν έχει εισαγωγικά ή παρενθέσεις.

Βλέπετε πολλά άλλα μέρη (ιδιαίτερα στο χειρισμό συμβάντων) όπου το jQuery αναμένει μια συνάρτηση ως παράμετρο. Μια τέτοια λειτουργία συχνά αναφέρεται ως συνάρτηση επανάκλησης επειδή λέγεται μετά από κάποιο συμβάν.Επίσης, βλέπετε λειτουργίες επανάκλησης που ανταποκρίνονται στα συμβάντα πληκτρολογίου, την κίνηση του ποντικιού και την ολοκλήρωση μιας αίτησης AJAX.

Εναλλακτικές λύσεις για το έγγραφο. έτοιμο

Μερικές φορές βλέπετε μερικές συντομεύσεις επειδή είναι τόσο συνηθισμένο να τρέχετε τον κώδικα προετοιμασίας. Μπορείτε να συντομεύσετε

$ (έγγραφο). έτοιμο (changeMe);

στον ακόλουθο κώδικα:

$ (changeMe);

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

Μπορείτε επίσης να δημιουργήσετε μια ανώνυμη λειτουργία απευθείας:

$ (έγγραφο). έτοιμο (λειτουργία () {$ ("# εξόδου"). html ("Έχω αλλάξει");});

Αυτή η μέθοδος (ανώνυμη λειτουργία) είναι δυσκίνητη, αλλά συχνά βλέπετε κώδικα jQuery χρησιμοποιώντας αυτήν την τεχνική. Μπορείτε να δημιουργήσετε μια λειτουργία που ονομάζεται init () και να την καλέσετε με μια γραμμή όπως αυτή:

$ (init);

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