Wykorzystaj swoje umiejętności Vite w praktyce z tym fałszywym edytorem tekstu opartym na graficznym interfejsie użytkownika.

Lorem ipsum to tekst, którego programiści i projektanci na całym świecie używają jako symbolu zastępczego. Jeśli wchodzisz w interakcje z wieloma prototypami interfejsu użytkownika, prawdopodobnie spotkałeś się z nim już wcześniej.

Dowiedz się, jak zbudować elastyczny generator Lorem ipsum za pomocą Vite i JavaScript, a rozwiniesz swoje umiejętności programistyczne, uzyskując przydatne wyniki.

Dlaczego Lorem Ipsum jest tak szeroko stosowany?

Być może zastanawiasz się, dlaczego tak wielu programistów i projektantów wybiera lorem ipsum, skoro mogliby po prostu skopiować stronę z książki należącej do domeny publicznej lub podobnej. Głównym powodem jest to, że pozwala użytkownikowi lub przeglądającemu wyczuć wizualną formę dokumentu lub prototypu, bez skupiania się zbytnio na samym tekście zastępczym.

Wyobraź sobie, że projektujesz gazetę. Zamiast zadawać sobie trud kopiowania tekstu z różnych źródeł, aby projekt był jak najbardziej odpowiedni realistyczne, możesz po prostu skopiować standardowy tekst zastępczy lorem ipsum i użyć go Zamiast.

instagram viewer

Lorem ipsum jest tak powszechnie rozpoznawalny, że nie trzeba nawet określać, że jest to tekst zastępczy – praktycznie każdy, kto się z nim zetknie, od razu rozpozna, że ​​jest to tekst wypełniający.

Konfigurowanie serwera projektowego i programistycznego

Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHub i jest darmowy do użytku na licencji MIT. Skopiuj zawartość ww styl.css i lorem.js plików i wklej je do własnych lokalnych kopii tych plików.

Jeśli chcesz zobaczyć wersję tego projektu na żywo, możesz to sprawdzić próbny.

Będziesz korzystać z Narzędzie do budowania Vite ustawić rzeczy. Upewnij się, że masz Node.js i Menedżer pakietów węzłów (NPM) lub Yarn zainstalowany na twojej maszynie, a następnie otwórz terminal i uruchom:

npm utwórz vite

Lub:

przędza tworzy vite

Powinno to stanowić rusztowanie dla pustego projektu Vite. Wprowadź nazwę projektu, ustaw framework na „Vanilla”, a wariant na „Vanilla”. Po wykonaniu tej czynności przejdź do katalogu projektu za pomocą płyta CD polecenie, a następnie uruchom:

npm i

Lub:

przędza

Po zainstalowaniu wszystkich zależności otwórz projekt w wybranym edytorze tekstu, a następnie zmodyfikuj strukturę projektu, aby wyglądała mniej więcej tak:

Teraz wyczyść zawartość pliku indeks.html plik i zastąp go następującym:

HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8” />
<połączyćrel="Ikona"typ=„obraz/svg+xml”href="/vite.svg" />
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0” />
<tytuł>Generator Lorem Ipsumtytuł>
głowa>
<ciało>
<h1>Generator Lorem Ipsumh1>
<dzID=„aplikacja”>
<dzklasa="sterownica">
<formularz>
<dzklasa="kontrola">
<etykietaDo=„liczba w”>Słowa w akapicieetykieta>
<dz>
<wejścietyp="zakres"ID=„liczba w”min="10"maks="100"wartość="25"krok="10">
<ZakresID=„w-count-etykieta”>25Zakres>
dz>
dz>
<dzklasa="kontrola">
<etykietaDo=„liczba p”>Liczba akapitówetykieta>
<dz>
<wejścietyp="zakres"ID=„liczba p”min="1"maks="20"krok="1"wartość="3">
<ZakresID=„etykieta-zliczania p”>3Zakres>
dz>
dz>
<przycisktyp="składać">Generowaćprzycisk>
formularz>
<przyciskklasa="Kopiuj">Skopiuj do schowkaprzycisk>
<dzklasa=„informacje”>
 Użyj suwaków, aby ustawić parametry, a następnie naciśnij przycisk „Generuj”.

 Możesz skopiować tekst, naciskając przycisk „Kopiuj do schowka”.
dz>
dz>
<dzklasa="wyjście">dz>
dz>
<scenariusztyp="moduł"źródło="/main.js">scenariusz>
ciało>
HTML>

Ten znacznik po prostu definiuje interfejs użytkownika. Po lewej stronie ekranu wyświetlane są elementy sterujące, a po prawej dane wyjściowe. Następnie otwórz main.js plik, wyczyść jego zawartość i dodaj pojedynczą linię do zaimportowania styl.css:

import'./style.css'

Importowanie pliku Lorem i definiowanie zmiennych globalnych

Otwórz repozytorium GitHub tego projektu, skopiuj zawartość pliku lorem.js plik i wklej je do swojej lokalnej kopii lorem.js. lorem.js po prostu eksportuje bardzo długi ciąg tekstu Lorem Ipsum, którego mogą używać inne pliki JavaScript.

w main.js plik, zaimportuj plik lorem ciąg z lorem.js plik i zdefiniuj niezbędne zmienne:

import { lorem } z'./lorem';
pozwalać text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").podział(' ');
pozwalać ostatni znak;
pozwalać WordCountControl = dokument.querySelector(„#w-liczba”);
pozwalać Kontrola liczby akapitów = dokument.querySelector(„#liczba p”);
pozwalać EtykietaLiczbySłów = dokument.querySelector("#w-liczba-etykiet");
pozwalać akapitCountLabel = dokument.querySelector("#p-count-etykieta");
pozwalać wordCount = wordCountControl.wartość;
pozwalać liczba akapitów = kontrola liczby akapitów. wartość;
pozwalać skopiuj = dokument.querySelector(".Kopiuj");

Ten kod używa wyrażenie regularne aby usunąć wszelkie znaki interpunkcyjne w lorem tekst. The tekst zmienna wiąże tę zmodyfikowaną wersję lorem tekst. Powinno to ułatwić generowanie słów i akapitów.

Tworzenie funkcji generatora

Aby jakiekolwiek losowo wygenerowane zdanie lub akapit wyglądały na „prawdziwe”, musi istnieć interpunkcja. Po zdefiniowaniu zmiennych globalnych utwórz funkcję o nazwie generuj losową interpunkcję() iw tej funkcji utwórz tablicę o nazwie postacie i zaludnij go.

funkcjonowaćgeneruj losową interpunkcję() {
pozwalać znaki = [",", "!", ".", "?"];
pozwalać znak = znaki[Matematyka.podłoga(Matematyka.random() * znaków.długość)];
 lastChar = znak;
powrót postać;
}

Powyższy blok kodu definiuje tablicę, postacie, który zawiera różne znaki interpunkcyjne. Definiuje inną zmienną, postać, który ustawia na losowy element z postacie szyk. Zmienna globalna, ostatni znak, przechowuje tę samą wartość, którą następnie zwraca funkcja.

Następnie utwórz plik generuj akapit () funkcja z a liczyć parametr, który ma domyślną wartość 100.

funkcjonowaćgeneruj ust(liczyć = 100) {
}

W tej funkcji zadeklaruj a ustęp array i pobierz losowe słowa z pliku global tekst array, a następnie wepchnij go do ustęp.

pozwalać akapit = [];
Do (pozwalać ja = 1; i <= liczba; i++) {
 akapit.push (tekst[Matematyka.podłoga(Matematyka.random() * tekst.długość)].toLowerCase());
}

Następnie dodaj kod, aby pierwsza litera była wielka w pierwszym słowie każdego akapitu:

pozwalać fl=akapit[0];
ustęp[0] = fl.zastąp (fl[0], fl[0].toUpperCase());

Każdy akapit kończy się znakiem interpunkcyjnym (zwykle kropką), więc dodaj kod, który dodaje kropkę na końcu każdego akapitu.

pozwalać lwPos = długość akapitu - 1;
pozwalać lSłowo = akapit [lwPoz];
akapit [lwPos] = lSłowo.zastąp (lSłowo, lSłowo + ".");

Następnie zaimplementuj funkcję dodawania losowo generowanej interpunkcji do losowego elementu w pliku ustęp szyk.

akapit.forEach((słowo, indeks) => {
Jeśli (indeks > 0 && indeks % 100) {
pozwalać liczba losowa = Matematyka.podłoga(Matematyka.losowy() * 4);
pozwalać pozycja = indeks + liczba losowa;
pozwalać RandWord = akapit [poz];
 akapit[pos] = RandWord.replace (randWord, RandomWord + generujRandomPunctuation());
pozwalać nSłowo=akapit[poz + 1];
Jeśli (ostatni znak !== ",") {
 akapit [poz. + 1] = nSłowo.zastąp (nSłowo[0], nSłowo[0].toUpperCase());
 }
 }
})

Ten blok kodu generuje losowy znak interpunkcyjny i dołącza go na końcu losowego elementu z pliku ustęp szyk. Po dodaniu znaku interpunkcyjnego zamienia pierwszą literę następnego elementu na wielką literę, jeśli znak interpunkcyjny nie jest przecinkiem.

Na koniec zwróć ustęp tablica sformatowana jako ciąg znaków:

powrót paragraf.join(" ");

Tekst lorem ipsum powinien mieć „strukturę” opartą na liczbie akapitów określonej przez użytkownika. Możesz użyć tablicy do zdefiniowania tej „struktury”. Na przykład, jeśli użytkownik chce tekst lorem ipsum z trzema akapitami, tablica „structure” powinna wyglądać tak:

struktura = ["Pierwszy paragraf.", "\n\n", "Akapit drugi.", "\n\n", „Trzeci akapit”]

W powyższym bloku kodu każdy „\n \n” reprezentuje odstęp między każdym akapitem. Jeśli się zalogujesz struktura.join("") w konsoli przeglądarki powinieneś zobaczyć:

Utwórz funkcję, która automatycznie generuje tę strukturę i wywołuje metodę generuj ust funkcjonować:

funkcjonowaćgenerujStrukturę(liczba słów, akapit = 1) {
pozwalać struktura = [];
Do (pozwalać ja = 0; i < akapit * 2; i++) {
Jeśli (I % 20) struktura[i] = generujParagraf (liczba słów);
w przeciwnym razieJeśli (i < (akapit * 2) - 1) struktura[i] = "\n\n";
 }
powrót struktura.dołącz("");
}

Dodawanie detektorów zdarzeń do kontrolek

Dodaj detektor zdarzeń „wejściowych” do pliku kontrola licznika słów element wejściowy iw funkcji wywołania zwrotnego ustaw Liczba słów do wartości wejściowej. Następnie zaktualizuj etykietę.

wordCountControl.addEventListener("wejście", (e) => {
 liczba słów = e.wartość docelowa;
 wordCountLabel.textContent= e.wartość docelowa;
})

Następnie dodaj detektor zdarzeń „wejściowych” do pliku Kontrola liczby akapitów element wejściowy iw funkcji wywołania zwrotnego ustaw liczba akapitów do wartości wejściowej i zaktualizuj etykietę.

ParagrafCountControl.addEventListener("wejście", (e) => {
 liczba akapitów = e.wartość docelowa;
 paragrafCountLabel.textContent = e.cel.wartość;
})

Dodaj detektor zdarzeń „kliknięcia” do pliku Kopiuj przycisk, który odwołuje się do skopiuj tekst() kiedy zdarzenie zostanie uruchomione.

copy.addEventListener("Kliknij", ()=>kopiujTekst());

Na koniec dodaj detektor zdarzeń „prześlij” do pliku formularz element HTML i wywołaj aktualizacja interfejsu użytkownika funkcja w funkcji wywołania zwrotnego.

dokument.querySelector("formularz").addEventListener('składać', (e) => {
 e.preventDefault();
 aktualizacjaUI();
})

Kończenie i aktualizacja interfejsu użytkownika

Utwórz funkcję getControlValues to powraca Liczba słów I liczba akapitów jako obiekt.

funkcjonowaćgetControlValues() {
powrót {Liczba słów, Liczba akapitów};
}

Następnie utwórz aktualizacjaUI() funkcja renderująca wygenerowany tekst na ekranie dla użytkownika:

funkcjonowaćaktualizacja interfejsu użytkownika() {
pozwalać wyjście = generuj Strukturę (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".wyjście").innerText = wyjście;
}

Prawie skończone. Utwórz skopiuj tekst() funkcja, która zapisuje tekst do schowka za każdym razem, gdy użytkownik kliknie przycisk „Kopiuj do schowka”.

asynchronicznyfunkcjonowaćskopiuj tekst() {
pozwalać tekst = dokument.querySelector(".wyjście").innerText;
próbować {
czekać na navigator.clipboard.writeText (tekst);
 alarm('Skopiowane do schowka');
 } złapać (błąd) {
 alarm('Nie udało się skopiować:', błąd);
 }
 }

Następnie zadzwoń do aktualizacjaUI() funkcjonować:

aktualizacjaUI();

Gratulacje! Zbudowałeś generator tekstu lorem ipsum z JavaScript i Vite.

Doładuj swój rozwój JavaScript dzięki Vite

Vite to popularne narzędzie frontendowe, które ułatwia konfigurację frameworka frontendowego. Obsługuje różne frameworki, takie jak React, Svelte, SolidJS, a nawet zwykły JavaScript. Wielu programistów JavaScript używa Vite, ponieważ jest bardzo łatwy w konfiguracji i bardzo szybki.