Home-theater-designers
عالم تطوير الويب فوضوي - تظهر الأطر وتخرج من الوجود والأشياء يمكن أن تكون مربكة للمطورين الجدد وذوي الخبرة على حد سواء.
على عكس معظم أطر تطوير الويب ، يهدف Alpine.js إلى أن يكون بسيطًا قدر الإمكان ، ولكنه قوي بما يكفي للتعامل مع مفاهيم مثل التفاعل والآثار الجانبية.
اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى
الشروع في العمل مع Alpine.js
تثبيت Alpine.js بسيط للغاية. ما عليك سوى تضمين ما يلي النصي علامة في HTML الخاص بك:
الذي قام بحظري على الفيسبوك
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
بدلاً من ذلك ، يمكنك تثبيت Alpine.js في مشروعك باستخدام Node Package Manager:
npm install alpinejs
التفاعلية في Alpine.js
يخترع index.htm ملف وإضافة الكود المعياري التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
ال تأجيل السمة في النصي تخبر العلامة المتصفح بتشغيل البرنامج النصي فقط بعد انتهائه من تحليل المستند.
يوفر Alpine.js العديد من التوجيهات مثل بيانات x التي تستخدمها لتخزين البيانات و x- نص التي يستخدمها لضبط النص الداخلي من المكون المرفق. لاستخدام هذه التوجيهات ، أضف الشفرة التالية إلى HTML الخاص بك.
ماذا يعني التعليق المرتبط في youtube
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
يخزن توجيه x-data كائنًا بالمفاتيح اسم و منظمة . يمكنك بعد ذلك تمرير هذه المفاتيح في توجيه x-text. عند تشغيل الكود ، سيقوم Alpine.js بتعبئة القيم:
كيف يقارن Alpine.js مع React
Alpine.js هو إطار عمل خفيف الوزن يجعله مناسبًا لتطوير المشاريع الصغيرة والنماذج الأولية.
في أطر أكبر مثل React ، تستخدم السنانير مثل useEffect () للتعامل مع الآثار الجانبية في دورة حياة المكون. يقوم هذا الخطاف بتشغيل وظيفة رد نداء كلما تغير أحد عناصر مصفوفة التبعية:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
للتعامل مع الآثار الجانبية في Alpine.js ، يمكنك استخدام ملحق x- تأثير التوجيه. على سبيل المثال ، لنفترض أنك تريد مشاهدة متغير وتسجيل القيمة متى تغيرت:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
أول شيء قد تلاحظه هو أنك لست بحاجة إلى تحديد تبعية. سيستمع Alpine ببساطة إلى التغييرات في جميع المتغيرات التي تم تمريرها إلى x- تأثير . ال @انقر يقوم التوجيه بزيادة متغير الرقم بمقدار 1.
العرض الشرطي في Alpine.js
تقديم العناصر بشروط هو شيء يمكنك القيام به في أطر مثل React. يتيح لك Alpine.js أيضًا عرض العناصر بشكل مشروط. يوفر x- إذا التوجيه والخاصة نموذج العنصر الذي يمكنك استخدامه لتقديم العناصر بشكل شرطي.
إنشاء آخر index.htm ملف وإضافة نفس الكود المعياري كما كان من قبل. أضف التعليمات البرمجية التالية إلى نص HTML.
LinkedIn انظر من شاهد ملفك الشخصي
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
ال x- إذا يتم تمرير التوجيه إلى نموذج عنصر. هذا مهم لأنه يسمح لـ Alpine.js بتتبع عنصر تتم إضافته أو إزالته من الصفحة. ال نموذج يجب أن يحتوي العنصر على عنصر واحد على مستوى الجذر ؛ الكود التالي ينتهك هذه القاعدة:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
إنشاء تطبيق مهام باستخدام Alpine.js
حان الوقت لدمج كل ما تعلمته حتى الآن وإنشاء تطبيق مهام بسيط مع دعم التخزين المحلي. أولاً ، أنشئ مجلدًا واملأه بملحق index.htm ملف و style.css ملف. أضف التعليمات البرمجية المعيارية إلى ملف index.htm وقم بتضمين مرجع إلى ملف style.css ملف:
<link rel="stylesheet" href="style.css">