ما هو Alpine.js وكيف تستخدمه؟

عالم تطوير الويب فوضوي - تظهر الأطر وتخرج من الوجود والأشياء يمكن أن تكون مربكة للمطورين الجدد وذوي الخبرة على حد سواء.

على عكس معظم أطر تطوير الويب ، يهدف Alpine.js إلى أن يكون بسيطًا قدر الإمكان ، ولكنه قوي بما يكفي للتعامل مع مفاهيم مثل التفاعل والآثار الجانبية.

الشروع في العمل مع Alpine.js

تثبيت Alpine.js بسيط للغاية. ما عليك سوى تضمين ما يلي النصي علامة في HTML الخاص بك:

<النصيتأجيلsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">النصي>

بدلاً من ذلك ، يمكنك تثبيت Alpine.js في مشروعك باستخدام Node Package Manager:

npm تثبيت alpinejs

التفاعلية في Alpine.js

يخترع index.htm ملف وإضافة الكود المعياري التالي:

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8">
<ميتاhttp-equiv="متوافق مع X-UA"محتوى="IE = حافة">
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<عنوان>Alpine.jsعنوان>
رأس>
<جسم>
<النصيتأجيلsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">النصي>
جسم>
لغة البرمجة>

ال تأجيل السمة في النصي تخبر العلامة المتصفح بتشغيل البرنامج النصي فقط بعد انتهائه من تحليل المستند.

يوفر Alpine.js العديد من التوجيهات مثل بيانات x الذي تستخدمه لتخزين البيانات و x- نص التي يستخدمها لضبط النص الداخلي من المكون المرفق. لاستخدام هذه التوجيهات ، أضف الشفرة التالية إلى HTML الخاص بك.

<شعبةبيانات x="{الاسم: 'David Uzondu' ، المنظمة: 'Make Use Of'}">
 اسمي هو <قويx- نص="اسم">قوي>
 و <أناx- نص="منظمة">أنا> رائع
شعبة>

يخزن توجيه x-data كائنًا بالمفاتيح اسم و منظمة. يمكنك بعد ذلك تمرير هذه المفاتيح في توجيه x-text. عند تشغيل الكود ، سيقوم Alpine.js بتعبئة القيم:

كيف يقارن Alpine.js مع React

Alpine.js هو إطار عمل خفيف الوزن يجعله مناسبًا لتطوير المشاريع الصغيرة والنماذج الأولية.

في أطر أكبر مثل React ، تستخدم السنانير مثل useEffect () للتعامل مع الآثار الجانبية في دورة حياة المكون. يقوم هذا الخطاف بتشغيل وظيفة رد نداء كلما تغير أحد عناصر مصفوفة التبعية:

يستورد {useEffect} من"تتفاعل";
وظيفةMyComponent() {
 useEffect (() => {
/ * تنتقل وظيفة رد الاتصال هنا * /
 }, [ / * صفيف التبعية اختياري * / ]);
}

للتعامل مع الآثار الجانبية في Alpine.js ، يمكنك استخدام ملحق x- تأثير التوجيه. على سبيل المثال ، لنفترض أنك تريد مشاهدة متغير وتسجيل القيمة متى تغيرت:

<شعبةبيانات x="{رقم: 1}"x- تأثير="console.log (رقم)">
<h1x- نص="رقم">h1>
<زر @انقر="الرقم = رقم + 1">أضف رقمًا جديدًازر>
شعبة>

أول شيء قد تلاحظه هو أنك لست بحاجة إلى تحديد تبعية. سيستمع Alpine ببساطة إلى التغييرات في جميع المتغيرات التي تم تمريرها إلى x- تأثير. ال @انقر يقوم التوجيه بزيادة متغير الرقم بمقدار 1.

العرض الشرطي في Alpine.js

تقديم العناصر بشروط شيء يمكنك القيام به في أطر مثل React. يتيح لك Alpine.js أيضًا عرض العناصر بشكل مشروط. يوفر x- إذا التوجيه والخاصة نموذج العنصر الذي يمكنك استخدامه لتقديم العناصر بشكل شرطي.

إنشاء آخر index.htm ملف وإضافة نفس الكود المعياري كما كان من قبل. أضف التعليمات البرمجية التالية إلى نص HTML.

<شعبةبيانات x="{يظهر: صحيح}">
<زر @انقر="معروض =! معروض"x- نص="المعروضة؟ "إخفاء العنصر": "إظهار العنصر" ">تبديلزر>
<نموذجx- إذا="معروض">
<شعبة>قفز الثعلب البني السريع فوق الكلب.شعبة>
نموذج>
شعبة>

ال x- إذا يتم تمرير التوجيه إلى نموذج عنصر. هذا مهم لأنه يسمح لـ Alpine.js بتتبع عنصر تتم إضافته أو إزالته من الصفحة. ال نموذج يجب أن يحتوي العنصر على عنصر واحد على مستوى الجذر ؛ الكود التالي ينتهك هذه القاعدة:

<نموذجx- إذا="معروض">
<شعبة>سيتم عرض هذا العنصر على ما يرام.شعبة>
<شعبة>سيتم تجاهل هذا العنصر بواسطة Alpine.jsشعبة>
نموذج>

إنشاء تطبيق مهام باستخدام Alpine.js

حان الوقت لدمج كل ما تعلمته حتى الآن وإنشاء تطبيق مهام بسيط مع دعم التخزين المحلي. أولاً ، أنشئ مجلدًا واملأه بملحق index.htm ملف و style.css ملف. أضف التعليمات البرمجية المعيارية إلى ملف index.htm وقم بتضمين مرجع إلى ملف style.css ملف:

<وصلةrel="ورقة الأنماط"href="style.css">

لا تقلق بشأن CSS هنا ، فقط انسخ ملف style.css ملف من هذا مستودع جيثب الخاص بالمشروع.

لاستمرار البيانات بعد إعادة تحميل الصفحة ، تحتاج إلى ملف Alpine.js ثابر توصيل في. أضف بناء CDN لهذا البرنامج المساعد كملف النصي علامة ، أعلى مباشرةً من بناء Alpine.js CDN الأساسي:

<النصيتأجيلsrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">النصي>

في ال جسم تحديد أ شعبة عنصر بامتداد بيانات x التوجيه. يجب أن يحتوي هذا التوجيه على مصفوفة تسمى كل المهام. ثم أضف ملف h1 عنصر مع النص "To-Do Application".

<شعبةبيانات x="{allTasks: $ persist ([])}">
<h1>تطبيق المهامh1>
شعبة>

ال $ تستمر البرنامج المساعد هو غلاف لـ JavaScript localStorage API. يخبر المتصفح بتخزين المصفوفة في التخزين المحلي ، بحيث تظل البيانات سليمة حتى بعد إعادة تحميل الصفحة. أضف استمارة مع يُقدِّم التوجيه الذي يمنع أيضًا إجراء الإرسال الافتراضي.

<استمارة @يقدم. منع="
 ($ refs.task.value.trim (). length &&! allTasks.map (x => x.task). تتضمن ($ refs.task.value.trim ()))
? allTasks = [{task: $ refs.task.value.trim ()، id: Date.now ()، done: false}]. concat (allTasks)
: $ refs.task.value.trim () " 
? تنبيه ("قيمة الإدخال لا يمكن أن تكون فارغة")
: تنبيه ("المهمة المضافة بالفعل.") ؛
 $ refs.task.value = "
">
استمارة>

ال المراجع $ شرط يسمح بالوصول إلى عنصر DOM باستخدام "المهمة" x- المرجع التوجيه. يعالج الرمز أيضًا بعض عمليات التحقق من الصحة ويضمن عدم إضافة سلاسل فارغة أو مهام مكررة إلى القائمة. قبل إنهاء النموذج ، أضف مدخل عنصر بامتداد x- المرجع من "المهمة" وعنصر نائب. ثم أضف زرًا واضبط نوعه على "إرسال".

<مدخليكتب="نص"x- المرجع="مهمة">
<زريكتب="يُقدِّم">إضافة مهمةزر>

بعد ذلك ، حدد div بالفئة "items". يجب أن يحتوي هذا div على قسمين آخرين: أحدهما به بيانات x تعيين إلى مجموعة "غير مكتملة" ومجموعة أخرى إلى مجموعة "مكتملة". يجب أن يكون لكل من قسمي div x- تأثير التوجيه والمصفوفة يجب أن تكون ملفوفة في $ تستمر جملة كما هو موضح سابقًا.

<شعبةفصل="أغراض">
<شعبةبيانات x="{غير مكتمل: $ persist ([])}"x- تأثير="uncompleted = allTasks.filter (x => x.donefalse)">
شعبة>

<شعبةبيانات x="{أكملت: $ persist ([])}"x- تأثير="مكتمل = allTasks.filter (y => y.donetrue) .reverse ()">
شعبة>
شعبة>

في أول div ، أضف h3 علامة بالنص "غير مكتمل". ثم لكل عنصر في غير مكتمل مجموعة ، تصيير أ شعبة الذي يحمل "الضوابط" والمهمة نفسها.

تسمح عناصر التحكم للمستخدم بحذف عنصر أو وضع علامة عليه كمكتمل:

<h3>غير مكتملh3>
<نموذجx مقابل="عنصر غير مكتمل":مفتاح="element.id">
<شعبةبيانات x="{showControls: false}" @تمرير الماوس="showControls = true" @تجاوز الماوس="showControls = false"
 class = "مهمة"
 >
<شعبةفصل="ضوابط">
<شعبةاكس شو="showControls" @انقر="element.done = صحيح">[م]شعبة>
<شعبةاكس شو="showControls" @انقر="allTasks = allTasks.filter (x => x.id! == element.id)">[R]شعبة>
شعبة>
<شعبةx- نص="element.task" >شعبة>
شعبة>
نموذج>

يمكنك استخدام ال x مقابل التوجيه للتكرار من خلال مصفوفة وتقديم العناصر. انه ايضا مشابه مقابل في Vue و خريطة صفيف () طريقة الصفيف في React. تحتوي "عناصر التحكم" div على قسمين مع السلسلة "[M]" و "[R]". هذه السلاسل ترمز إلى "وضع علامة تم" و "إزالة". يمكنك استبدال هذه الرموز المناسبة إذا كنت ترغب في ذلك.

ال اكس شو التوجيه يحدد عنصرًا عرض CSS إلى لا أحد إذا كانت القيمة التي تشير إلى التوجيه خاطئة. يشبه div الثاني في div "items" الأول مع بعض الاستثناءات الملحوظة: The h3 تم تعيين النص على "مكتمل" ، ولدى الطفل الأول لـ "control" نص "[U]" بدلاً من "[M]" وفي عنصر div هذا @انقر التوجيه عنصر تم تعيينه على خطأ شنيع.

<شعبةاكس شو="showControls" @انقر="element.done = false">[U]شعبة>

وهذا كل شيء ، لقد تجاوزت أساسيات Alpine.js واستخدمت ما تعلمته لإنشاء تطبيق مهام أساسي.

جعل كود Alpine.js أسهل في الكتابة

عندما تبدأ في كتابة كود Alpine.js ، قد يكون من الصعب أن تلفت انتباهك. لحسن الحظ ، توفر برامج تحرير التعليمات البرمجية مثل Visual Studio Code مجموعة واسعة من الإضافات التي تجعل التطوير أسهل.

في Extensions Marketplace ، يمكنك الحصول على ملحق Alpine.js IntelliSense الذي يسهل التعامل مع التوجيهات. يمكن أن يساعد ذلك في تحسين إنتاجيتك عند استخدام Alpine.js في مشاريعك.