RequireJS είναι ένας αποτελεσματικός τρόπος για να βελτιώσετε την ταχύτητα και την ποιότητα του κώδικα JavaScript, ώστε να γίνει πολύ πιο ευανάγνωστη και πιο εύκολη στη συντήρησή σας.
Σε αυτό το άρθρο θα σας παρουσιάσω το RequireJS και πώς μπορείτε να το χρησιμοποιήσετε. Θα περάσουμε από την απαίτηση αρχείων και να ορίσουμε μια ενότητα και ακόμη και να αγγίξουμε τη βελτιστοποίηση.
Με απλά λόγια, το require.js είναι ένας φορτωτής σεναρίων που σας επιτρέπει να μεταφέρετε τον κώδικα JavaScript σε αρχεία και ενότητες που διαχειρίζονται τις εξαρτήσεις κάθε μοντέλου.
Για να αρχίσετε να εργάζεστε με το RequireJS και τον ασύγχρονο ορισμό ενότητας (AMD), πρέπει πρώτα να το χρησιμοποιήσουμε Κατεβάστε αυτό, στη συνέχεια, συνδέστε το αρχείο requ.js στο κεφάλι του εγγράφου μας έτσι:
Μπορεί να αναρωτιέστε τι είναι αυτό το χαρακτηριστικό δεδομένων-κύριου χαρακτηριστικού, χρησιμοποιώντας το RequireJS σημαίνει ότι όταν καλείτε να ζητάτε στην κεφαλή του εγγράφου σας συνδέετε επίσης με το κύριο αρχείο της εφαρμογής JavaScript, το χαρακτηριστικό data-main είναι ένας σύνδεσμος προς το κύριο αρχείο JavaScript για την αίτησή σας, στην περίπτωση αυτή main.js. (Σημειώστε ότι το RequireJS προσθέτει αυτόματα τα .js στο τέλος του ονόματος αρχείου.)
Σε αυτό το αρχείο main.js θα τοποθετήσετε τη διαμόρφωση για το RequireJS, θα φορτώσετε τις μονάδες σας και θα ορίσετε μια διαδρομή βάσης για χρήση όταν ζητάτε αρχεία.
Το RequireJS χρησιμοποιεί μια απλή συνάρτηση που απαιτεί φόρτωση σε σενάρια, σε αυτό το παράδειγμα RequireJS φορτώνει jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Ένα από τα καλύτερα πράγματα για το RequireJS είναι ότι είναι εξαιρετικά ευανάγνωστο, αν κοιτάξετε αυτό το μπλοκ κώδικα θα δείτε ότι πρώτα απαιτούνται αρπάξει το αρχείο με το όνομα του jquery.js και περνάει μια ανώνυμη συνάρτηση με το $ jQuery ως παράμετρο , όταν αυτό γίνει, είστε ελεύθεροι να χρησιμοποιήσετε όλο τον κωδικό JQuery που σας παρακαλώ.
Τώρα, κανονικά δεν θα είχατε τη βιβλιοθήκη jQuery σε ένα αρχείο που ονομάζεται jquery.js, όπως συμβαίνει με τα περισσότερα plugins και πλαίσια, συνήθως επιλέγουμε να φορτώσουμε στη συνέχεια από το GitHub ή το Google CDN και γι 'αυτό πρέπει να διαμορφώσουμε τις διαδρομές έτσι ότι δείχνουν προς το σωστό μέρος:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Αυτό σημαίνει ότι μπορείτε να απαιτήσετε το jQuery μέσω της Google και να το χρησιμοποιήσετε χωρίς πρόβλημα. (Σημειώστε ότι έχω χρησιμοποιήσει το όνομα "jquery" σε αυτό το παράδειγμα, αλλά θα μπορούσατε να το ονομάσετε οτιδήποτε θέλετε.)
Χρησιμοποιώντας το μοτίβο AMD σημαίνει ότι ο κώδικας μας μπορεί να δομηθεί σε δομοστοιχεία. αυτά τα μοντέλα είναι απλά κομμάτια κώδικα που κάνουν κάτι στην εφαρμογή μας. Μπορείτε να τοποθετήσετε δύο γραμμές κώδικα σε μια ενότητα ή 100, εξαρτάται μόνο από το τι θέλετε να κάνει η ενότητα αυτή.
Για να ορίσουμε μια ενότητα χρησιμοποιούμε έναν κώδικα όπως παρακάτω:
define(function () {function add (x,y) {return x + y;}});Σε αυτό το παράδειγμα έχω δημιουργήσει μια απλή λειτουργία προσθήκης χωρίς εξαρτήσεις, αλλά αν αυτή η λειτουργία χρειαζόταν το jQuery για να λειτουργήσει σωστά, η συνάρτηση define θα είναι δομημένη έτσι:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Χρησιμοποιώντας αυτή τη σύνταξη, λέμε JavaScript για να πάμε πρώτα στο jQuery και στη συνέχεια να εκτελέσουμε τον κώδικα έτσι ώστε το jQuery να είναι διαθέσιμο όταν χρειαστεί. Μπορούμε επίσης να το χρησιμοποιήσουμε σε ενότητες που έχουμε γράψει σε αρχεία JavaScript, δεν περιορίζεται σε πλαίσια ή plugins.
Όπως μπορείτε να δείτε, το RequireJS είναι ένα εξαιρετικό εργαλείο για την οργάνωση των αρχείων σας σε ενότητες και μόνο τη φόρτωση όσων χρειάζεστε. Το μειονέκτημα είναι ότι πάρα πολλά αρχεία JavaScript οδηγούν σε κακούς χρόνους φόρτωσης, γι 'αυτό το RequireJS περιλαμβάνει ένα βελτιστοποίησης για να συλλέξετε τα δεδομένα από όλα τα αρχεία και να τα τοποθετήσετε σε ένα μεμονωμένο αρχείο.
Συνολικά, το RequireJS είναι ένας από τους καλύτερους τρόπους οργάνωσης και βελτιστοποίησης του JavaScript για τον σύγχρονο ιστό.
Έχετε χρησιμοποιήσει το RequireJS σε ένα έργο; Έχει βελτιώσει τη ροή εργασίας σας; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα κιβωτίων μέσω Shutterstock.