Примените свои навыки Vite на практике с помощью этого фиктивного текстового редактора с графическим интерфейсом.

Lorem ipsum — это текст, который разработчики и дизайнеры по всему миру используют в качестве заполнителя. Если вы взаимодействуете с большим количеством прототипов пользовательского интерфейса, вы, вероятно, сталкивались с этим раньше.

Узнайте, как создать гибкий генератор Lorem ipsum с помощью Vite и JavaScript, и вы продвинете свои навыки разработки с полезным результатом.

Почему Lorem Ipsum так широко используется?

Вам может быть интересно, почему так много разработчиков и дизайнеров выбирают lorem ipsum, когда они могут просто скопировать страницу из общедоступной книги или аналогичной. Основная причина в том, что он позволяет пользователю или зрителю получить представление о визуальной форме документа или прототипа, не уделяя слишком много внимания самому тексту-заполнителю.

Представьте, что вы разрабатываете газету. Вместо того, чтобы копировать текст из разных источников, чтобы сделать дизайн максимально максимально реалистичным, вы можете просто скопировать стандартный текст-заполнитель lorem ipsum и использовать его. вместо.

instagram viewer

Lorem ipsum настолько широко известен, что вам даже не нужно указывать, что это текст-заполнитель — практически каждый, кто столкнется с ним, сразу поймет, что это текст-заполнитель.

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

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT. Скопируйте содержимое файла стиль.css и лорем.js файлы и вставьте их в свои собственные локальные копии этих файлов.

Если вы хотите взглянуть на живую версию этого проекта, вы можете проверить это демо.

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

нпм создать вайт

Или:

пряжа создать вите

Это должно создать пустой проект Vite. Введите имя проекта, установите для фреймворка значение «Ваниль», а для варианта — «Ваниль». После этого перейдите в каталог проекта с помощью CD команду, затем запустите:

нпм я

Или:

пряжа

После установки всех зависимостей откройте проект в выбранном вами текстовом редакторе, затем измените структуру проекта, чтобы она выглядела примерно так:

Теперь очистите содержимое index.html файл и замените его следующим:

HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8" />
<связьотн.="икона"тип="изображение/svg+xml"href="/vite.svg" />
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0" />
<заголовок>Генератор Lorem Ipsumзаголовок>
голова>
<тело>
<h1>Генератор Lorem Ipsumh1>
<дивидентификатор="приложение">
<дивсорт="управляет">
<форма>
<дивсорт="контроль">
<этикеткадля="w-счет">Слов на абзацэтикетка>
<див>
<входтип="диапазон"идентификатор="w-счет"мин="10"Макс="100"ценить="25"шаг="10">
<охватыватьидентификатор="W-счет-метка">25охватывать>
див>
див>
<дивсорт="контроль">
<этикеткадля="p-счет">Количество абзацевэтикетка>
<див>
<входтип="диапазон"идентификатор="p-счет"мин="1"Макс="20"шаг="1"ценить="3">
<охватыватьидентификатор="метка-число-p">3охватывать>
див>
див>
<кнопкатип="представлять на рассмотрение">Создатькнопка>
форма>
<кнопкасорт="копировать">Скопировать в буфер обменакнопка>
<дивсорт="Информация">
 Используйте ползунки, чтобы установить параметры, затем нажмите кнопку «Создать».

 Вы можете скопировать текст, нажав кнопку «Копировать в буфер обмена».
див>
див>
<дивсорт="выход">див>
див>
<сценарийтип="модуль"источник="/main.js">сценарий>
тело>
HTML>

Эта разметка просто определяет пользовательский интерфейс. В левой части экрана отображаются элементы управления, а в правой — вывод. Далее откройте main.js файл, очистите его содержимое и добавьте одну строку для импорта стиль.css:

Импортировать'./style.css'

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

Откройте репозиторий GitHub этого проекта, скопируйте содержимое лорем.js файл и вставьте их в локальную копию лорем.js. лорем.js просто экспортирует очень длинную строку текста Lorem Ipsum, которую могут использовать другие файлы JavaScript.

в main.js файл, импортируйте лорем строка из лорем.js файл и определить необходимые переменные:

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

Этот код использует регулярное выражение убрать все знаки препинания в лорем текст. текст переменная связывает эту модифицированную версию лорем текст. Это должно упростить создание слов и абзацев.

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

Чтобы любое случайно сгенерированное предложение или абзац выглядело «настоящим», должны быть знаки препинания. После определения глобальных переменных создайте функцию с именем генерировать случайную пунктуацию () и в этой функции создайте массив с именем персонажи и заполнить его.

функцияgenerateRandomPunctuation() {
позволять символы = [",", "!", ".", "?"];
позволять символ = символы [Математика.пол(Математика.random() * длина символов)];
 последнийChar = символ;
возвращаться характер;
}

Блок кода выше определяет массив, персонажи, который содержит разные знаки препинания. Он определяет другую переменную, характер, который задается случайным элементом из персонажи множество. Глобальная переменная, lastChar, сохраняет то же значение, которое затем возвращает функция.

Далее создайте сгенерировать абзац () функция с считать параметр, который имеет значение по умолчанию 100.

функциясгенерировать абзац(количество = 100) {
}

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

позволять абзац = [];
для (позволять я = 1; я <= количество; я++) {
 параграф.push(текст[Математика.пол(Математика.random() * text.length)].toLowerCase());
}

Затем добавьте код для заглавной буквы в первом слове каждого абзаца:

позволять фл = абзац [0];
параграф[0] = фл.заменить (фл[0], эт[0].toUpperCase());

Каждый абзац заканчивается знаком препинания (обычно точкой), поэтому добавьте код, который добавляет точку в конец каждого абзаца.

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

Затем реализуйте функциональность для добавления случайно сгенерированного знака препинания к случайному элементу в параграф множество.

пункт.для каждого((слово, указатель) => {
если (индекс > 0 && индекс % 100) {
позволять случайное число = Математика.пол(Математика.случайный() * 4);
позволять позиция = индекс + случайное число;
позволять randWord = абзац[позиция];
 параграф[pos] = randWord.replace (randWord, randWord + generateRandomPunctuation());
позволять nWord=абзац[позиция + 1];
если (последнийсимвол !== ",") {
 абзац [поз. + 1] = nWord.replace (nWord[0], нВорд[0].toUpperCase());
 }
 }
})

Этот кодовый блок генерирует случайный знак пунктуации и добавляет его в конец случайного элемента из параграф множество. После добавления знака препинания он делает заглавной первую букву следующего элемента, если знак препинания не является запятой.

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

возвращаться пункт.присоединиться(" ");

Текст lorem ipsum должен иметь «структуру», основанную на количестве абзацев, указанном пользователем. Вы можете использовать массив для определения этой «структуры». Например, если пользователю нужен текст lorem ipsum с тремя абзацами, массив «структура» должен выглядеть следующим образом:

структура = ["Первый параграф.", "\п\п", «Второй абзац»., "\п\п", «Третий абзац»]

В приведенном выше блоке кода каждый «\n \n» представляет интервал между каждым абзацем. Если вы войдете структура.присоединиться("") в консоли браузера вы должны увидеть следующее:

Создайте функцию, которая автоматически генерирует эту структуру и вызывает сгенерировать абзац функция:

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

Добавление прослушивателей событий к элементам управления

Добавьте прослушиватель событий "input" в словоCountControl input и в функции обратного вызова установите количество слов на входное значение. Затем обновите этикетку.

wordCountControl.addEventListener("вход", (д) ​​=> {
 количество слов = e.target.value;
 wordCountLabel.textContent= e.target.value;
})

Затем добавьте прослушиватель событий «input» в параграфCountControl элемент ввода и в функции обратного вызова установите параграфКоличество на входное значение и обновить метку.

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

Добавьте прослушиватель событий «щелчок» в копировать кнопка, которая перезванивает на копироватьтекст() когда событие срабатывает.

копировать.addEventListener("щелкнуть", ()=>копироватьтекст());

Наконец, добавьте прослушиватель событий «отправить» в форма HTML-элемент и вызовите обновитьUI функция в функции обратного вызова.

документ.querySelector("форма").addEventListener('представлять на рассмотрение', (д) ​​=> {
 e.preventDefault();
 обновитьUI();
})

Завершение и обновление пользовательского интерфейса

Создать функцию получитьконтролвалуес который возвращает количество слов и параграфКоличество как объект.

функцияполучитьконтролвалуес() {
возвращаться { количество слов, количество абзацев };
}

Затем создайте обновитьUI() функция, которая отображает сгенерированный текст на экране для пользователя:

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

Почти готово. Создайте копироватьтекст() Функция, которая записывает текст в буфер обмена всякий раз, когда пользователь нажимает кнопку «Копировать в буфер обмена».

асинхронныйфункциякопироватьтекст() {
позволять текст = документ.querySelector(".выход").внутренний текст;
пытаться {
Ждите navigator.clipboard.writeText (текст);
 тревога(«Скопировано в буфер обмена»);
 } ловить (ошибка) {
 тревога('Не удалось скопировать:', ошибся);
 }
 }

Затем позвоните в обновитьUI() функция:

обновитьUI();

Поздравляем! Вы создали генератор текста lorem ipsum с помощью JavaScript и Vite.

Ускорьте разработку JavaScript с помощью Vite

Vite — это популярный интерфейсный инструмент, который упрощает настройку вашего внешнего интерфейса. Он поддерживает множество фреймворков, таких как React, Svelte, SolidJS и даже простой ванильный JavaScript. Многие разработчики JavaScript используют Vite, потому что его очень легко настроить и он работает очень быстро.