Εφαρμόστε τις δεξιότητές σας στο Vite με αυτόν τον εικονικό δημιουργό κειμένου που βασίζεται σε GUI.

Το Lorem ipsum είναι κείμενο που οι προγραμματιστές και οι σχεδιαστές σε όλο τον κόσμο χρησιμοποιούν ως σύμβολο κράτησης θέσης. Εάν αλληλεπιδράτε με πολλά πρωτότυπα UI, πιθανότατα το έχετε ξανασυναντήσει.

Μάθετε πώς να δημιουργείτε μια ευέλικτη γεννήτρια Lorem ipsum με Vite και JavaScript και θα βελτιώσετε τις αναπτυξιακές σας δεξιότητες με ένα χρήσιμο αποτέλεσμα.

Γιατί το Lorem Ipsum χρησιμοποιείται τόσο ευρέως;

Ίσως αναρωτιέστε γιατί τόσοι πολλοί προγραμματιστές και σχεδιαστές επιλέγουν το lorem ipsum όταν θα μπορούσαν απλώς να αντιγράψουν μια σελίδα από ένα βιβλίο δημόσιου τομέα ή παρόμοιο. Ο κύριος λόγος είναι ότι επιτρέπει στον χρήστη ή τον θεατή να αποκτήσει μια αίσθηση της οπτικής μορφής ενός εγγράφου ή πρωτοτύπου, χωρίς να εστιάζει υπερβολικά στο ίδιο το κείμενο της κράτησης θέσης.

Φανταστείτε ότι σχεδιάζετε μια εφημερίδα. Αντί να αντιμετωπίζετε τον κόπο της αντιγραφής κειμένου από διαφορετικές πηγές για να κάνετε το σχέδιο ως όσο το δυνατόν πιο ρεαλιστικά, θα μπορούσατε απλώς να αντιγράψετε το τυπικό κείμενο του σύμβολο κράτησης θέσης lorem ipsum και να το χρησιμοποιήσετε αντι αυτου.

instagram viewer

Το Lorem ipsum είναι τόσο ευρέως αναγνωρισμένο που δεν χρειάζεται καν να προσδιορίσετε ότι είναι κείμενο κράτησης θέσης—σχεδόν όλοι όσοι το συναντήσουν θα αναγνωρίσουν αμέσως ότι το κείμενο είναι συμπλήρωμα.

Ρύθμιση του διακομιστή έργου και ανάπτυξης

Ο κώδικας που χρησιμοποιείται σε αυτό το έργο είναι διαθέσιμος στο α Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT. Αντιγράψτε τα περιεχόμενα του στυλ.css και το lorem.js αρχεία και επικολλήστε τα στα δικά σας τοπικά αντίγραφα αυτών των αρχείων.

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

Θα χρησιμοποιείτε το Εργαλείο κατασκευής Vite να ρυθμίσουν τα πράγματα. Βεβαιωθείτε ότι έχετε το Node.js και το Node Package Manager (NPM) ή Yarn που είναι εγκατεστημένο στο μηχάνημά σας, ανοίξτε το τερματικό σας και εκτελέστε:

npm δημιουργία vite

Ή:

νήμα δημιουργία βιτέ

Αυτό θα πρέπει να δημιουργήσει ένα άδειο έργο Vite. Εισαγάγετε το όνομα του έργου, ορίστε το πλαίσιο σε "Vanilla" και, την παραλλαγή σε "Vanilla". Αφού το κάνετε αυτό, μεταβείτε στον κατάλογο του έργου με το CD εντολή και μετά εκτελέστε:

npm i

Ή:

νήμα

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

Τώρα, καθαρίστε τα περιεχόμενα του index.html αρχείο και αντικαταστήστε το με το ακόλουθο:

html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8" />
<Σύνδεσμοςσχετ="εικόνισμα"τύπος="image/svg+xml"href="/vite.svg" />
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0" />
<τίτλος>Γεννήτρια Lorem Ipsumτίτλος>
κεφάλι>
<σώμα>
<h1>Γεννήτρια Lorem Ipsumh1>
<divταυτότητα="εφαρμογή">
<divτάξη="έλεγχοι">
<μορφή>
<divτάξη="έλεγχος">
<επιγραφήΓια="w-count">Λέξεις ανά παράγραφοεπιγραφή>
<div>
<εισαγωγήτύπος="εύρος"ταυτότητα="w-count"ελάχ="10"Μέγιστη="100"αξία="25"βήμα="10">
<σπιθαμήταυτότητα="w-count-label">25σπιθαμή>
div>
div>
<divτάξη="έλεγχος">
<επιγραφήΓια="p-count">Αριθμός παραγράφωνεπιγραφή>
<div>
<εισαγωγήτύπος="εύρος"ταυτότητα="p-count"ελάχ="1"Μέγιστη="20"βήμα="1"αξία="3">
<σπιθαμήταυτότητα="p-count-label">3σπιθαμή>
div>
div>
<κουμπίτύπος="υποβάλλουν">Παράγωκουμπί>
μορφή>
<κουμπίτάξη="αντίγραφο">Αντιγραφή στο πρόχειροκουμπί>
<divτάξη="πληροφορίες">
 Χρησιμοποιήστε τα ρυθμιστικά για να ορίσετε τις παραμέτρους και, στη συνέχεια, πατήστε το κουμπί "Δημιουργία".

 Μπορείτε να αντιγράψετε το κείμενο πατώντας το κουμπί "Αντιγραφή στο Πρόχειρο".
div>
div>
<divτάξη="παραγωγή">div>
div>
<γραφήτύπος="μονάδα μέτρησης"src="/main.js">γραφή>
σώμα>
html>

Αυτή η σήμανση απλώς ορίζει τη διεπαφή χρήστη. Η αριστερή πλευρά της οθόνης εμφανίζει τα χειριστήρια, ενώ η δεξιά πλευρά δείχνει την έξοδο. Στη συνέχεια, ανοίξτε το main.js αρχείο, διαγράψτε τα περιεχόμενά του και προσθέστε μία γραμμή για εισαγωγή στυλ.css:

εισαγωγή"./style.css"

Εισαγωγή του αρχείου Lorem και ορισμός καθολικών μεταβλητών

Ανοίξτε το αποθετήριο GitHub αυτού του έργου, αντιγράψτε τα περιεχόμενα του lorem.js αρχείο και επικολλήστε τα στο τοπικό σας αντίγραφο του lorem.js. lorem.js απλά εξάγει μια πολύ μεγάλη συμβολοσειρά κειμένου Lorem Ipsum που μπορούν να χρησιμοποιήσουν άλλα αρχεία JavaScript.

Στο main.js αρχείο, εισάγετε το lorem χορδή από το lorem.js αρχείο και ορίστε τις απαραίτητες μεταβλητές:

εισαγωγή { lorem } από'./lorem';
αφήνω text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").διαίρεση(' ');
αφήνω lastChar;
αφήνω wordCountControl = έγγραφο.querySelector("#w-count");
αφήνω paragraphCountControl = έγγραφο.querySelector("#p-count");
αφήνω wordCountLabel = έγγραφο.querySelector("#w-count-label");
αφήνω paragraphCountLabel = έγγραφο.querySelector("#p-count-label");
αφήνω wordCount = wordCountControl.value;
αφήνω paragraphCount = paragraphCountControl.value;
αφήνω αντίγραφο = έγγραφο.querySelector(".αντίγραφο");

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

Δημιουργία των Λειτουργιών Γεννήτριας

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

λειτουργίαΔημιουργήστε Τυχαία Στίξη() {
αφήνω χαρακτήρες = [",", "!", ".", "?"];
αφήνω χαρακτήρα = χαρακτήρες[Μαθηματικά.πάτωμα(Μαθηματικά.random() * characters.length)];
 lastChar = χαρακτήρας;
ΕΠΙΣΤΡΟΦΗ χαρακτήρας;
}

Το μπλοκ κώδικα παραπάνω ορίζει έναν πίνακα, χαρακτήρες, που περιέχει διαφορετικά σημεία στίξης. Ορίζει μια άλλη μεταβλητή, χαρακτήρας, το οποίο ορίζει σε ένα τυχαίο στοιχείο από το χαρακτήρες πίνακας. Η καθολική μεταβλητή, lastChar, αποθηκεύει την ίδια τιμή που στη συνέχεια επιστρέφει η συνάρτηση.

Στη συνέχεια, δημιουργήστε ένα generateParagraph() λειτουργία με α μετρώ παράμετρος που έχει προεπιλεγμένη τιμή 100.

λειτουργίαδημιουργώ Παράγραφος(καταμέτρηση = 100) {
}

Σε αυτή τη συνάρτηση, δηλώστε a παράγραφος συστοιχία και ανάκτηση τυχαίων λέξεων από το παγκόσμιο κείμενο πίνακα και μετά σπρώξτε τον μέσα παράγραφος.

αφήνω παράγραφος = [];
Για (αφήνω i = 1; i <= μετρώ; i++) {
 paragraph.push (κείμενο[Μαθηματικά.πάτωμα(Μαθηματικά.random() * text.length)].toLowerCase());
}

Στη συνέχεια, προσθέστε τον κωδικό για να γράψετε κεφαλαία το πρώτο γράμμα στην πρώτη λέξη κάθε παραγράφου:

αφήνω fl=παράγραφος[0];
παράγραφος[0] = fl.replace (fl[0], fl[0].toUpperCase());

Κάθε παράγραφος τελειώνει με ένα σημείο στίξης (συνήθως τελεία), επομένως προσθέστε τον κώδικα που προσθέτει μια τελεία στο τέλος κάθε παραγράφου.

αφήνω lwPos = paragraph.length - 1;
αφήνω lWord = παράγραφος[lwPos];
paragraph[lwPos] = lWord.replace (lWord, lWord + ".");

Στη συνέχεια, εφαρμόστε τη λειτουργία για να προσθέσετε ένα τυχαία δημιουργημένο σημείο στίξης σε ένα τυχαίο στοιχείο στο παράγραφος πίνακας.

paragraph.forEach((λέξη, ευρετήριο) => {
αν (ευρετήριο > 0 && ευρετήριο % 100) {
αφήνω τυχαίος αριθμός = Μαθηματικά.πάτωμα(Μαθηματικά.random() * 4);
αφήνω pos = index + randomNum;
αφήνω randWord = παράγραφος[pos];
 paragraph[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
αφήνω nWord=παράγραφος[pos + 1];
αν (lastChar !== ",") {
 παράγραφος[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

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

Τέλος, επιστρέψτε το παράγραφος πίνακας μορφοποιημένος ως συμβολοσειρά:

ΕΠΙΣΤΡΟΦΗ paragraph.join(" ");

Το κείμενο lorem ipsum θα πρέπει να έχει μια «δομή» με βάση τον αριθμό των παραγράφων που καθορίζει ο χρήστης. Μπορείτε να χρησιμοποιήσετε έναν πίνακα για να ορίσετε αυτήν τη «δομή». Για παράδειγμα, εάν ο χρήστης θέλει ένα κείμενο lorem ipsum με τρεις παραγράφους, ο πίνακας «δομή» θα πρέπει να μοιάζει με αυτό:

δομή = ["Πρώτη παράγραφος.", "\n \n", «Δεύτερη παράγραφος»., "\n \n", "Τρίτη παράγραφος"]

Στο μπλοκ κώδικα παραπάνω, κάθε "\n \n" αντιπροσωπεύει το διάστημα μεταξύ κάθε παραγράφου. Εάν συνδεθείτε structure.join("") στην κονσόλα του προγράμματος περιήγησης, θα πρέπει να δείτε τα εξής:

Δημιουργήστε μια συνάρτηση που δημιουργεί αυτόματα αυτήν τη δομή και καλεί το δημιουργώ Παράγραφος λειτουργία:

λειτουργίαΔημιουργίαΔομής(wordCount, παράγραφος = 1) {
αφήνω δομή = [];
Για (αφήνω i = 0; i < παράγραφος * 2; i++) {
αν (Εγώ % 20) δομή[i] = δημιουργώΠαράγραφος (wordCount);
αλλούαν (i < (παράγραφος * 2) - 1) δομή[i] = "\n \n";
 }
ΕΠΙΣΤΡΟΦΗ structure.join("");
}

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

Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων "εισαγωγής" στο wordCountControl στοιχείο εισόδου και στη λειτουργία επανάκλησης, ορίστε το καταμέτρηση λέξεων στην τιμή εισόδου. Στη συνέχεια, ενημερώστε την ετικέτα.

wordCountControl.addEventListener("εισαγωγή", (ε) => {
 wordCount = e.target.value;
 wordCountLabel.textContent= e.target.value;
})

Στη συνέχεια, προσθέστε ένα πρόγραμμα ακρόασης συμβάντων "εισαγωγής" στο paragraphCountControl στοιχείο εισόδου και στη συνάρτηση επανάκλησης ορίστε το Παράγραφος Καταμέτρηση στην τιμή εισόδου και ενημερώστε την ετικέτα.

paragraphCountControl.addEventListener("εισαγωγή", (ε) => {
 paragraphCount= e.target.value;
 paragraphCountLabel.textContent = e.target.value;
})

Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων "κλικ" στο αντίγραφο κουμπί που καλεί πίσω στο copyText() όταν ενεργοποιείται το συμβάν.

copy.addEventListener("Κάντε κλικ", ()=>copyText());

Τέλος, προσθέστε ένα πρόγραμμα ακρόασης συμβάντος "υποβολή" στο μορφή στοιχείο HTML και καλέστε το updateUI λειτουργία στη λειτουργία επανάκλησης.

έγγραφο.querySelector("μορφή").addEventListener('υποβάλλουν', (ε) => {
 e.preventDefault();
 updateUI();
})

Ολοκλήρωση και ενημέρωση της διεπαφής χρήστη

Δημιουργήστε μια συνάρτηση getControlValues που επιστρέφει καταμέτρηση λέξεων και Παράγραφος Καταμέτρηση ως αντικείμενο.

λειτουργίαgetControlValues() {
ΕΠΙΣΤΡΟΦΗ { wordCount, paragraphCount };
}

Στη συνέχεια δημιουργήστε το updateUI() λειτουργία που αποδίδει το κείμενο που δημιουργείται στην οθόνη για τον χρήστη:

λειτουργίαupdateUI() {
αφήνω output = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
έγγραφο.querySelector(".παραγωγή").innerText = έξοδος;
}

Σχεδόν τελείωσα. Δημιουργήστε το copyText() λειτουργία που γράφει το κείμενο στο πρόχειρο κάθε φορά που ο χρήστης κάνει κλικ στο κουμπί "Αντιγραφή στο Πρόχειρο".

ασυγχρονισμόςλειτουργίαcopyText() {
αφήνω κείμενο = έγγραφο.querySelector(".παραγωγή").innerText;
δοκιμάστε {
αναμένω navigator.clipboard.writeText (κείμενο);
 συναγερμός("Αντιγράφηκε στο πρόχειρο");
 } σύλληψη (λάθος) {
 συναγερμός('Απέτυχε η αντιγραφή:', λάθος);
 }
 }

Στη συνέχεια καλέστε το updateUI() λειτουργία:

updateUI();

Συγχαρητήρια! Έχετε δημιουργήσει ένα πρόγραμμα δημιουργίας κειμένου lorem ipsum με JavaScript και Vite.

Φορτίστε την ανάπτυξη JavaScript σας με το Vite

Το Vite είναι ένα δημοφιλές εργαλείο frontend που διευκολύνει τη ρύθμιση του πλαισίου του frontend σας. Υποστηρίζει μια ποικιλία πλαισίων όπως React, Svelte, SolidJS, ακόμα και απλή JavaScript βανίλιας. Πολλοί προγραμματιστές JavaScript χρησιμοποιούν το Vite επειδή είναι πολύ εύκολο στη ρύθμιση και πολύ γρήγορο.