Τι είναι το Alpine.js και πώς το χρησιμοποιείτε;

Ο κόσμος της ανάπτυξης ιστού είναι χαοτικός—τα πλαίσια εμφανίζονται και βγαίνουν και τα πράγματα μπορεί να είναι συντριπτικά τόσο για νέους όσο και για έμπειρους προγραμματιστές.

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

Ξεκινώντας με το Alpine.js

Η εγκατάσταση του Alpine.js είναι αρκετά απλή. Χρειάζεται μόνο να συμπεριλάβετε τα ακόλουθα γραφή ετικέτα στο HTML σας:

<γραφήαναβάλλωsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">γραφή>

Εναλλακτικά, μπορείτε να εγκαταστήσετε το Alpine.js στο έργο σας χρησιμοποιώντας το Node Package Manager:

npm εγκατάσταση alpinejs

Αντιδραστικότητα στο Alpine.js

Δημιουργήστε ένα ευρετήριο.htm αρχείο και προσθέστε τον ακόλουθο κωδικό boilerplate:

html>
<htmllang="en">

instagram viewer


<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8">
<μεταhttp-equiv="Χ-UA-Συμβατό"περιεχόμενο="IE=άκρη">
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0">
<τίτλος>Alpine.jsτίτλος>
κεφάλι>
<σώμα>
<γραφήαναβάλλωsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">γραφή>
σώμα>
html>

ο αναβάλλω χαρακτηριστικό στο γραφή Η ετικέτα λέει στο πρόγραμμα περιήγησης να εκτελέσει το σενάριο μόνο αφού ολοκληρωθεί η ανάλυση του εγγράφου.

Το Alpine.js παρέχει πολλές οδηγίες όπως x-data που χρησιμοποιεί για την αποθήκευση δεδομένων και x-κείμενο που χρησιμοποιεί για να ρυθμίσει innerText του προσαρτημένου εξαρτήματος. Για να χρησιμοποιήσετε αυτές τις οδηγίες, προσθέστε τον ακόλουθο κώδικα στο HTML σας.

<divx-data="{name:'David Uzondu', organisation:'Make Use Of'}">
 Το όνομά μου είναι <ισχυρόςx-κείμενο="όνομα">ισχυρός>
 και <Εγώx-κείμενο="οργάνωση">Εγώ> είναι απίθανο
div>

Η οδηγία x-data αποθηκεύει ένα αντικείμενο με τα κλειδιά όνομα και οργάνωση. Στη συνέχεια, μπορείτε να περάσετε αυτά τα κλειδιά στην οδηγία x-text. Όταν εκτελείτε τον κώδικα, το Alpine.js θα συμπληρώσει τις τιμές:

Πώς συγκρίνεται το Alpine.js με το React

Το Alpine.js είναι ένα ελαφρύ πλαίσιο που το καθιστά κατάλληλο για την ανάπτυξη μικρών έργων και πρωτοτύπων.

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

εισαγωγή {useEffect} από"Αντιδρώ";
λειτουργίαMyComponent() {
 useEffect(() => {
/* Η λειτουργία επανάκλησης πηγαίνει εδώ */
 }, [ /* Ο πίνακας εξάρτησης είναι προαιρετικός */ ]);
}

Για να χειριστείτε τις παρενέργειες στο Alpine.js, μπορείτε να χρησιμοποιήσετε το x-effect διευθυντικός. Για παράδειγμα, ας υποθέσουμε ότι θέλετε να παρακολουθήσετε μια μεταβλητή και να καταγράψετε την τιμή κάθε φορά που αλλάζει:

<divx-data="{νούμερο 1}"x-effect="console.log (αριθμός)">
<h1x-κείμενο="αριθμός">h1>
<κουμπί @Κάντε κλικ="αριθμός = αριθμός + 1">Προσθήκη νέου αριθμούκουμπί>
div>

Το πρώτο πράγμα που μπορεί να παρατηρήσετε είναι ότι δεν χρειάζεται να καθορίσετε μια εξάρτηση. Το Alpine θα ακούσει απλώς για αλλαγές σε όλες τις μεταβλητές που μεταβιβάζονται x-effect. ο @Κάντε κλικ Η οδηγία αυξάνει τη μεταβλητή αριθμού κατά 1.

Απόδοση υπό όρους στο Alpine.js

Απόδοση στοιχείων υπό όρους είναι κάτι που μπορείτε να κάνετε σε πλαίσια όπως το React. Το Alpine.js σάς επιτρέπει επίσης να αποδώσετε στοιχεία υπό όρους. Παρέχει ένα x-αν οδηγία και ειδική πρότυπο στοιχείο που μπορείτε να χρησιμοποιήσετε για την υπό όρους απόδοση στοιχείων.

Δημιουργήστε ένα άλλο ευρετήριο.htm αρχείο και προσθέστε τον ίδιο κωδικό λέβητα όπως πριν. Προσθέστε τον ακόλουθο κώδικα στο σώμα του HTML.

<divx-data="{shown: true}">
<κουμπί @Κάντε κλικ="shown=!shown"x-κείμενο="απεικονίζεται? "Απόκρυψη στοιχείου": "Εμφάνιση στοιχείου"">Μεταβάλλωκουμπί>
<πρότυποx-αν="απεικονίζεται">
<div>Η γρήγορη καφέ αλεπού πήδηξε πάνω από το σκυλί.div>
πρότυπο>
div>

ο x-αν η οδηγία μεταβιβάζεται στο πρότυπο στοιχείο. Αυτό είναι σημαντικό επειδή επιτρέπει στο Alpine.js να παρακολουθεί ένα στοιχείο που προστίθεται ή αφαιρείται από τη σελίδα. ο πρότυπο Το στοιχείο πρέπει να περιέχει ένα στοιχείο σε επίπεδο ρίζας. ο ακόλουθος κώδικας θα παραβίαζε αυτόν τον κανόνα:

<πρότυποx-αν="απεικονίζεται">
<div>Αυτό το στοιχείο θα αποδοθεί μια χαρά.div>
<div>Αυτό το στοιχείο θα αγνοηθεί από το Alpine.jsdiv>
πρότυπο>

Δημιουργία εφαρμογής To-Do με το Alpine.js

Ήρθε η ώρα να συνδυάσετε όλα όσα έχετε μάθει μέχρι τώρα και να δημιουργήσετε μια απλή εφαρμογή εκκρεμών υποχρεώσεων με υποστήριξη τοπικής αποθήκευσης. Αρχικά, δημιουργήστε έναν φάκελο και συμπληρώστε τον με ένα ευρετήριο.htm αρχείο και α στυλ.css αρχείο. Προσθέστε τον κωδικό του boilerplate στο αρχείο index.htm και συμπεριλάβετε μια αναφορά στο στυλ.css αρχείο:

<Σύνδεσμοςσχετ="φύλλο στυλ"href="style.css">

Μην ανησυχείτε για το CSS εδώ, απλώς αντιγράψτε το στυλ.css αρχείο από αυτό αποθετήριο GitHub του έργου.

Για να διατηρηθούν τα δεδομένα μετά την επαναφόρτωση της σελίδας, χρειάζεστε το Alpine.js επιμένω συνδέω. Προσθέστε την έκδοση CDN αυτής της προσθήκης ως α γραφή ετικέτα, ακριβώς πάνω από το βασικό build CDN του Alpine.js:

<γραφήαναβάλλωsrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">γραφή>

Στο σώμα ορίζει α div στοιχείο με ένα x-data διευθυντικός. Αυτή η οδηγία θα πρέπει να περιέχει έναν πίνακα που ονομάζεται allTasks. Στη συνέχεια, προσθέστε ένα h1 στοιχείο με το κείμενο "Εφαρμογή εκκρεμών εργασιών".

<divx-data="{allTasks:$persist([])}">
<h1>Εφαρμογή υποχρεώσεωνh1>
div>

ο $persist Το πρόσθετο είναι ένα περιτύλιγμα για το JavaScript localStorage API. Λέει στο πρόγραμμα περιήγησης να αποθηκεύσει τη συστοιχία σε τοπικό χώρο αποθήκευσης, έτσι ώστε τα δεδομένα να παραμένουν ανέπαφα ακόμα και μετά τη φόρτωση της σελίδας. Πρόσθεσε ένα μορφή με υποβάλλουν οδηγία που επίσης αποτρέπει την προεπιλεγμένη ενέργεια υποβολής.

<μορφή @υποβάλλω.αποτρέψω="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id: Date.now(), done: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert ('Η τιμή εισόδου δεν μπορεί να είναι κενή')
: alert('Η εργασία έχει ήδη προστεθεί.');
 $refs.task.value=''
">
μορφή>

ο $αναφ Ο όρος επιτρέπει την πρόσβαση στο στοιχείο DOM με την "εργασία" x-αναφ διευθυντικός. Ο κώδικας χειρίζεται επίσης κάποια επικύρωση και διασφαλίζει ότι δεν προσθέτει κενές συμβολοσειρές ή διπλότυπες εργασίες στη λίστα. Πριν τελειώσετε τη φόρμα, προσθέστε ένα εισαγωγή στοιχείο με ένα x-αναφ του «καθήκοντος» και ένα σύμβολο κράτησης θέσης. Στη συνέχεια, προσθέστε ένα κουμπί και ορίστε τον τύπο του σε "υποβολή".

<εισαγωγήτύπος="κείμενο"x-αναφ="έργο">
<κουμπίτύπος="υποβάλλουν">Προσθήκη Εργασίαςκουμπί>

Στη συνέχεια, ορίστε ένα div με την κλάση "items". Αυτό το div θα πρέπει να περιέχει δύο άλλα div: το ένα με το x-data ορίζεται σε έναν "μη ολοκληρωμένο" πίνακα και ο άλλος σε έναν "μη ολοκληρωμένο" πίνακα. Και τα δύο div θα πρέπει να έχουν ένα x-effect οδηγία και η συστοιχία θα πρέπει να είναι τυλιγμένη στο $persist ρήτρα όπως φαίνεται προηγουμένως.

<divτάξη="αντικείμενα">
<divx-data="{uncompleted:$persist([])}"x-effect="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

<divx-data="{completed:$persist([])}"x-effect="completed=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

Στο πρώτο div, προσθέστε ένα h3 ετικέτα με το κείμενο "Μη ολοκληρωμένο". Στη συνέχεια, για κάθε στοιχείο στο ασυμπλήρωτος συστοιχία, απόδοση α div που κρατά τα «χειριστήρια» και την ίδια την εργασία.

Τα στοιχεία ελέγχου επιτρέπουν στο χρήστη να διαγράψει ένα στοιχείο ή να το επισημάνει ως ολοκληρωμένο:

<h3>Ασυμπλήρωτοςh3>
<πρότυποx-για="στοιχείο σε ανολοκλήρωτο":κλειδί="element.id">
<divx-data="{showControls: false}" @το ποντίκι="showControls = true" @ποντίκι="showControls = false"
 class = "εργασία"
 >
<divτάξη="έλεγχοι">
<divx-show="εμφάνιση στοιχείων ελέγχου" @Κάντε κλικ="element.done=true">[Μ]div>
<divx-show="εμφάνιση στοιχείων ελέγχου" @Κάντε κλικ="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-κείμενο="στοιχείο.εργασία" >div>
div>
πρότυπο>

Μπορείτε να χρησιμοποιήσετε το x-για οδηγία για επανάληψη μέσω ενός πίνακα και απόδοση στοιχείων. Είναι παρόμοιο με v-για στο Vue και το Array.map() μέθοδος συστοιχίας στο React. Το div "controls" περιέχει δύο div με τη συμβολοσειρά "[M]" και "[R]". Αυτές οι συμβολοσειρές σημαίνουν "Επισήμανση ως ολοκληρωμένου" και "Κατάργηση". Μπορείτε να τα αντικαταστήσετε με κατάλληλα εικονίδια, αν θέλετε.

ο x-show οδηγία ορίζει ένα στοιχείο απεικόνιση Ιδιότητα CSS σε κανένας εάν η τιμή που δείχνει την οδηγία είναι ψευδής. Το δεύτερο div στο div "στοιχεία" είναι παρόμοιο με το πρώτο με μερικές αξιοσημείωτες εξαιρέσεις: Το h3 Το κείμενο έχει οριστεί σε "Ολοκληρώθηκε", το πρώτο παιδί του div "control" έχει το κείμενο "[U]" αντί για "[M]" και σε αυτό το div @Κάντε κλικ διευθυντικός, στοιχείο.έγινε Έχει οριστεί ψευδής.

<divx-show="εμφάνιση στοιχείων ελέγχου" @Κάντε κλικ="element.done=false">[U]div>

Και αυτό είναι όλο, διαβάσατε τα βασικά του Alpine.js και χρησιμοποιήσατε όσα μάθατε για να δημιουργήσετε μια βασική εφαρμογή υποχρεώσεων.

Κάνοντας τον κώδικα Alpine.js πιο εύκολο στη γραφή

Όταν ξεκινάτε να γράφετε κώδικα Alpine.js, μπορεί να είναι δύσκολο να τυλίξετε το κεφάλι σας. Ευτυχώς, οι επεξεργαστές κώδικα όπως το Visual Studio Code παρέχουν ένα ευρύ φάσμα επεκτάσεων που διευκολύνουν την ανάπτυξη.

Στο Extensions Marketplace, μπορείτε να λάβετε την επέκταση Alpine.js IntelliSense που διευκολύνει την εργασία με οδηγίες. Αυτό μπορεί να βοηθήσει στη βελτίωση της παραγωγικότητάς σας όταν χρησιμοποιείτε το Alpine.js στα έργα σας.