Приложете уменията си на Vite на практика с този базиран на GUI инструмент за създаване на фиктивен текст.

Lorem ipsum е текст, който разработчиците и дизайнерите по целия свят използват като контейнер. Ако взаимодействате с много прототипи на потребителския интерфейс, вероятно сте го срещали и преди.

Научете как да създадете гъвкав генератор на Lorem ipsum с Vite и JavaScript и ще развиете уменията си за разработка с полезен резултат.

Защо Lorem Ipsum е толкова широко използван?

Може би се чудите защо толкова много разработчици и дизайнери избират lorem ipsum, когато могат просто да копират страница от книга, обществено достояние или подобна. Основната причина е, че позволява на потребителя или зрителя да придобие представа за визуалната форма на документ или прототип, без да насочва твърде много внимание към самия текст на контейнера.

Представете си, че създавате вестник. Вместо да се налага да копирате текст от различни източници, за да направите дизайна като колкото е възможно по-реалистично, можете просто да копирате стандартния текст на контейнера lorem ipsum и да го използвате вместо.

instagram viewer

Lorem ipsum е толкова широко разпознат, че дори не е необходимо да уточнявате, че това е текст-заместител - почти всеки, който го срещне, веднага ще разпознае, че текстът е пълнител.

Настройка на проекта и сървъра за разработка

Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT. Копирайте съдържанието на style.css и на lorem.js файлове и ги поставете във вашите собствени локални копия на тези файлове.

Ако искате да разгледате версия на живо на този проект, можете да проверите това демонстрация.

Вие ще използвате Vite инструмент за изграждане да наглася нещата. Уверете се, че имате Node.js и Мениджър на пакети на възли (NPM) или Yarn, инсталиран на вашата машина, след това отворете вашия терминал и стартирайте:

npm създаде vite

Или:

прежда създават vite

Това трябва да създаде празен проект на Vite. Въведете името на проекта, задайте рамката на „Vanilla“ и варианта на „Vanilla“. След като направите това, отидете до директорията на проекта с cd команда, след това изпълнете:

npm i

Или:

прежда

След като инсталирате всички зависимости, отворете проекта в избрания от вас текстов редактор, след което променете структурата на проекта, за да изглежда по следния начин:

Сега изчистете съдържанието на index.html файл и го заменете със следното:

html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8" />
<връзкаотн="икона"Тип="изображение/svg+xml"href="/vite.svg" />
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0" />
<заглавие>Lorem Ipsum генераторзаглавие>
глава>
<тяло>
<h1>Lorem Ipsum генераторh1>
<дивдокумент за самоличност="приложение">
<дивклас="контроли">
<форма>
<дивклас="контрол">
<етикетза="w-count">Думи на параграфетикет>
<див>
<входТип="обхват"документ за самоличност="w-count"мин="10"макс="100"стойност="25"стъпка="10">
<педядокумент за самоличност="w-count-label">25педя>
див>
див>
<дивклас="контрол">
<етикетза="p-брой">Брой абзациетикет>
<див>
<входТип="обхват"документ за самоличност="p-брой"мин="1"макс="20"стъпка="1"стойност="3">
<педядокумент за самоличност="p-count-label">3педя>
див>
див>
<бутонТип="Изпращане">Генерирайбутон>
форма>
<бутонклас="копие">Копиране в клипбордабутон>
<дивклас="информация">
 Използвайте плъзгачите, за да зададете параметрите, след което натиснете бутона "Генериране".

 Можете да копирате текста, като натиснете бутона "Копирай в клипборда".
див>
див>
<дивклас="изход">див>
див>
<сценарийТип="модул"src="/main.js">сценарий>
тяло>
html>

Тази маркировка просто дефинира потребителския интерфейс. Лявата страна на екрана показва контролите, докато дясната страна показва изхода. След това отворете main.js файл, изчистете съдържанието му и добавете един ред за импортиране style.css:

импортиране'./style.css'

Импортиране на файла Lorem и дефиниране на глобални променливи

Отворете GitHub хранилището на този проект, копирайте съдържанието на lorem.js файл и ги поставете във вашето локално копие на lorem.js. lorem.js просто експортира много дълъг низ от текст на Lorem Ipsum, който други JavaScript файлове могат да използват.

В main.js файл, импортирайте lorem низ от lorem.js файл и дефинирайте необходимите променливи:

импортиране { lorem } от'./lorem';
позволявам текст = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").split(' ');
позволявам lastChar;
позволявам wordCountControl = документ.querySelector("#w-брой");
позволявам параграфCountControl = документ.querySelector("#p-брой");
позволявам wordCountLabel = документ.querySelector("#w-count-label");
позволявам абзацCountLabel = документ.querySelector("#p-count-label");
позволявам wordCount = wordCountControl.value;
позволявам параграфБрой = параграфКонтрол.стойност;
позволявам копие = документ.querySelector(".копие");

Този код използва регулярен израз за премахване на препинателните знаци в lorem текст. The текст променлива обвързва тази модифицирана версия на lorem текст. Това трябва да улесни генерирането на думи и абзаци.

Създаване на функциите на генератора

За да изглежда всяко произволно генерирано изречение или абзац "истински", трябва да има пунктуация. След като дефинирате глобалните променливи, създайте функция, наречена генериранеRandomPunctuation() и в тази функция създайте масив, наречен герои и го населете.

функциягенериране на произволна пунктуация() {
позволявам знаци = [",", "!", ".", "?"];
позволявам знак = знаци [математика.floor(математика.random() * characters.length)];
 lastChar = знак;
връщане характер;
}

Кодовият блок по-горе дефинира масив, герои, който съдържа различни препинателни знаци. Той дефинира друга променлива, характер, което задава на произволен елемент от герои масив. Глобалната променлива, lastChar, съхранява същата стойност, която функцията след това връща.

След това създайте a генерирам абзац () функция с a броя параметър, който има стойност по подразбиране 100.

функцияgenerateParagraph(брои = 100) {
}

В тази функция декларирайте a параграф масив и извличане на произволни думи от глобалното текст масив, след което го натиснете в параграф.

позволявам параграф = [];
за (позволявам аз = 1; i <= брой; i++) {
 параграф.натискане (текст[математика.floor(математика.random() * text.length)].toLowerCase());
}

След това добавете кода за главна първа буква в първата дума на всеки параграф:

позволявам fl=параграф[0];
параграф [0] = fl.replace (fl[0], fl[0].toUpperCase());

Всеки абзац завършва с препинателен знак (обикновено точка), така че добавете кода, който добавя точка в края на всеки абзац.

позволявам lwPos = абзац.дължина - 1;
позволявам lWord = параграф[lwPos];
абзац[lwPos] = lWord.replace (lWord, lWord + ".");

След това внедрете функционалността за добавяне на произволно генерирана пунктуация към произволен елемент в параграф масив.

параграф.заВсеки((дума, индекс) => {
ако (индекс > 0 && индекс % 100) {
позволявам randomNum = математика.floor(математика.random() * 4);
позволявам pos = индекс + randomNum;
позволявам randWord = параграф [поз];
 параграф[поз] = randWord.replace (randWord, randWord + generateRandomPunctuation());
позволявам nДума=параграф[поз + 1];
ако (последен знак !== ",") {
 параграф [поз + 1] = nWord.replace (nWord[0], nДума[0].toUpperCase());
 }
 }
})

Този кодов блок генерира произволен препинателен знак и го добавя към края на произволен елемент от параграф масив. След добавяне на препинателния знак, той прави главна първата буква на следващия елемент, ако препинателният знак не е запетая.

Накрая върнете параграф масив, форматиран като низ:

връщане параграф.присъединяване(" ");

Текстът на lorem ipsum трябва да има „структура“ въз основа на броя на параграфите, посочени от потребителя. Можете да използвате масив, за да дефинирате тази „структура“. Например, ако потребителят иска текст lorem ipsum с три абзаца, масивът „структура“ трябва да изглежда така:

структура = ["Първи параграф.", "\n \n", "Втори параграф.", "\n \n", "Трети параграф"]

В кодовия блок по-горе всеки "\n \n" представлява разстоянието между всеки параграф. Ако влезете структура.присъединяване("") в конзолата на браузъра трябва да видите следното:

Създайте функция, която автоматично генерира тази структура и извиква generateParagraph функция:

функциягенериране на структура(брой думи, параграф = 1) {
позволявам структура = [];
за (позволявам аз = 0; i < параграф * 2; i++) {
ако (i % 20) структура[i] = генериране на абзац (брой думи);
другоако (i < (параграф * 2) - 1) структура[i] = "\n \n";
 }
връщане структура.присъединяване("");
}

Добавяне на слушатели на събития към контролите

Добавете слушател на събития "вход" към wordCountControl входен елемент и във функцията за обратно извикване задайте брой думи към входната стойност. След това актуализирайте етикета.

wordCountControl.addEventListener("вход", (e) => {
 wordCount = e.target.value;
 wordCountLabel.textContent= e.target.value;
})

След това добавете слушател на събития "вход" към ПараграфCountControl входен елемент и във функцията за обратно извикване задайте параграфи към входната стойност и актуализирайте етикета.

параграфCountControl.addEventListener("вход", (e) => {
 параграфи= e.target.value;
 параграфCountLabel.textContent = e.target.value;
})

Добавете слушател на събитие "щракване" към копие бутон, който извиква обратно към copyText() когато събитието се задейства.

copy.addEventListener("клик", ()=>copyText());

И накрая, добавете слушател на събитие "подаване" към форма HTML елемент и извикайте updateUI функция във функцията за обратно извикване.

документ.querySelector("форма").addEventListener('Изпращане', (e) => {
 e.preventDefault();
 updateUI();
})

Завършване и актуализиране на потребителския интерфейс

Създайте функция getControlValues който се връща брой думи и параграфи като обект.

функцияgetControlValues() {
връщане {брой думи, брой параграфи};
}

След това създайте updateUI() функция, която изобразява генерирания текст на екрана за потребителя:

функцияupdateUI() {
позволявам изход = generateStructure (getControlValues().wordCount, getControlValues().paragraphCount)
документ.querySelector(".изход").innerText = изход;
}

Почти готово. Създайте copyText() функция, която записва текста в клипборда, когато потребителят щракне върху бутона „Копиране в клипборда“.

асинхроненфункцияcopyText() {
позволявам текст = документ.querySelector(".изход").вътрешен текст;
опитвам {
изчакайте navigator.clipboard.writeText (текст);
 тревога(„Копирано в клипборда“);
 } улов (грешка) {
 тревога(„Неуспешно копиране:“, грешка);
 }
 }

След това се обадете на updateUI() функция:

updateUI();

Честито! Създали сте текстов генератор на lorem ipsum с JavaScript и Vite.

Увеличете разработката на JavaScript с Vite

Vite е популярен инструмент за интерфейс, който улеснява настройването на вашата рамка за интерфейс. Той поддържа различни рамки като React, Svelte, SolidJS и дори обикновен ванилен JavaScript. Много разработчици на JavaScript използват Vite, защото е много лесен за настройка и много бърз.