Lorem ipsum là văn bản mà các nhà phát triển và nhà thiết kế trên khắp thế giới sử dụng làm trình giữ chỗ. Nếu bạn tương tác với nhiều nguyên mẫu giao diện người dùng, có thể bạn đã bắt gặp nó trước đây.
Tìm hiểu cách xây dựng trình tạo Lorem ipsum linh hoạt với Vite và JavaScript và bạn sẽ linh hoạt các kỹ năng phát triển của mình với kết quả hữu ích.
Tại sao Lorem Ipsum lại được sử dụng rộng rãi như vậy?
Bạn có thể thắc mắc tại sao rất nhiều nhà phát triển và nhà thiết kế chọn lorem ipsum khi họ có thể chỉ cần sao chép một trang từ một cuốn sách miền công cộng hoặc tương tự. Lý do chính là nó cho phép người dùng hoặc người xem hiểu được hình thức trực quan của tài liệu hoặc nguyên mẫu mà không tập trung quá nhiều vào chính văn bản giữ chỗ.
Hãy tưởng tượng bạn đang thiết kế một tờ báo. Thay vì gặp rắc rối khi sao chép văn bản từ các nguồn khác nhau để làm cho thiết kế chân thực nhất có thể, bạn chỉ cần sao chép văn bản giữ chỗ lorem ipsum tiêu chuẩn và sử dụng văn bản đó thay thế.
Lorem ipsum được công nhận rộng rãi đến mức bạn thậm chí không cần chỉ định rằng đó là văn bản giữ chỗ—hầu như tất cả những ai bắt gặp nó sẽ ngay lập tức nhận ra rằng văn bản đó là văn bản bổ sung.
Thiết lập máy chủ dự án và phát triển
Mã được sử dụng trong dự án này có sẵn trong một kho lưu trữ GitHub và miễn phí cho bạn sử dụng theo giấy phép MIT. Sao chép nội dung của phong cách.css và lorem.js các tệp và dán chúng vào các bản sao cục bộ của các tệp này.
Nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem cái này thử nghiệm.
Bạn sẽ sử dụng công cụ xây dựng Vite để thiết lập mọi thứ. Đảm bảo rằng bạn đã cài đặt Node.js và Trình quản lý gói nút (NPM) hoặc Sợi trên máy của mình, sau đó mở thiết bị đầu cuối của bạn và chạy:
npm create vite
Hoặc:
yarn create vite
Điều này sẽ tạo ra một dự án Vite trống. Nhập tên dự án, đặt khung thành “Vanilla” và biến thể thành “Vanilla”. Sau khi làm điều đó, điều hướng đến thư mục dự án với đĩa CD lệnh, sau đó chạy:
npm i
Hoặc:
yarn
Sau khi cài đặt tất cả các phụ thuộc, hãy mở dự án trong trình soạn thảo văn bản bạn chọn, sau đó sửa đổi cấu trúc dự án để trông giống như sau:
Bây giờ, xóa nội dung của index.html tập tin và thay thế nó bằng như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lorem Ipsum Generator</title>
</head>
<body>
<h1>Lorem Ipsum Generator</h1>
<div id="app">
<div class="controls">
<form>
<div class="control">
<label for="w-count">Words per paragraph</label>
<div>
<input type="range" id="w-count" min="10" max="100" value="25" step="10">
<span id="w-count-label">25</span>
</div>
</div>
<div class="control">
<label for="p-count">Paragraph count</label>
<div>
<input type="range" id="p-count" min="1" max="20" step="1" value="3">
<span id="p-count-label">3</span>
</div>
</div>
<button type="submit">Generate</button>
</form>
<button class="copy">Copy to Clipboard</button>
<div class="info">
Use the sliders to set the parameters, then hit the "Generate" button.
You can copy the text by hitting the "Copy to Clipboard" button
</div>
</div>
<div class="output"></div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
Đánh dấu này chỉ đơn giản là xác định giao diện người dùng. Phía bên trái của màn hình hiển thị các điều khiển, trong khi phía bên phải hiển thị đầu ra. Tiếp theo, mở chính.js tệp, xóa nội dung của tệp và thêm một dòng để nhập phong cách.css:
import './style.css'
Nhập tệp Lorem và xác định biến toàn cục
Mở kho lưu trữ GitHub của dự án này, sao chép nội dung của lorem.js tệp và dán chúng vào bản sao cục bộ của bạn lorem.js. lorem.js chỉ cần xuất một chuỗi văn bản Lorem Ipsum rất dài mà các tệp JavaScript khác có thể sử dụng.
bên trong chính.js tệp, nhập tệp truyền thuyết chuỗi từ lorem.js file và xác định các biến cần thiết:
import { lorem } from './lorem';let text = lorem.replace(/[.,/#!$%^&*;:{}=-_`~()]/g, "").split(' ');
let lastChar;
let wordCountControl = document.querySelector("#w-count");
let paragraphCountControl = document.querySelector("#p-count");
let wordCountLabel = document.querySelector("#w-count-label");
let paragraphCountLabel = document.querySelector("#p-count-label");
let wordCount = wordCountControl.value;
let paragraphCount = paragraphCountControl.value;
let copy = document.querySelector(".copy");
Mã này sử dụng một biểu thức chính quy để loại bỏ bất kỳ dấu chấm câu nào trong truyền thuyết chữ. Các chữ biến liên kết phiên bản sửa đổi này của truyền thuyết chữ. Điều này sẽ làm cho nó dễ dàng hơn để tạo ra các từ và đoạn văn.
Tạo chức năng máy phát điện
Đối với bất kỳ câu hoặc đoạn văn được tạo ngẫu nhiên nào có vẻ “thực”, cần phải có dấu chấm câu. Sau khi xác định các biến toàn cục, hãy tạo một hàm gọi là generateRandomPunctuation() và trong chức năng đó tạo ra một mảng gọi là nhân vật và cư nó.
function generateRandomPunctuation() {
let characters = [",", "!", ".", "?"];
let character = characters[Math.floor(Math.random() * characters.length)];
lastChar = character;
return character;
}
Khối mã ở trên xác định một mảng, nhân vật, chứa các dấu chấm câu khác nhau. Nó định nghĩa một biến khác, tính cáchmà nó đặt thành một phần tử ngẫu nhiên từ nhân vật mảng. Biến toàn cầu, cuối cùngCharlưu trữ cùng một giá trị mà sau đó hàm trả về.
Tiếp theo, tạo một tạoParagraph() chức năng với một đếm tham số có giá trị mặc định là 100.
function generateParagraph(count = 100) {
}
Trong chức năng này, khai báo một đoạn văn mảng và tìm nạp các từ ngẫu nhiên từ toàn cầu chữ mảng, sau đó đẩy nó vào đoạn văn.
let paragraph = [];for (let i = 1; i <= count; i++) {
paragraph.push(text[Math.floor(Math.random() * text.length)].toLowerCase());
}
Tiếp theo, thêm mã để viết hoa chữ cái đầu tiên trong từ đầu tiên của mỗi đoạn:
let fl=paragraph[0];
paragraph[0] = fl.replace(fl[0], fl[0].toUpperCase());
Mỗi đoạn kết thúc bằng dấu chấm câu (thường là dấu chấm), vì vậy hãy thêm mã thêm dấu chấm vào cuối mỗi đoạn.
let lwPos = paragraph.length - 1;
let lWord = paragraph[lwPos];
paragraph[lwPos] = lWord.replace(lWord, lWord + ".");
Tiếp theo, triển khai chức năng thêm dấu chấm câu được tạo ngẫu nhiên vào thành phần ngẫu nhiên trong đoạn văn mảng.
paragraph.forEach((word, index) => {
if (index > 0 && index % 10 === 0) {
let randomNum = Math.floor(Math.random() * 4);
let pos = index + randomNum;
let randWord = paragraph[pos];
paragraph[pos] = randWord.replace(randWord, randWord + generateRandomPunctuation());
let nWord=paragraph[pos + 1]; if (lastChar !== ",") {
paragraph[pos + 1] = nWord.replace(nWord[0], nWord[0].toUpperCase());
}
}
})
Khối mã này tạo ra một ký tự chấm câu ngẫu nhiên và nối nó vào cuối một phần tử ngẫu nhiên từ đoạn văn mảng. Sau khi nối thêm dấu câu, nó viết hoa chữ cái đầu tiên của thành phần tiếp theo nếu dấu câu không phải là dấu phẩy.
Cuối cùng, trả lại đoạn văn mảng được định dạng dưới dạng một chuỗi:
return paragraph.join(" ");
Văn bản lorem ipsum phải có ‘cấu trúc’ dựa trên số lượng đoạn văn mà người dùng chỉ định. Bạn có thể sử dụng một mảng để xác định ‘cấu trúc’ này. Ví dụ: nếu người dùng muốn một văn bản lorem ipsum có ba đoạn, thì mảng ‘cấu trúc’ sẽ có dạng như sau:
structure = ["First paragraph.", "n n", "Second paragraph.", "n n", "Third paragraph"]
Trong khối mã ở trên, mỗi “n n” đại diện cho khoảng cách giữa mỗi đoạn. nếu bạn đăng nhập cấu trúc.join(“”) trong bảng điều khiển trình duyệt, bạn sẽ thấy như sau:
Tạo một hàm tự động tạo cấu trúc này và gọi hàm tạo raParagraph chức năng:
function generateStructure(wordCount, paragraph = 1) {
let structure = []; for (let i = 0; i < paragraph * 2; i++) {
if (i % 2 === 0) structure[i] = generateParagraph(wordCount);
else if (i < (paragraph * 2) - 1) structure[i] = "n n";
}
return structure.join("");
}
Thêm Trình lắng nghe sự kiện vào Điều khiển
Thêm trình xử lý sự kiện “đầu vào” vào wordCountControl phần tử đầu vào và trong chức năng gọi lại, đặt số từ đến giá trị đầu vào. Sau đó cập nhật nhãn.
wordCountControl.addEventListener("input", (e) => {
wordCount = e.target.value;
wordCountLabel.textContent= e.target.value;
})
Tiếp theo, thêm trình xử lý sự kiện “đầu vào” vào kiểm soát đoạn văn phần tử đầu vào và trong hàm gọi lại, đặt đoạn văn vào giá trị đầu vào và cập nhật nhãn.
paragraphCountControl.addEventListener("input", (e) => {
paragraphCount= e.target.value;
paragraphCountLabel.textContent = e.target.value;
})
Thêm trình xử lý sự kiện “nhấp chuột” vào sao chép nút gọi trở lại sao chép văn bản() khi sự kiện kích hoạt.
copy.addEventListener("click", ()=>copyText());
Cuối cùng, thêm trình xử lý sự kiện “gửi” vào hình thức phần tử HTML và gọi cập nhật giao diện người dùng chức năng trong chức năng gọi lại.
document.querySelector("form").addEventListener('submit', (e) => {
e.preventDefault();
updateUI();
})
Hoàn thiện và cập nhật giao diện người dùng
Tạo một chức năng getControlValues trả về số từ Và đoạn văn như một đối tượng.
function getControlValues() {
return { wordCount, paragraphCount };
}
Sau đó tạo cập nhậtUI() chức năng hiển thị văn bản được tạo trên màn hình cho người dùng:
function updateUI() {
let output = generateStructure(getControlValues().wordCount, getControlValues().paragraphCount)
document.querySelector(".output").innerText = output;
}
Sắp xong. tạo sao chép văn bản() chức năng ghi văn bản vào khay nhớ tạm bất cứ khi nào người dùng nhấp vào nút “Sao chép vào khay nhớ tạm”.
async function copyText() {
let text = document.querySelector(".output").innerText;
try {
await navigator.clipboard.writeText(text);
alert('Copied to clipboard');
} catch (err) {
alert('Failed to copy: ', err);
}
}
Sau đó gọi cập nhậtUI() chức năng:
updateUI();
Chúc mừng! Bạn đã xây dựng trình tạo văn bản lorem ipsum bằng JavaScript và Vite.
Tăng cường phát triển JavaScript của bạn với Vite
Vite là một công cụ giao diện người dùng phổ biến giúp dễ dàng thiết lập khung giao diện người dùng của bạn. Nó hỗ trợ nhiều khung khác nhau như React, Svelte, SolidJS và thậm chí cả JavaScript đơn giản. Nhiều nhà phát triển JavaScript sử dụng Vite vì nó rất dễ cài đặt và rất nhanh.