Home-theater-designers
Ο κόσμος της ανάπτυξης ιστού είναι χαοτικός—τα πλαίσια εμφανίζονται και βγαίνουν και τα πράγματα μπορεί να είναι συντριπτικά τόσο για νέους όσο και για έμπειρους προγραμματιστές.
Σε αντίθεση με τα περισσότερα πλαίσια ανάπτυξης ιστού, το Alpine.js στοχεύει να είναι όσο το δυνατόν πιο απλό, αλλά αρκετά ισχυρό ώστε να αντιμετωπίζει έννοιες όπως η αντιδραστικότητα και οι παρενέργειες.
ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ ΚΥΛΙΣΤΕ ΓΙΑ ΝΑ ΣΥΝΕΧΙΣΕΤΕ ΜΕ ΠΕΡΙΕΧΟΜΕΝΟ
Ξεκινώντας με το Alpine.js
Η εγκατάσταση του Alpine.js είναι αρκετά απλή. Χρειάζεται μόνο να συμπεριλάβετε τα ακόλουθα γραφή ετικέτα στο HTML σας:
η ταχύτητα του διαδικτύου ανεβοκατεβαίνει
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Εναλλακτικά, μπορείτε να εγκαταστήσετε το Alpine.js στο έργο σας χρησιμοποιώντας το Node Package Manager:
npm install alpinejs
Αντιδραστικότητα στο Alpine.js
Δημιουργήστε ένα ευρετήριο.htm αρχείο και προσθέστε τον ακόλουθο κωδικό boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
ο αναβάλλω χαρακτηριστικό στο γραφή Η ετικέτα λέει στο πρόγραμμα περιήγησης να εκτελέσει το σενάριο μόνο αφού ολοκληρωθεί η ανάλυση του εγγράφου.
Το Alpine.js παρέχει πολλές οδηγίες όπως x-data που χρησιμοποιεί για την αποθήκευση δεδομένων και x-κείμενο που χρησιμοποιεί για να ρυθμίσει innerText του προσαρτημένου εξαρτήματος. Για να χρησιμοποιήσετε αυτές τις οδηγίες, προσθέστε τον ακόλουθο κώδικα στο HTML σας.
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
Η οδηγία x-data αποθηκεύει ένα αντικείμενο με τα κλειδιά όνομα και οργάνωση . Στη συνέχεια, μπορείτε να περάσετε αυτά τα κλειδιά στην οδηγία x-text. Όταν εκτελείτε τον κώδικα, το Alpine.js θα συμπληρώσει τις τιμές:
Πώς συγκρίνεται το Alpine.js με το React
Το Alpine.js είναι ένα ελαφρύ πλαίσιο που το καθιστά κατάλληλο για την ανάπτυξη μικρών έργων και πρωτοτύπων.
Σε μεγαλύτερα πλαίσια όπως το React, χρησιμοποιείτε αγκίστρια όπως useEffect() για την αντιμετώπιση παρενεργειών στον κύκλο ζωής του εξαρτήματος. Αυτό το άγκιστρο εκτελεί μια συνάρτηση επανάκλησης κάθε φορά που αλλάζει ένα από τα στοιχεία του πίνακα εξάρτησης:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
Για να χειριστείτε τις παρενέργειες στο Alpine.js, μπορείτε να χρησιμοποιήσετε το x-effect διευθυντικός. Για παράδειγμα, ας υποθέσουμε ότι θέλετε να παρακολουθήσετε μια μεταβλητή και να καταγράψετε την τιμή κάθε φορά που αλλάζει:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
Το πρώτο πράγμα που μπορεί να παρατηρήσετε είναι ότι δεν χρειάζεται να καθορίσετε μια εξάρτηση. Το Alpine θα ακούσει απλώς για αλλαγές σε όλες τις μεταβλητές που μεταβιβάζονται x-effect . ο @Κάντε κλικ Η οδηγία αυξάνει τη μεταβλητή αριθμού κατά 1.
Απόδοση υπό όρους στο Alpine.js
Απόδοση στοιχείων υπό όρους είναι κάτι που μπορείτε να κάνετε σε πλαίσια όπως το React. Το Alpine.js σάς επιτρέπει επίσης να αποδώσετε στοιχεία υπό όρους. Παρέχει ένα x-αν οδηγία και ειδική πρότυπο στοιχείο που μπορείτε να χρησιμοποιήσετε για την υπό όρους απόδοση στοιχείων.
Δημιουργήστε ένα άλλο ευρετήριο.htm αρχείο και προσθέστε τον ίδιο κωδικό λέβητα όπως πριν. Προσθέστε τον ακόλουθο κώδικα στο σώμα του HTML.
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
ο x-αν η οδηγία μεταβιβάζεται στο πρότυπο στοιχείο. Αυτό είναι σημαντικό επειδή επιτρέπει στο Alpine.js να παρακολουθεί ένα στοιχείο που προστίθεται ή αφαιρείται από τη σελίδα. ο πρότυπο Το στοιχείο πρέπει να περιέχει ένα στοιχείο σε επίπεδο ρίζας. ο ακόλουθος κώδικας θα παραβίαζε αυτόν τον κανόνα:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Δημιουργία εφαρμογής To-Do με το Alpine.js
Ήρθε η ώρα να συνδυάσετε όλα όσα έχετε μάθει μέχρι τώρα και να δημιουργήσετε μια απλή εφαρμογή εκκρεμών υποχρεώσεων με υποστήριξη τοπικής αποθήκευσης. Αρχικά, δημιουργήστε έναν φάκελο και συμπληρώστε τον με ένα ευρετήριο.htm αρχείο και α στυλ.css αρχείο. Προσθέστε τον κωδικό του boilerplate στο αρχείο index.htm και συμπεριλάβετε μια αναφορά στο στυλ.css αρχείο:
<link rel="stylesheet" href="style.css">