كيفية بناء مولد نص Lorem Ipsum باستخدام JavaScript و Vite

Lorem ipsum هو نص يستخدمه المطورون والمصممين حول العالم كعنصر نائب. إذا كنت تتفاعل مع الكثير من النماذج الأولية لواجهة المستخدم ، فمن المحتمل أنك صادفتها من قبل.

تعرف على كيفية إنشاء منشئ Lorem ipsum المرن باستخدام Vite و JavaScript وستقوم بمراجعة مهارات التطوير لديك بنتيجة مفيدة.

لماذا يستخدم لوريم إيبسوم على نطاق واسع؟

قد تتساءل عن سبب اختيار العديد من المطورين والمصممين lorem ipsum بينما يمكنهم فقط نسخ صفحة من كتاب ملكية عامة أو ما شابه. السبب الرئيسي هو أنه يتيح للمستخدم أو العارض التعرف على الشكل المرئي للمستند أو النموذج الأولي ، دون زيادة التركيز على نص العنصر النائب نفسه.

تخيل أنك تصمم صحيفة. بدلاً من مواجهة مشكلة نسخ نص من مصادر مختلفة لجعل التصميم بتنسيق واقعية قدر الإمكان ، يمكنك فقط نسخ نص العنصر النائب القياسي lorem ipsum واستخدامه بدلاً من.

يتم التعرف على Lorem ipsum على نطاق واسع لدرجة أنك لا تحتاج حتى إلى تحديد ما إذا كان نصًا نائبًا - في الواقع ، سيتعرف كل من يصادفه على الفور على أن النص عبارة عن حشو.

إعداد خادم المشروع والتطوير

الكود المستخدم في هذا المشروع متاح في ملف مستودع جيثب وهو مجاني لك لاستخدامه بموجب ترخيص MIT. انسخ محتويات ملف style.css و ال lorem.js الملفات ولصقها في النسخ المحلية الخاصة بك من هذه الملفات.

إذا كنت تريد إلقاء نظرة على نسخة حية من هذا المشروع ، يمكنك التحقق من ذلك تجريبي.

سوف تستخدم ملف أداة بناء Vite لتهيئة الأمور. تأكد من أن لديك Node.js و مدير حزمة العقدة (NPM) أو الغزل مثبتًا على جهازك ، ثم افتح الجهاز الطرفي وقم بتشغيل:

npm إنشاء vite

أو:

الغزل يخلق vite

يجب أن يؤدي هذا إلى دعم مشروع Vite الفارغ. أدخل اسم المشروع ، واضبط الإطار على "Vanilla" ، والمتغير على "Vanilla". بعد القيام بذلك ، انتقل إلى دليل المشروع باستخدام ملف قرص مضغوط الأمر ، ثم قم بتشغيل:

npm أنا

أو:

غزل

بعد تثبيت جميع التبعيات ، افتح المشروع في محرر النصوص الذي تختاره ، ثم قم بتعديل بنية المشروع لتبدو كما يلي:

الآن ، امسح محتويات ملف index.html ملف واستبداله بما يلي:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8" />
<وصلةrel="أيقونة"يكتب="صورة / svg + xml"href="/vite.svg" />
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0" />
<عنوان>مولد لوريم إيبسومعنوان>
رأس>
<جسم>
<h1>مولد لوريم إيبسومh1>
<شعبةبطاقة تعريف="برنامج">
<شعبةفصل="ضوابط">
<استمارة>
<شعبةفصل="يتحكم">
<ملصقل="w-count">الكلمات لكل فقرةملصق>
<شعبة>
<مدخليكتب="يتراوح"بطاقة تعريف="w-count"دقيقة="10"الأعلى="100"قيمة="25"خطوة="10">
<فترةبطاقة تعريف="w-count-label">25فترة>
شعبة>
شعبة>
<شعبةفصل="يتحكم">
<ملصقل="p-count">عدد الفقراتملصق>
<شعبة>
<مدخليكتب="يتراوح"بطاقة تعريف="p-count"دقيقة="1"الأعلى="20"خطوة="1"قيمة="3">
<فترةبطاقة تعريف="p-count-label">3فترة>
شعبة>
شعبة>
<زريكتب="يُقدِّم">يولدزر>
استمارة>
<زرفصل="ينسخ">نسخ إلى الحافظةزر>
<شعبةفصل="معلومات">
 استخدم أشرطة التمرير لتعيين المعلمات ، ثم اضغط على الزر "إنشاء".

 يمكنك نسخ النص عن طريق الضغط على زر "نسخ إلى الحافظة"
شعبة>
شعبة>
<شعبةفصل="انتاج">شعبة>
شعبة>
<النصييكتب="وحدة"src="/main.js">النصي>
جسم>
لغة البرمجة>

يحدد هذا الترميز ببساطة واجهة المستخدم. يعرض الجانب الأيسر من الشاشة عناصر التحكم ، بينما يعرض الجانب الأيمن الإخراج. بعد ذلك ، افتح ملف main.js ملف ، امسح محتوياته ، وأضف سطرًا واحدًا للاستيراد style.css:

يستورد"./style.css"

استيراد ملف لوريم وتحديد المتغيرات العامة

افتح مستودع GitHub لهذا المشروع ، وانسخ محتويات ملف lorem.js ملف ، ولصقها في نسختك المحلية من lorem.js. lorem.js ببساطة يقوم بتصدير سلسلة طويلة جدًا من نص Lorem Ipsum يمكن لملفات JavaScript الأخرى استخدامها.

في ال main.js ملف ، قم باستيراد ملف لوريم سلسلة من lorem.js ملف وتحديد المتغيرات اللازمة:

يستورد {lorem} من"./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 (".ينسخ");

يستخدم هذا الرمز تعبير عادي لإزالة أي علامات ترقيم في لوريم نص. ال نص متغير يربط هذه النسخة المعدلة من لوريم نص. هذا من شأنه أن يجعل من السهل إنشاء الكلمات والفقرات.

إنشاء وظائف المولد

لكي تظهر أي جملة أو فقرة بشكل عشوائي "حقيقية" ، يجب أن تكون هناك علامات ترقيم. بعد تحديد المتغيرات العامة ، قم بإنشاء دالة تسمى createRandomPunctuation () وفي هذه الوظيفة ، قم بإنشاء مصفوفة تسمى الشخصيات ويسكنها.

وظيفةتوليد عشوائية() {
يترك الشخصيات = [",", "!", ".", "?"];
يترك حرف = أحرف [رياضيات.أرضية(رياضيات.random () * character.length)] ؛
 lastChar = حرف ؛
يعود شخصية؛
}

تحدد كتلة الشفرة أعلاه مصفوفة ، الشخصيات، التي تحتوي على علامات ترقيم مختلفة. يحدد متغيرًا آخر ، شخصية، والتي يتم تعيينها إلى عنصر عشوائي من ملف الشخصيات مجموعة مصفوفة. المتغير الشامل ، lastChar، يخزن نفس القيمة التي ترجعها الدالة بعد ذلك.

بعد ذلك ، قم بإنشاء ملف توليد فقرة () تعمل مع أ عدد المعلمة التي لها قيمة افتراضية 100.

وظيفةتوليد فقرة(العد = 100) {
}

في هذه الوظيفة ، أعلن عن ملف فقرة صفيف وجلب كلمات عشوائية من العالمية نص مجموعة ، ثم ادفعها إلى الداخل فقرة.

يترك فقرة = [] ؛
ل (يترك أنا = 1; أنا <= العد ؛ أنا ++) {
 paragraph.push (نص [رياضيات.أرضية(رياضيات.random () * text.length)]. toLowerCase ()) ؛
}

بعد ذلك ، أضف الكود لتكبير الحرف الأول في الكلمة الأولى من كل فقرة:

يترك fl = فقرة [0];
فقرة[0] = fl.replace (fl [0] ، fl [0].إلى الحالة العليا())؛

تنتهي كل فقرة بعلامة ترقيم (عادة ما تكون نقطة) ، لذا أضف الشفرة التي تضيف نقطة إلى نهاية كل فقرة.

يترك lwPos = paragraph.length - 1;
يترك lWord = فقرة [lwPos] ،
فقرة [lwPos] = lWord.replace (lWord ، lWord + ".");

بعد ذلك ، قم بتنفيذ الوظيفة لإضافة علامات ترقيم تم إنشاؤها عشوائيًا إلى عنصر عشوائي في ملف فقرة مجموعة مصفوفة.

فقرة لكل ((كلمة ، فهرس) => {
لو (الفهرس> 0 && فِهرِس ٪ 100) {
يترك رقم عشوائي = رياضيات.أرضية(رياضيات.عشوائي() * 4);
يترك نقاط البيع = الفهرس + randomNum ؛
يترك randWord = فقرة [pos] ؛
 فقرة [pos] = randWord.replace (randWord، randWord + إنشاءRandomPunctuation ()) ؛
يترك nWord = فقرة [pos + 1];
لو (lastChar! == ",") {
 فقرة [pos + 1] = nWord.replace (nWord [0] ، nWord [0].إلى الحالة العليا())؛
 }
 }
})

يُنشئ مقطع الشفرة هذا رمزًا عشوائيًا لعلامات الترقيم ويلحقه بنهاية عنصر عشوائي من ملف فقرة مجموعة مصفوفة. بعد إلحاق علامات الترقيم ، يتم تكبير الحرف الأول من العنصر التالي إذا لم تكن علامة الترقيم عبارة عن فاصلة.

أخيرًا ، أعد ملف فقرة صفيف منسق كسلسلة:

يعود فقرة الانضمام (" ");

يجب أن يحتوي نص lorem ipsum على "هيكل" يعتمد على عدد الفقرات التي يحددها المستخدم. يمكنك استخدام مصفوفة لتحديد هذا "الهيكل". على سبيل المثال ، إذا أراد المستخدم نص lorem ipsum من ثلاث فقرات ، فيجب أن تبدو مصفوفة "الهيكل" على النحو التالي:

الهيكل = ["الفقرة الأولى"., "\ n \ n", "الفقرة الثانية.", "\ n \ n", "الفقرة الثالثة"]

في مقطع التعليمات البرمجية أعلاه ، يمثل كل "\ n \ n" التباعد بين كل فقرة. إذا قمت بتسجيل الدخول Structure.join ("") في وحدة تحكم المتصفح ، يجب أن ترى ما يلي:

قم بإنشاء وظيفة تقوم تلقائيًا بإنشاء هذه البنية واستدعاء توليد فقرة وظيفة:

وظيفةتوليد هيكل(عدد الكلمات ، الفقرة = 1) {
يترك هيكل = [] ؛
ل (يترك أنا = 0; أنا 2; أنا ++) {
لو (أنا ٪ 20) هيكل [i] = إنشاء فقرة (wordCount) ؛
آخرلو (أنا 2) - 1) هيكل [i] = "\ n \ n";
 }
يعود هيكل. الانضمام ("");
}

إضافة مستمعي الأحداث إلى عناصر التحكم

إضافة مستمع حدث "الإدخال" إلى wordCountControl عنصر الإدخال وفي وظيفة رد الاتصال ، اضبط ملف عدد الكلمات لقيمة الإدخال. ثم قم بتحديث الملصق.

wordCountControl.addEventListener ("مدخل"، (هـ) => {
 wordCount = e.target.value ؛
 wordCountLabel.textContent = e.target.value ؛
})

بعد ذلك ، أضف مستمع حدث "إدخال" إلى ملف الفقرةCountControl عنصر الإدخال وفي وظيفة رد الاتصال ، قم بتعيين فقرة إلى قيمة الإدخال وتحديث التسمية.

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() {
يترك الإخراج = createStructure (getControlValues ​​(). wordCount ، getControlValues ​​(). paragraphCount)
وثيقة.querySelector (".انتاج") .innerText = الإخراج ؛
}

يكاد ينتهي. قم بإنشاء ملف نسخ النص() الوظيفة التي تكتب النص إلى الحافظة عندما ينقر المستخدم على الزر "نسخ إلى الحافظة".

غير متزامنوظيفةنسخ النص() {
يترك نص = وثيقة.querySelector (".انتاج") .innerText ؛
يحاول {
انتظر navigator.clipboard.writeText (نص) ؛
 يُحذًِر('نسخ إلى الحافظة');
 } يمسك (يخطئ) {
 يُحذًِر("فشل النسخ:"، يخطئ) ؛
 }
 }

ثم اتصل ب updateUI () وظيفة:

updateUI () ؛

تهانينا! لقد قمت ببناء مولد نص lorem ipsum باستخدام JavaScript و Vite.

عزز تطوير JavaScript الخاص بك باستخدام Vite

Vite هي أداة واجهة أمامية شائعة تجعل من السهل إعداد إطار الواجهة الأمامية. وهو يدعم مجموعة متنوعة من الأطر مثل React و Svelte و SolidJS وحتى Vanilla JavaScript عادي. يستخدم العديد من مطوري JavaScript Vite لأنه سهل الإعداد وسريع جدًا.