Uveďte své dovednosti Vite do praxe s tímto fiktivním textařem založeným na GUI.

Lorem ipsum je text, který vývojáři a návrháři z celého světa používají jako zástupný symbol. Pokud komunikujete s mnoha prototypy uživatelského rozhraní, pravděpodobně jste se s tím již setkali.

Naučte se, jak vytvořit flexibilní generátor Lorem ipsum pomocí Vite a JavaScriptu, a zdokonalíte své vývojářské dovednosti s užitečným výsledkem.

Proč je Lorem Ipsum tak široce používán?

Možná se divíte, proč si tolik vývojářů a designérů vybralo lorem ipsum, když mohli jen zkopírovat stránku z veřejné knihy nebo podobně. Hlavním důvodem je, že umožňuje uživateli nebo divákovi získat představu o vizuální podobě dokumentu nebo prototypu, aniž by se příliš zaměřil na samotný zástupný text.

Představte si, že navrhujete noviny. Místo toho, abyste se museli obtěžovat kopírováním textu z různých zdrojů, aby byl design jako co nejrealističtější, stačí zkopírovat standardní zástupný text lorem ipsum a použít jej namísto.

Lorem ipsum je tak široce uznávaný, že ani nemusíte specifikovat, že se jedná o zástupný text – prakticky každý, kdo na něj narazí, okamžitě rozpozná, že jde o výplňový text.

instagram viewer

Nastavení projektového a vývojového serveru

Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT. Zkopírujte obsah souboru styl.css a lorem.js soubory a vložte je do vlastních místních kopií těchto souborů.

Pokud se chcete podívat na živou verzi tohoto projektu, můžete se podívat na toto demo.

Budete používat Nástroj pro sestavení Vite nastavit věci. Ujistěte se, že máte Node.js a Správce balíčků uzlů (NPM) nebo Yarn nainstalovaný na vašem počítači, poté otevřete terminál a spusťte:

npm vytvořit vite

Nebo:

příze vytvořit vite

To by mělo vytvořit lešení prázdného projektu Vite. Zadejte název projektu, nastavte framework na „Vanilla“ a variantu na „Vanilla“. Poté přejděte do adresáře projektu pomocí CD příkaz a poté spusťte:

npm i

Nebo:

příze

Po instalaci všech závislostí otevřete projekt ve zvoleném textovém editoru a upravte strukturu projektu tak, aby vypadala nějak takto:

Nyní vymažte obsah index.html soubor a nahraďte jej následujícím:

html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8" />
<odkazrel="ikona"typ="image/svg+xml"href="/vite.svg" />
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0" />
<titul>Generátor Lorem Ipsumtitul>
hlava>
<tělo>
<h1>Generátor Lorem Ipsumh1>
<divid="aplikace">
<divtřída="řízení">
<formulář>
<divtřída="řízení">
<označenípro="w-počet">Slova na odstavecoznačení>
<div>
<vstuptyp="rozsah"id="w-počet"min="10"max="100"hodnota="25"krok="10">
<rozpětíid="w-count-label">25rozpětí>
div>
div>
<divtřída="řízení">
<označenípro="p-počet">Počet odstavcůoznačení>
<div>
<vstuptyp="rozsah"id="p-počet"min="1"max="20"krok="1"hodnota="3">
<rozpětíid="p-count-label">3rozpětí>
div>
div>
<knoflíktyp="Předložit">generovatknoflík>
formulář>
<knoflíktřída="kopírovat">Zkopírovat do schránkyknoflík>
<divtřída="informace">
 Pomocí posuvníků nastavte parametry a poté stiskněte tlačítko "Generovat".

 Text můžete zkopírovat stisknutím tlačítka "Kopírovat do schránky".
div>
div>
<divtřída="výstup">div>
div>
<skripttyp="modul"src="/main.js">skript>
tělo>
html>

Toto označení jednoduše definuje uživatelské rozhraní. Levá strana obrazovky zobrazuje ovládací prvky, zatímco pravá strana zobrazuje výstup. Dále otevřete main.js soubor, vymažte jeho obsah a přidejte jeden řádek k importu styl.css:

import'./style.css'

Import souboru Lorem a definování globálních proměnných

Otevřete úložiště GitHub tohoto projektu, zkopírujte obsah souboru lorem.js a vložte je do místní kopie lorem.js. lorem.js jednoduše exportuje velmi dlouhý řetězec textu Lorem Ipsum, který mohou používat jiné soubory JavaScriptu.

V main.js soubor, importujte soubor lorem řetězec z lorem.js soubor a definujte potřebné proměnné:

import { lorem } z'./lorem';
nechat text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").rozdělit(' ');
nechat lastChar;
nechat wordCountControl = dokument.querySelector("počet #w");
nechat odstavecKontrola počtu = dokument.querySelector("#p-počítat");
nechat wordCountLabel = dokument.querySelector("#w-count-label");
nechat odstavceCountLabel = dokument.querySelector("#p-count-label");
nechat wordCount = wordCountControl.value;
nechat odstavecPocet = odstavecPocetKontrola.hodnota;
nechat kopie = dokument.querySelector(".kopírovat");

Tento kód používá regulární výraz pro odstranění jakékoli interpunkce v lorem text. The text proměnná váže tuto upravenou verzi lorem text. To by mělo usnadnit generování slov a odstavců.

Vytvoření funkcí generátoru

Aby každá náhodně vygenerovaná věta nebo odstavec vypadala „skutečně“, musí obsahovat interpunkci. Po definování globálních proměnných vytvořte funkci tzv createRandomPunctuation() a v této funkci vytvořte pole s názvem postavy a zalidnit ji.

funkcegenerovat náhodnou interpunkci() {
nechat znaky = [",", "!", ".", "?"];
nechat znak = znaky[Matematika.podlaha(Matematika.random() * znaky.délka)];
 lastChar = znak;
vrátit se charakter;
}

Výše uvedený blok kódu definuje pole, postavy, který obsahuje různá interpunkční znaménka. Definuje další proměnnou, charakter, který nastaví na náhodný prvek z postavy pole. globální proměnná, lastChar, ukládá stejnou hodnotu, kterou pak funkce vrací.

Dále vytvořte a createParagraph() funkce s a počet parametr, který má výchozí hodnotu 100.

funkcegenerovatParagraph(počítat = 100) {
}

V této funkci deklarujte a odstavec pole a načte náhodná slova z global text pole a poté jej zatlačte do odstavec.

nechat odstavec = [];
pro (nechat i = 1; i <= počítat; i++) {
 odstavec.push (text[Matematika.podlaha(Matematika.random() * text.length)].toLowerCase());
}

Dále přidejte kód pro velké první písmeno v prvním slově každého odstavce:

nechat fl=odstavec[0];
odstavec[0] = fl.nahradit (fl[0], fl[0].toUpperCase());

Každý odstavec končí interpunkčním znaménkem (obvykle tečkou), takže přidejte kód, který přidá tečku na konec každého odstavce.

nechat lwPos = odstavec.délka - 1;
nechat lWord = odstavec[lwPos];
odstavec[lwPos] = lWord.replace (lWord, lWord + ".");

Dále implementujte funkci přidání náhodně generované interpunkce k náhodnému prvku v odstavec pole.

odstavec.pro každého((slovo, index) => {
-li (index > 0 && index % 100) {
nechat náhodnéNum = Matematika.podlaha(Matematika.random() * 4);
nechat pos = index + randomNum;
nechat randWord = odstavec[pos];
 odstavec[pos] = randWord.replace (randWord, randWord + generovatRandomPunctuation());
nechat nSlovo=odstavec[pos + 1];
-li (poslední znak !== ",") {
 odstavec[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

Tento blok kódu generuje náhodný interpunkční znak a připojuje jej na konec náhodného prvku z odstavec pole. Po připojení interpunkce se první písmeno dalšího prvku změní na velké, pokud interpunkcí není čárka.

Nakonec vraťte odstavec pole formátované jako řetězec:

vrátit se odstavec.připojit(" ");

Text lorem ipsum by měl mít „strukturu“ založenou na počtu odstavců, které uživatel určí. K definování této 'struktury' můžete použít pole. Pokud například uživatel chce text lorem ipsum se třemi odstavci, pole „struktura“ by mělo vypadat takto:

struktura = ["První odstavec.", "\n \n", "Druhý odstavec.", "\n \n", "Třetí odstavec"]

V bloku kódu výše každé "\n \n" představuje mezery mezi jednotlivými odstavci. Pokud se přihlásíte struktura.join("") v konzole prohlížeče byste měli vidět následující:

Vytvořte funkci, která automaticky generuje tuto strukturu a volá generovatParagraph funkce:

funkcegenerovatStructure(wordCount, odstavec = 1) {
nechat struktura = [];
pro (nechat i = 0; i < odstavec * 2; i++) {
-li (i % 20) struktura[i] = createParagraph (wordCount);
jiný-li (i < (odstavec * 2) - 1) struktura[i] = "\n \n";
 }
vrátit se struktura.připojit("");
}

Přidání posluchačů událostí do ovládacích prvků

Přidejte posluchače události „vstupu“ do wordCountControl vstupní prvek a ve funkci zpětného volání nastavte počet slov na vstupní hodnotu. Poté aktualizujte štítek.

wordCountControl.addEventListener("vstup", (e) => {
 wordCount = e.target.value;
 wordCountLabel.textContent= e.target.value;
})

Dále přidejte posluchač události „vstupu“ do odstavec CountControl vstupní prvek a ve funkci zpětného volání nastavte odstavec Počet na vstupní hodnotu a aktualizujte štítek.

odstavceCountControl.addEventListener("vstup", (e) => {
 počet odstavců= e.cílová.hodnota;
 odstavceCountLabel.textContent = e.target.value;
})

Přidejte posluchač události „kliknutí“ do kopírovat tlačítko, které volá zpět na copyText() když se událost spustí.

copy.addEventListener("kliknout", ()=>copyText());

Nakonec do souboru přidejte posluchače události „odeslat“. formulář HTML element a zavolejte updateUI funkce ve funkci zpětného volání.

dokument.querySelector("formulář").addEventListener('Předložit', (e) => {
 e.preventDefault();
 updateUI();
})

Dokončení a aktualizace uživatelského rozhraní

Vytvořte funkci getControlValues že se vrací počet slov a odstavec Počet jako předmět.

funkcegetControlValues() {
vrátit se { počet slov, počet odstavců };
}

Poté vytvořte updateUI() funkce, která uživateli vykreslí vygenerovaný text na obrazovce:

funkceupdateUI() {
nechat output = createStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokument.querySelector(".výstup").vnitřníText = výstup;
}

Skoro hotovo. Vytvořte copyText() funkce, která zapíše text do schránky vždy, když uživatel klikne na tlačítko "Kopírovat do schránky".

asynchronnífunkcecopyText() {
nechat text = dokument.querySelector(".výstup").vnitřníText;
Snaž se {
čekat navigator.clipboard.writeText (text);
 upozornění ('Zkopírováno do schránky');
 } chytit (chyba) {
 upozornění ('Nepodařilo se zkopírovat:', chyba);
 }
 }

Pak zavolejte na updateUI() funkce:

updateUI();

Gratulujeme! Vytvořili jste textový generátor lorem ipsum s JavaScriptem a Vite.

Doplňte svůj vývoj JavaScriptu pomocí Vite

Vite je oblíbený frontendový nástroj, který usnadňuje nastavení frontendového rámce. Podporuje různé rámce jako React, Svelte, SolidJS a dokonce i prostý vanilkový JavaScript. Mnoho vývojářů JavaScriptu používá Vite, protože se velmi snadno nastavuje a je velmi rychlý.