التصنيفات
تطوير لغة javascript

مكتبة Alpine.js بديل jQuery القوى

مشاهدة
35

Alpine.js هو إطار عمل مميز و فى نفس الوقت بسيط بإستخدام JavaScript. تتميز هذه المكتبة بصغر حجمها مقارنتًا بالمكتبات الاخرى التى تؤدى نفس الغرض مثل React و Vue.

ما هو Alpine.js؟
Source: cdn.devdojo.com

ماهى AlpineJs

هى مكتبة مبنية على جافاسكربت توفر طريقة سهلة للتفاعل مع محتويات DOM لانشاء صفحات تفاعلية.

يمكن استخدام alpine كبديل لـ jQuery أو حتى Angular أو React أو Vue التي تستخدمها عادةً للواجهات سريعة الاستجابة.

وتتيمز المكتبة بصغر حجمها حيث انها لا تتعدى 2 كيلو بايت عند ضغطها, يمكنك ببساطة ادارجها فى ملف HTML اما بإستخدام CDN او حتى مباشرتًا من ملفات المشروع الخاص بك.

يتم وضع الكود التالى قبل نهاية وسم head.

كيفية تركيب AlpineJS

كما يمكنك ادراج اصدار معين على سبيل المثال https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer ></script>

 

مثال على استخدام AlpineJS

<div x-data="{ open: false }"> <button @click="open = true">فتح القائمة</button> <ul x-show="open" @click.away="open = false"> محتوى القائمة </ul> </div>

 

المثال السابق يوضح كيفية استخدام Alpine فى عمل قائمة منسدلة Dropdown, يتم استخدام البادئة x-data لتعريف States الخاصة بالمكتبة و State هى الحالة التى تقوم المكتبة بمراقبتها بشكل مستمر لتغير شكل DOM بناء علي هذه States.

اين يمكننى معرفة المزيد عن AlpineJS

يمكنك دئمًا الرجوع إلى الموقع الرسمى للمكتبة https://alpinejs.dev/ الذى يحتوى الكثير من الامثلة والشرح الدقيق لكل خصائص المكتبة.

كما يمكنك ايضًا متابعه هذا الموقع العربى الذى يقدم توثيق كامل للمكتبة باللغة العربية https://alpinejs.abdelhadi.org

لا تنسى الاشترك فى القائمة البريدية ليصلك كل جديد

بواسطة عمرو العربى

مؤسس مطور

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *