Hogyan készítsünk Lorem Ipsum szöveggenerátort JavaScript és Vite segítségével

A Lorem ipsum olyan szöveg, amelyet a fejlesztők és a tervezők világszerte helyőrzőként használnak. Ha sok UI prototípussal kommunikálsz, valószínűleg találkoztál már vele.

Tanulja meg, hogyan készíthet rugalmas Lorem ipsum generátort Vite és JavaScript segítségével, és hasznos eredménnyel fejlesztheti fejlesztési készségeit.

Miért használják olyan széles körben a Lorem Ipsumot?

Elgondolkodhat azon, hogy miért választja oly sok fejlesztő és tervező a lorem ipsumot, amikor egyszerűen kimásolhat egy oldalt egy köztulajdonban lévő könyvből vagy hasonlóból. Ennek fő oka az, hogy lehetővé teszi a felhasználónak vagy a nézőnek, hogy érzékeltesse egy dokumentum vagy prototípus vizuális formáját, anélkül, hogy túlzottan magára a helyőrző szövegre irányítana hangsúlyt.

Képzeld el, hogy újságot tervezel. Ahelyett, hogy a különböző forrásokból származó szöveget másolná át, hogy a design olyan legyen amennyire csak lehetséges, egyszerűen másolja a szabványos lorem ipsum helyőrző szöveget, és használja azt helyette.

A Lorem ipsum olyan széles körben ismert, hogy nem is kell megadnia, hogy ez egy helyőrző szöveg – gyakorlatilag mindenki, aki találkozik vele, azonnal felismeri, hogy a szöveg kitöltő.

A projekt- és fejlesztési szerver beállítása

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható. Másolja ki a tartalmát stílus.css és a lorem.js fájlokat, és illessze be ezeket a fájlok saját helyi másolataiba.

Ha meg szeretné tekinteni a projekt élő változatát, ezt megtekintheti demó.

Ön fogja használni a Vite építőeszköz beállítani a dolgokat. Győződjön meg arról, hogy a Node.js és a Node Package Manager (NPM) vagy Yarn telepítve van a gépére, majd nyissa meg a terminált, és futtassa:

npm létrehozása vite

Vagy:

fonal létre vite

Ennek egy üres Vite projektet kell állványoznia. Adja meg a projekt nevét, állítsa be a keretet "Vanilla"-ra, a változatot pedig "Vanilla"-ra. Ezt követően navigáljon a projektkönyvtárhoz a CD parancsot, majd futtassa:

npm i

Vagy:

fonal

Az összes függőség telepítése után nyissa meg a projektet a választott szövegszerkesztőben, majd módosítsa a projekt szerkezetét, hogy így nézzen ki:

Most törölje a tartalmát index.html fájlt, és cserélje ki a következőre:

html>
<htmllang="en">
<fej>
<metakarakterkészlet="UTF-8" />
<linkrel="ikon"típus="image/svg+xml"href="/vite.svg" />
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti méret = 1,0" />
<cím>Lorem Ipsum generátorcím>
fej>
<test>
<h1>Lorem Ipsum generátorh1>
<divid="alkalmazás">
<divosztály="vezérlők">
<forma>
<divosztály="ellenőrzés">
<címkeszámára="w-count">Szavak bekezdésenkéntcímke>
<div>
<bemenettípus="hatótávolság"id="w-count"min="10"max="100"érték="25"lépés="10">
<spanid="w-count-label">25span>
div>
div>
<divosztály="ellenőrzés">
<címkeszámára="p-szám">Bekezdések számacímke>
<div>
<bemenettípus="hatótávolság"id="p-szám"min="1"max="20"lépés="1"érték="3">
<spanid="p-count-label">3span>
div>
div>
<gombtípus="Beküldés">generálgomb>
forma>
<gombosztály="másolat">Másolja a vágólapragomb>
<divosztály="információ">
 Használja a csúszkákat a paraméterek beállításához, majd nyomja meg a "Generate" gombot.

 A szöveget a "Másolás vágólapra" gomb megnyomásával másolhatja
div>
div>
<divosztály="Kimenet">div>
div>
<forgatókönyvtípus="modul"src="/main.js">forgatókönyv>
test>
html>

Ez a jelölés egyszerűen meghatározza a felhasználói felületet. A képernyő bal oldalán a vezérlők, míg a jobb oldalon a kimenet látható. Ezután nyissa meg a main.js fájlt, törölje a tartalmát, és adjon hozzá egyetlen sort az importáláshoz stílus.css:

import'./style.css'

A Lorem-fájl importálása és a globális változók meghatározása

Nyissa meg a projekt GitHub tárházát, és másolja ki a tartalmát lorem.js fájlt, és illessze be őket a helyi példányába lorem.js. lorem.js egyszerűen exportál egy nagyon hosszú Lorem Ipsum szöveget, amelyet más JavaScript-fájlok is használhatnak.

Ban,-ben main.js fájlt, importálja a lorem karakterlánc a lorem.js fájlt, és definiálja a szükséges változókat:

import {lorem} tól től'./lorem';
hagyja text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").hasított(' ');
hagyja lastChar;
hagyja wordCountControl = dokumentum.querySelector("#w-count");
hagyja bekezdésCountControl = dokumentum.querySelector("#p-count");
hagyja wordCountLabel = dokumentum.querySelector("#w-count-label");
hagyja paragraphCountLabel = dokumentum.querySelector("#p-count-label");
hagyja wordCount = wordCountControl.value;
hagyja paragrafusszám = paragrafusszámláló.érték;
hagyja másolat = dokumentum.querySelector(".másolat");

Ez a kód használja reguláris kifejezés az írásjelek eltávolításához a lorem szöveg. A szöveg változó köti a módosított változatot lorem szöveg. Ez megkönnyíti a szavak és bekezdések generálását.

Generátor funkciók létrehozása

Ahhoz, hogy bármely véletlenszerűen generált mondat vagy bekezdés „valósnak” tűnjön, írásjeleket kell alkalmazni. A globális változók meghatározása után hozzon létre egy függvényt, melynek neve gener RandomPunctuation() és abban a függvényben hozzon létre egy tömböt, melynek neve karakterek és népesítsd be.

funkciógenerál RandomPunctuation() {
hagyja karakterek = [",", "!", ".", "?"];
hagyja karakter = karakterek[Math.padló(Math.random() * karakterek.hossz)];
 lastChar = karakter;
Visszatérés karakter;
}

A fenti kódblokk egy tömböt határoz meg, karakterek, amely különböző írásjeleket tartalmaz. Egy másik változót határoz meg, karakter, amelyet véletlenszerű elemre állít be a karakterek sor. A globális változó, lastChar, ugyanazt az értéket tárolja, amelyet a függvény visszaad.

Ezután hozzon létre a generParagraph() funkciót a számol paraméter, amelynek alapértelmezett értéke 100.

funkciógenerParagraph(szám = 100) {
}

Ebben a függvényben deklarálja a bekezdés tömböt, és véletlenszerű szavakat kérjen le a globálisból szöveg tömböt, majd tolja be bekezdés.

hagyja bekezdés = [];
számára (hagyja i = 1; i <= számít; i++) {
 bekezdés.push (szöveg[Math.padló(Math.random() * text.length)].toLowerCase());
}

Ezután adja hozzá a kódot, hogy minden bekezdés első szavában nagy kezdőbetű legyen:

hagyja fl=bekezdés[0];
bekezdés[0] = fl.replace (fl[0], fl[0].toUpperCase());

Minden bekezdés írásjellel (általában ponttal) végződik, ezért minden bekezdés végéhez adja hozzá a kódot, amely pontot ad hozzá.

hagyja lwPos = bekezdés.hossz - 1;
hagyja lWord = bekezdés[lwPos];
bekezdés[lwPos] = lWord.replace (lWord, lWord + ".");

Ezután hajtsa végre a funkciót, hogy véletlenszerűen generált írásjeleket adjon hozzá egy véletlenszerű elemhez a bekezdés sor.

bekezdés.forEach((szó, index) => {
ha (index > 0 && index % 100) {
hagyja randomNum = Math.padló(Math.random() * 4);
hagyja pos = index + randomNum;
hagyja randWord = bekezdés[poz];
 paragrafus[pos] = randWord.replace (randWord, randWord + RandomPunctuation() generálása);
hagyja nWord=bekezdés[pozíció + 1];
ha (lastChar !== ",") {
 bekezdés [pozíció + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

Ez a kódblokk véletlenszerű írásjelet generál, és hozzáfűzi egy véletlenszerű elem végéhez bekezdés sor. Az írásjelek hozzáfűzése után nagybetűvel írja a következő elem első betűjét, ha az írásjel nem vessző.

Végül küldje vissza a bekezdés tömb karakterláncként formázott:

Visszatérés paragrafus.join(" ");

A lorem ipsum szövegnek a felhasználó által megadott bekezdések számán alapuló „struktúrával” kell rendelkeznie. Egy tömb segítségével határozhatja meg ezt a „struktúrát”. Például, ha a felhasználó egy három bekezdésből álló lorem ipsum szöveget szeretne, a „struktúra” tömbnek így kell kinéznie:

szerkezet = ["Első bekezdés.", "\n \n", – Második bekezdés., "\n \n", "Harmadik bekezdés"]

A fenti kódblokkban minden „\n \n” az egyes bekezdések közötti térközt jelenti. Ha bejelentkezik structure.join("") a böngészőkonzolon a következőket kell látnia:

Hozzon létre egy függvényt, amely automatikusan létrehozza ezt a struktúrát, és meghívja a generParagraph funkció:

funkcióCreateStructure(szószám, bekezdés = 1) {
hagyja szerkezet = [];
számára (hagyja i = 0; i < bekezdés * 2; i++) {
ha (i % 20) szerkezet[i] = generálParagraph (wordCount);
másha (i < (bekezdés * 2) - 1) szerkezet[i] = "\n \n";
 }
Visszatérés structure.join("");
}

Eseményfigyelők hozzáadása a vezérlőkhöz

Adjon hozzá egy "bemeneti" eseményfigyelőt a wordCountControl beviteli elemet és a visszahívási funkcióban állítsa be a szavak száma a bemeneti értékre. Ezután frissítse a címkét.

wordCountControl.addEventListener("bemenet", (e) => {
 szószám = e.célérték;
 wordCountLabel.textContent= e.target.value;
})

Ezután adjon hozzá egy "bemeneti" eseményfigyelőt a bekezdésCountControl beviteli elemet és a visszahívási funkcióban állítsa be a bekezdésSzám a bemeneti értékre, és frissítse a címkét.

paragraphCountControl.addEventListener("bemenet", (e) => {
 bekezdésszám= e.célérték;
 paragraphCountLabel.textContent = e.target.value;
})

Adjon hozzá egy "kattintásos" eseményfigyelőt a másolat gomb, amely visszahívja a copyText() amikor az esemény elindul.

copy.addEventListener("kattintás", ()=>Szöveg másolása());

Végül adjon hozzá egy "beküldés" eseményfigyelőt a forma HTML elemet, és hívja a updateUI funkciót a visszahívási funkcióban.

dokumentum.querySelector("forma").addEventListener('Beküldés', (e) => {
 e.preventDefault();
 updateUI();
})

A felhasználói felület befejezése és frissítése

Hozzon létre egy függvényt getControlValues hogy visszatér szavak száma és bekezdésSzám mint tárgyat.

funkciógetControlValues() {
Visszatérés { szószám, bekezdésszám };
}

Ezután hozza létre a updateUI() funkció, amely a generált szöveget megjeleníti a képernyőn a felhasználó számára:

funkcióupdateUI() {
hagyja output = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
dokumentum.querySelector(".Kimenet").innerText = kimenet;
}

Majdnem kész. Hozd létre a copyText() funkció, amely a szöveget a vágólapra írja, amikor a felhasználó a "Másolás vágólapra" gombra kattint.

asyncfunkciócopyText() {
hagyja szöveg = dokumentum.querySelector(".Kimenet").innerText;
próbáld ki {
várja navigator.clipboard.writeText (szöveg);
 éber("Vágólapra másolva");
 } fogás (hiba) {
 éber("Nem sikerült a másolás:", hiba);
 }
 }

Ezután hívja a updateUI() funkció:

updateUI();

Gratulálunk! Felépített egy lorem ipsum szöveggenerátort JavaScript és Vite segítségével.

Töltse fel JavaScript-fejlesztését a Vite segítségével

A Vite egy népszerű frontend eszköz, amely megkönnyíti a frontend keretrendszer beállítását. Számos keretrendszert támogat, mint például a React, Svelte, SolidJS, és még a sima vanília JavaScriptet is. Sok JavaScript fejlesztő használja a Vite-ot, mert nagyon könnyen beállítható és nagyon gyors.