הפעל את כישורי ה-Vite שלך ​​עם יוצר טקסט הדמה מבוסס GUI הזה.

Lorem ipsum הוא טקסט שמפתחים ומעצבים ברחבי העולם משתמשים בו כמציין מיקום. אם אתה מקיים אינטראקציה עם הרבה אבות טיפוס של ממשק משתמש, כנראה שנתקלת בזה בעבר.

למד כיצד לבנות מחולל Lorem ipsum גמיש עם Vite ו-JavaScript ותגמיש את כישורי הפיתוח שלך עם תוצאה שימושית.

מדוע נעשה שימוש כה נרחב ב-Lorem Ipsum?

אתה אולי תוהה מדוע כל כך הרבה מפתחים ומעצבים בוחרים ב-lorem ipsum כשהם יכולים פשוט להעתיק עמוד מתוך ספר ברשות הרבים או דומה. הסיבה העיקרית היא שהוא מאפשר למשתמש או לצופה לקבל תחושה של הצורה החזותית של מסמך או אב טיפוס, מבלי להפנות יותר מדי פוקוס לטקסט מציין המיקום עצמו.

תאר לעצמך שאתה מעצב עיתון. במקום לעבור את הטרחה של העתקת טקסט ממקורות שונים כדי להפוך את העיצוב כמו ריאלי ככל האפשר, אתה יכול פשוט להעתיק את טקסט מציין המיקום הסטנדרטי של lorem ipsum ולהשתמש בו במקום זאת.

Lorem ipsum זוכה להכרה נרחבת עד כדי כך שאתה אפילו לא צריך לציין שזהו טקסט מציין מיקום - למעשה כל מי שנתקל בו, יזהה מיד שהטקסט הוא מילוי.

הגדרת שרת הפרויקט והפיתוח

הקוד המשמש בפרויקט זה זמין ב-a

instagram viewer
מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT. העתק את התוכן של style.css וה lorem.js קבצים והדבק אותם בעותקים המקומיים שלך של קבצים אלה.

אם אתה רוצה להסתכל על גרסה חיה של הפרויקט הזה, אתה יכול לבדוק את זה הַדגָמָה.

אתה תשתמש ב- כלי בניית Vite להגדיר דברים. ודא שיש לך את Node.js ואת ה- מנהל חבילות צומת (NPM) או חוט המותקן במחשב שלך, ואז פתח את המסוף שלך והפעל:

npm ליצור vite

אוֹ:

חוט ליצור vite

זה אמור לטפח פרויקט Vite ריק. הזן את שם הפרויקט, הגדר את המסגרת ל"וניל" ואת הגרסה ל"וניל". לאחר שתעשה זאת, נווט אל ספריית הפרויקט עם ה- CD הפקודה, ואז הרץ:

npm i

אוֹ:

חוּט

לאחר התקנת כל התלות, פתח את הפרויקט בעורך הטקסט הרצוי שלך, ולאחר מכן שנה את מבנה הפרויקט כך שייראה בערך כך:

כעת, נקה את התוכן של index.html קובץ והחלף אותו בקובץ הבא:

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8" />
<קישורrel="סמל"סוּג="image/svg+xml"href="/vite.svg" />
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0" />
<כותרת>מחולל לורם איפסוםכותרת>
רֹאשׁ>
<גוּף>
<h1>מחולל לורם איפסוםh1>
<divתְעוּדַת זֶהוּת="אפליקציה">
<divמעמד="בקרות">
<טופס>
<divמעמד="לִשְׁלוֹט">
<תוויתל="ספירת w">מילים לכל פסקהתווית>
<div>
<קֶלֶטסוּג="טווח"תְעוּדַת זֶהוּת="ספירת w"דקה="10"מקסימום="100"ערך="25"שלב="10">
<לְהַקִיףתְעוּדַת זֶהוּת="w-count-label">25לְהַקִיף>
div>
div>
<divמעמד="לִשְׁלוֹט">
<תוויתל="ספירת p">ספירת פסקאותתווית>
<div>
<קֶלֶטסוּג="טווח"תְעוּדַת זֶהוּת="ספירת p"דקה="1"מקסימום="20"שלב="1"ערך="3">
<לְהַקִיףתְעוּדַת זֶהוּת="p-count-label">3לְהַקִיף>
div>
div>
<לַחְצָןסוּג="שלח">לִיצוֹרלַחְצָן>
טופס>
<לַחְצָןמעמד="עותק">העתק ללוחלַחְצָן>
<divמעמד="מידע">
 השתמש במחוונים כדי להגדיר את הפרמטרים, ואז לחץ על כפתור "צור".

 אתה יכול להעתיק את הטקסט על ידי לחיצה על כפתור "העתק ללוח".
div>
div>
<divמעמד="תְפוּקָה">div>
div>
<תַסרִיטסוּג="מודול"src="/main.js">תַסרִיט>
גוּף>
html>

סימון זה פשוט מגדיר את ממשק המשתמש. הצד השמאלי של המסך מציג את הפקדים, בעוד הצד הימני מציג את הפלט. לאחר מכן, פתח את main.js קובץ, נקה את תוכנו והוסף שורה אחת לייבוא style.css:

יְבוּא'./style.css'

ייבוא ​​קובץ לורם והגדרת משתנים גלובליים

פתח את מאגר GitHub של הפרויקט הזה, העתק את התוכן של lorem.js קובץ, והדבק אותם בעותק המקומי שלך של lorem.js. lorem.js פשוט מייצא מחרוזת ארוכה מאוד של טקסט Lorem Ipsum שקובצי JavaScript אחרים יכולים להשתמש בו.

בתוך ה main.js קובץ, ייבא את לורם מחרוזת מה lorem.js קובץ והגדר את המשתנים הדרושים:

יְבוּא { לורם } מ'./lorem';
לתת text = lorem.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").לְפַצֵל(' ');
לתת lastChar;
לתת wordCountControl = מסמך.querySelector("#w-count");
לתת paragraphCountControl = מסמך.querySelector("#p-count");
לתת wordCountLabel = מסמך.querySelector("#w-count-label");
לתת paragraphCountLabel = מסמך.querySelector("#p-count-label");
לתת wordCount = wordCountControl.value;
לתת paragraphCount = paragraphCountControl.value;
לתת העתק = מסמך.querySelector(".עותק");

קוד זה משתמש ביטוי רגולרי כדי להסיר כל סימני פיסוק ב- לורם טֶקסט. ה טֶקסט המשתנה מקשר את הגרסה המעודכנת הזו של ה- לורם טֶקסט. זה אמור להקל על יצירת מילים ופסקאות.

יצירת פונקציות המחולל

כדי שכל משפט או פסקה שנוצרו באקראי יופיעו "אמיתיים", צריך להיות סימני פיסוק. לאחר הגדרת המשתנים הגלובאליים, צור פונקציה שנקראת generRandomPunctuation() ובפונקציה הזו ליצור מערך שנקרא דמויות ולאכלס אותו.

פוּנקצִיָהליצור פיסוק אקראי() {
לתת תווים = [",", "!", ".", "?"];
לתת תו = תווים[מתמטיקה.קוֹמָה(מתמטיקה.random() * characters.length)];
 lastChar = תו;
לַחֲזוֹר אופי;
}

בלוק הקוד למעלה מגדיר מערך, דמויות, שמכיל סימני פיסוק שונים. הוא מגדיר משתנה נוסף, אופי, שהוא מגדיר לאלמנט אקראי מה- דמויות מַעֲרָך. המשתנה הגלובלי, lastChar, מאחסן את אותו ערך שהפונקציה מחזירה.

לאחר מכן, צור א generParagraph() לתפקד עם א לספור פרמטר שערך ברירת המחדל הוא 100.

פוּנקצִיָהgenerParagraph(לספור = 100) {
}

בפונקציה זו, הכריז על א פסקה מערך ואחזר מילים אקראיות מהגלובל טֶקסט מערך, ואז לדחוף אותו לתוכו פסקה.

לתת פסקה = [];
ל (לתת אני = 1; אני <= ספירה; i++) {
 paragraph.push (טקסט[מתמטיקה.קוֹמָה(מתמטיקה.random() * text.length)].toLowerCase());
}

לאחר מכן, הוסף את הקוד כדי להשתמש באות רישיות באות הראשונה במילה הראשונה של כל פסקה:

לתת fl=פסקה[0];
פסקה[0] = fl.replace (fl[0], fl[0].toUpperCase());

כל פסקה מסתיימת בסימן פיסוק (בדרך כלל נקודה), אז הוסף את הקוד שמוסיף נקודה לסוף כל פסקה.

לתת lwPos = paragraph.length - 1;
לתת lWord = פסקה[lwPos];
paragraph[lwPos] = lWord.replace (lWord, lWord + ".");

לאחר מכן, יישם את הפונקציונליות כדי להוסיף סימני פיסוק שנוצר אקראי לאלמנט אקראי ב- פסקה מַעֲרָך.

paragraph.forEach((מילה, אינדקס) => {
אם (אינדקס > 0 && אינדקס % 100) {
לתת randomNum = מתמטיקה.קוֹמָה(מתמטיקה.random() * 4);
לתת pos = index + randomNum;
לתת randWord = פסקה[pos];
 paragraph[pos] = randWord.replace (randWord, randWord + generRandomPunctuation());
לתת nWord=paragraph[pos + 1];
אם (lastChar !== ",") {
 פסקה[pos + 1] = nWord.replace (nWord[0], nWord[0].toUpperCase());
 }
 }
})

בלוק קוד זה יוצר תו פיסוק אקראי ומצרף אותו לסוף אלמנט אקראי מה- פסקה מַעֲרָך. לאחר הוספת הפיסוק, הוא מפעיל את האות הראשונה של האלמנט הבא באות רישיות אם הפיסוק אינו פסיק.

לבסוף, החזר את פסקה מערך בפורמט כמחרוזת:

לַחֲזוֹר paragraph.join(" ");

לטקסט lorem ipsum צריך להיות 'מבנה' המבוסס על מספר הפסקאות שהמשתמש מציין. אתה יכול להשתמש במערך כדי להגדיר את ה'מבנה' הזה. לדוגמה, אם המשתמש רוצה טקסט lorem ipsum עם שלוש פסקאות, מערך 'מבנה' צריך להיראות כך:

מבנה = ["פסקה ראשונה.", "\n \n", "פסקה שניה.", "\n \n", "פסקה שלישית"]

בבלוק הקוד למעלה, כל "\n \n" מייצג את המרווח בין כל פסקה. אם תיכנס structure.join("") במסוף הדפדפן, אתה אמור לראות את הדברים הבאים:

צור פונקציה שיוצרת אוטומטית את המבנה הזה וקוראת ל- generParagraph פוּנקצִיָה:

פוּנקצִיָהליצור מבנה(ספירת מילים, פסקה = 1) {
לתת מבנה = [];
ל (לתת אני = 0; i < פסקה * 2; i++) {
אם (אני % 20) structure[i] = generParagraph (ספירת מילים);
אַחֵראם (i < (פסקה * 2) - 1) מבנה[i] = "\n \n";
 }
לַחֲזוֹר structure.join("");
}

הוספת מאזיני אירועים לפקדים

הוסף מאזין אירועים "קלט" ל- wordCountControl רכיב קלט ובפונקציית החזרה, הגדר את ספירת מילים לערך הקלט. לאחר מכן עדכן את התווית.

wordCountControl.addEventListener("קֶלֶט", (ה) => {
 wordCount = e.target.value;
 wordCountLabel.textContent= e.target.value;
})

לאחר מכן, הוסף מאזין אירועים "קלט" ל- paragraphCountControl רכיב קלט ובפונקציית ה-callback הגדר את ספירת סעיפים לערך הקלט ועדכן את התווית.

paragraphCountControl.addEventListener("קֶלֶט", (ה) => {
 paragraphCount= e.target.value;
 paragraphCountLabel.textContent = e.target.value;
})

הוסף מאזין אירוע "קליק" ל- עותק כפתור המתקשר חזרה אל העתק טקסט() כאשר האירוע מופעל.

copy.addEventListener("נְקִישָׁה", ()=>copyText());

לבסוף, הוסף מאזין אירוע "שלח" ל- טופס רכיב HTML וקרא ל- updateUI פונקציה בפונקציית החזרה.

מסמך.querySelector("טופס").addEventListener('שלח', (ה) => {
 e.preventDefault();
 updateUI();
})

סיום ועדכון ממשק המשתמש

צור פונקציה getControlValues שמחזיר ספירת מילים ו ספירת סעיפים כאובייקט.

פוּנקצִיָהgetControlValues() {
לַחֲזוֹר { wordCount, paragraphCount };
}

לאחר מכן צור את updateUI() פונקציה המציגה את הטקסט שנוצר על המסך עבור המשתמש:

פוּנקצִיָהupdateUI() {
לתת output = generStructure (getControlValues().wordCount, getControlValues().paragraphCount)
מסמך.querySelector(".תְפוּקָה").innerText = פלט;
}

כמעט סיימתי. צור את העתק טקסט() פונקציה שכותבת את הטקסט ללוח בכל פעם שהמשתמש לוחץ על כפתור "העתק ללוח".

אסינכרוןפוּנקצִיָההעתק טקסט() {
לתת טקסט = מסמך.querySelector(".תְפוּקָה").innerText;
לְנַסוֹת {
לְהַמתִין navigator.clipboard.writeText (טקסט);
 עֵרָנִי('הועתק ללוח');
 } לתפוס (שגיאה) {
 עֵרָנִי('ההעתקה נכשלה:', טעות);
 }
 }

ואז התקשר ל updateUI() פוּנקצִיָה:

updateUI();

מזל טוב! בנית מחולל טקסט lorem ipsum עם JavaScript ו-Vite.

הגדל את פיתוח ה-JavaScript שלך עם Vite

Vite הוא כלי קצה פופולרי שמקל על הגדרת המסגרת הקדמית שלך. הוא תומך במגוון מסגרות כמו React, Svelte, SolidJS ואפילו JavaScript רגיל וניל. מפתחי JavaScript רבים משתמשים ב-Vite מכיוון שקל מאוד להגדיר אותו ומהיר מאוד.