Μειονεκτήματα της κανονικής φόρτωσης JS
Η διεπαφή πρέπει να ξεκινήσει την απόδοση μετά τη φόρτωση του js
Εάν υπάρχουν εξαρτήσεις μεταξύ js, πρέπει να φορτωθούν με τη σειρά σύμφωνα με τις εξαρτήσεις. Εάν οι εξαρτήσεις είναι περίπλοκες, είναι πιο ενοχλητικό να γράψετε και να διατηρήσετε τον κώδικα
Έτσι, require.js δημιουργήθηκε στη φωνή των πλατιών μαζών του λαού.
Ο ρόλος της require.js
Εφαρμόστε ασύγχρονη φόρτωση του js για να αποφύγετε τη μη ανταπόκριση της σελίδας
Διαχειριστείτε τις εξαρτήσεις μεταξύ των λειτουργικών μονάδων για να διευκολύνετε τη σύνταξη και τη συντήρηση κώδικα
require.js φόρτωση
Πρώτα, μεταβείτε στον [επίσημο ιστότοπο] http://requirejs.org/ κατεβάστε την πιο πρόσφατη έκδοση
Καταθέστε το ληφθέν ή αντιγραμμένο require.js στον κατάλογο του έργου
Φορτώστε require.js στην επιθυμητή σελίδα
Άμεση φόρτωση: Γράψτε <scrip{filter}t src="js/require.js"></scrip{filter}t>
Ασύγχρονη φόρτωση: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Σημείωση: async σημαίνει ότι αυτό το αρχείο πρέπει να φορτωθεί ασύγχρονα για να αποφευχθεί η μη απόκριση της ιστοσελίδας. Ο IE δεν υποστηρίζει ασυγχρονισμό, επομένως φορτώστε το χαρακτηριστικό defer.
Μόλις φορτωθεί το require.js, το επόμενο βήμα είναι να φορτώσουμε τον δικό μας κώδικα. Ας υποθέσουμε ότι το δικό μας αρχείο κώδικα είναι main.js, τοποθετημένο επίσης κάτω από τον κατάλογο js. Έτσι, απλώς γράψτε τα εξής: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Η λειτουργία του χαρακτηριστικού data-main είναι να καθορίσει την κύρια ενότητα του προγράμματος web. Στο παραπάνω παράδειγμα, αυτό το αρχείο θα φορτωθεί πρώτα require.js το main.js κάτω από τον κατάλογο js. Δεδομένου ότι require.js προεπιλεγμένο επίθημα αρχείου είναι js, μπορείτε να συντομογραφήσετε main.js στο κύριο.
Πώς να γράψετε την κύρια ενότητα
Η main.js από την προηγούμενη ενότητα ονομάζεται κύρια ενότητα. Δηλαδή η μέθοδος εισόδου για ολόκληρη την ενότητα.
Πώς να γράψετε main.js
Μέθοδοι γραμμένες απευθείας στο main.js χωρίς να βασίζονται σε άλλες ενότητες
main.function()
Η κύρια μονάδα εξαρτάται από άλλες ενότητες, επομένως χρησιμοποιήστε τη συνάρτηση require()
main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Κάποιος κώδικας εδώ
});
Η συνάρτηση require() δέχεται δύο παραμέτρους:
Η πρώτη παράμετρος είναι ένας πίνακας που αντιπροσωπεύει τις μονάδες από τις οποίες εξαρτάται
Η δεύτερη παράμετρος είναι μια συνάρτηση επανάκλησης που θα κληθεί αφού φορτωθούν όλες οι μονάδες που καθορίζονται στο μπροστινό μέρος. Οι προστιθέμενες μονάδες μεταβιβάζονται με τη μορφή παραμέτρων, έτσι ώστε να μπορούν να χρησιμοποιηθούν μέσα στη συνάρτηση επανάκλησης.
Φόρτωση μονάδων
Παράδειγμα: Εάν η εξαρτημένη λειτουργική μονάδα της κύριας ενότητας (main.js) είναι ['jquery', 'crypto-js', 'anything']
Φόρτωση από προεπιλογή
Εάν τα αρχεία αυτών των τριών εξαρτώμενων λειτουργικών μονάδων είναι jquery.js, crypto-js.js, anything.js και main.js στον ίδιο κατάλογο, μπορούν να φορτωθούν αυτόματα σύμφωνα με την προηγούμενη ενότητα
Φόρτωση διαμόρφωσης require.config()
require.config() είναι γραμμένο στην κεφαλή της κύριας ενότητας (main.js).
Πώς γράφονται οι μονάδες AMD
require.js φορτωμένη μονάδα, χρησιμοποιώντας την προδιαγραφή AMD. Δηλαδή, η ενότητα πρέπει να είναι γραμμένη σύμφωνα με τους κανονισμούς της AMD.
Συγκεκριμένα, οι ενότητες πρέπει να ορίζονται από μια συγκεκριμένη συνάρτηση define(). Εάν ένα άρθρωμα δεν εξαρτάται από άλλα άρθρα, μπορεί να οριστεί απευθείας στη συνάρτηση define()
Ας υποθέσουμε ότι υπάρχει τώρα ένα αρχείο math.js που ορίζει μια μαθηματική ενότητα. Στη συνέχεια, math.js γράψετε:
Δείτε πώς μπορείτε να φορτώσετε:
Εάν η ενότητα εξαρτάται επίσης από άλλες ενότητες, τότε το πρώτο όρισμα της συνάρτησης define() πρέπει να είναι ένας πίνακας που υποδεικνύει τις εξαρτήσεις της μονάδας.
Όταν η συνάρτηση require() φορτώσει την παραπάνω μονάδα, θα φορτώσει πρώτα myLib.js αρχείο.
Φόρτωση μονάδων που δεν είναι AMD
Υπάρχουν πολλές μονάδες στην αγορά που δεν πληρούν τις προδιαγραφές της AMD require.js μπορούν να φορτωθούν
Για να μπορέσουν να φορτωθούν αυτές οι ενότητες, πρέπει να ρυθμιστούν σε require.config() για να ορίσουν ορισμένα από τα χαρακτηριστικά τους
Για παράδειγμα, noamd.js και noamddeps.js και οι δύο μονάδες δεν είναι μονάδες AMD και αν θέλετε να τις φορτώσετε, πρέπει να ορίσετε τα χαρακτηριστικά τους:
require.js δέχεται ένα αντικείμενο διαμόρφωσης που, εκτός από την ιδιότητα paths, έχει επίσης μια ιδιότητα shim ειδικά για τη διαμόρφωση μονάδων που δεν είναι AMD.
Συγκεκριμένα, κάθε ενότητα ορίζει:
- Εξαγωγή τιμής (όνομα μεταβλητής εξόδου): υποδεικνύει το όνομα της μονάδας όταν καλείται εξωτερικά
- Πίνακας DEPS: υποδεικνύει τις εξαρτήσεις αυτής της ενότητας
Για παράδειγμα, η προσθήκη jQuery μπορεί να οριστεί ως εξής:
require.js πρόσθετο
require.js προσφέρει επίσης μια σειρά από πρόσθετα που εφαρμόζουν ορισμένες ειδικές δυνατότητες
Το πρόσθετο domready επιτρέπει τη λειτουργία επανάκλησης να εκτελείται μετά τη φόρτωση της δομής DOM της σελίδας:
πρόσθετα κειμένου και εικόνας, τα οποία require.js επιτρέπουν να φορτώνετε αρχεία κειμένου και εικόνας:
Παρόμοια πρόσθετα περιλαμβάνουν JSON και MDOWN για τη φόρτωση αρχείων JSON και Markdown.
|
Δημοσιεύτηκε στις 11/10/2017 9:31:50 π.μ.
|
|
|
