מה זה 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 קובץ והוסף את קוד ה-boilerplate הבא:

html>
<htmllang="he">
<רֹאשׁ>
<מטאערכת תווים="UTF-8">
<מטאhttp-equiv="תואם X-UA"תוֹכֶן="IE=edge">
<מטאשֵׁם="נקודת מבט"תוֹכֶן="width=device-width, initial-scale=1.0">
<כותרת>Alpine.jsכותרת>
רֹאשׁ>
<גוּף>
<תַסרִיטלִדחוֹתsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">תַסרִיט>
גוּף>
html>

ה לִדחוֹת תכונה ב- תַסרִיט תג אומר לדפדפן להפעיל את הסקריפט רק לאחר שהוא סיים לנתח את המסמך.

Alpine.js מספק מספר הנחיות כמו x-נתונים שבו הוא משתמש לאחסון נתונים ו x-text שהוא משתמש בו כדי להגדיר innerText של הרכיב המצורף. כדי להשתמש בהנחיות אלו, הוסף את הקוד הבא ל-HTML שלך.

<divx-נתונים="{name:'David Uzondu', organization:'Make Use Of'}">
 שמי <חָזָקx-text="שֵׁם">חָזָק>
 ו <אניx-text="אִרגוּן">אני> אדיר
div>

ההנחיה x-data מאחסנת אובייקט עם המפתחות שֵׁם ו אִרגוּן. לאחר מכן תוכל להעביר את המפתחות הללו להנחיית x-text. כאשר אתה מפעיל את הקוד, Alpine.js יאכלס את הערכים:

איך Alpine.js משתווה ל-React

Alpine.js היא מסגרת קלת משקל אשר הופכת אותה מתאימה לפיתוח פרויקטים ואבות טיפוס קטנים.

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

יְבוּא {useEffect} מ"לְהָגִיב";
פוּנקצִיָהMyComponent() {
 useEffect(() => {
/* פונקציית התקשרות חוזרת נכנסת לכאן */
 }, [ /* מערך התלות הוא אופציונלי */ ]);
}

כדי לטפל בתופעות לוואי ב-Alpine.js, אתה יכול להשתמש ב- אפקט x הוֹרָאָה. לדוגמה, נניח שאתה רוצה לצפות במשתנה ולהתחבר לערך בכל פעם שהוא משתנה:

<divx-נתונים="{מספר 1}"אפקט x="console.log (מספר)">
<h1x-text="מספר">h1>
<לַחְצָן @נְקִישָׁה="מספר = מספר + 1">הוסף מספר חדשלַחְצָן>
div>

הדבר הראשון שאתה עשוי לשים לב הוא שאתה לא צריך לציין תלות. Alpine פשוט יקשיב לשינויים בכל המשתנים שהועברו אליהם אפקט x. ה @נְקִישָׁה ההנחיה מגדילה את משתנה המספר ב-1.

עיבוד מותנה ב-Alpine.js

עיבוד אלמנטים באופן מותנה זה משהו שאתה יכול לעשות במסגרות כמו React. Alpine.js מאפשר לך גם לבצע רינדור מותנה של אלמנטים. זה מספק x-אם הנחיה ומיוחדת תבנית רכיב שאתה יכול להשתמש בו כדי לעבד רכיבים באופן מותנה.

צור אחר index.htm קובץ והוסף את אותו קוד ה-boilerplate כמו קודם. הוסף את הקוד הבא לגוף ה-HTML.

<divx-נתונים="{shown: true}">
<לַחְצָן @נְקִישָׁה="מוצג=!מוצג"x-text="מוצג? 'הסתר אלמנט': 'הצג אלמנט'">לְמַתֵגלַחְצָן>
<תבניתx-אם="מוצג">
<div>השועל החום המהיר קפץ מעל הכלב.div>
תבנית>
div>

ה x-אם ההנחיה מועברת ל תבנית אֵלֵמֶנט. זה חשוב מכיוון שהוא מאפשר ל-Alpine.js לעקוב אחר רכיב שמתווסף או מוסר מהדף. ה תבנית אלמנט צריך להכיל אלמנט אחד ברמת השורש; הקוד הבא יפר את הכלל הזה:

<תבניתx-אם="מוצג">
<div>אלמנט זה יעובד בסדר גמור.div>
<div>Alpine.js יתעלם מאלמנט זהdiv>
תבנית>

בניית אפליקציית מטלות עם Alpine.js

הגיע הזמן לשלב את כל מה שלמדת עד כה ולבנות אפליקציה פשוטה לביצוע עם תמיכה באחסון מקומי. ראשית, צור תיקיה ואכלס אותה ב- index.htm קובץ וא style.css קוֹבֶץ. הוסף את קוד ה-boilerplate לקובץ index.htm וכלול הפניה ל- style.css קוֹבֶץ:

<קישורrel="גיליון סגנונות"href="style.css">

אל תדאג לגבי ה-CSS כאן, פשוט העתק את style.css קובץ מזה מאגר GitHub של הפרויקט.

כדי להתמיד בנתונים לאחר טעינת העמוד מחדש, אתה צריך את ה-Alpine.js להתמיד חיבור. הוסף את ה-CDN build של תוסף זה בתור א תַסרִיט תג, ממש מעל מבנה הליבה של Alpine.js CDN:

<תַסרִיטלִדחוֹתsrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">תַסרִיט>

בתוך ה גוּף להגדיר א div אלמנט עם an x-נתונים הוֹרָאָה. הנחיה זו צריכה להכיל מערך שנקרא כל המשימות. לאחר מכן, הוסף an h1 רכיב עם הטקסט "יישום מטלות".

<divx-נתונים="{allTasks:$persist([])}">
<h1>אפליקציית מטלותh1>
div>

ה $להתמיד תוסף הוא עטיפה עבור JavaScript localStorage ממשק API. זה אומר לדפדפן לאחסן את המערך באחסון מקומי, כך שהנתונים יישארו שלמים גם לאחר טעינת העמוד מחדש. הוסף טופס עם שלח הנחיה שגם מונעת את פעולת הגשת ברירת המחדל.

<טופס @submit.prevent="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim())))
? allTasks = [{משימה: $refs.task.value.trim(), מזהה: Date.now(), בוצע: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('ערך קלט לא יכול להיות ריק')
: alert('המשימה כבר נוספה.');
 $refs.task.value=''
">
טופס>

ה $refs סעיף מאפשר גישה לרכיב ה-DOM עם ה"משימה" x-ref הוֹרָאָה. הקוד גם מטפל באימות מסוים ומבטיח שהוא לא מוסיף מחרוזות ריקות או משימות כפולות לרשימה. לפני סיום הטופס, הוסף קֶלֶט אלמנט עם an x-ref של "משימה" ומציין מקום. לאחר מכן הוסף כפתור והגדר את סוגו ל"שלח".

<קֶלֶטסוּג="טֶקסט"x-ref="מְשִׁימָה">
<לַחְצָןסוּג="שלח">הוסף משימהלַחְצָן>

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

<divמעמד="פריטים">
<divx-נתונים="{uncompleted:$persist([])}"אפקט x="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

<divx-נתונים="{completed:$persist([])}"אפקט x="completed=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

ב-div הראשון, הוסף an h3 תג עם הטקסט "לא הושלם". לאחר מכן עבור כל אלמנט ב- לא מושלם מערך, render a div שמחזיק את ה"בקרות" ואת המשימה עצמה.

הפקדים מאפשרים למשתמש למחוק פריט או לסמן אותו כמושלם:

<h3>לא מושלםh3>
<תבניתx-עבור="אלמנט בלא הושלם":מַפְתֵחַ="element.id">
<divx-נתונים="{showControls: false}" @העברה בעכבר="showControls = true" @יציאה בעכבר="showControls = false"
 class="task"
 >
<divמעמד="בקרות">
<divx-show="showControls" @נְקִישָׁה="element.done=true">[M]div>
<divx-show="showControls" @נְקִישָׁה="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-text="element.task" >div>
div>
תבנית>

אתה יכול להשתמש ב x-עבור הנחיה לחזור דרך מערך ולעבד אלמנטים. זה דומה ל v-for ב-Vue וב- Array.map() שיטת מערך ב-React. div "פקדים" מכיל שני divs עם המחרוזת "[M]" ו-"[R]". מחרוזות אלו מייצגות "סמן כבוצע" ו"הסר". אתה יכול להחליף אותם בסמלים מתאימים אם תרצה.

ה x-show ההנחיה קובעת אלמנט לְהַצִיג נכס CSS ל אף אחד אם הערך המצביע על ההנחיה שקרי. ה-div השני ב-div "פריטים" דומה ל-div הראשון עם כמה חריגים בולטים: ה h3 הטקסט מוגדר ל-"Completed", לילד הראשון של div ה-"control" יש את הטקסט "[U]" במקום "[M]" וב-div של זה @נְקִישָׁה הוֹרָאָה, element.done נקבע ל שֶׁקֶר.

<divx-show="showControls" @נְקִישָׁה="element.done=false">[U]div>

וזהו, עברת על היסודות של Alpine.js והשתמשת במה שלמדת כדי ליצור יישום בסיסי לביצוע.

הפיכת קוד Alpine.js לקל יותר לכתיבה

כשאתה מתחיל לכתוב קוד Alpine.js, זה יכול להיות קשה לעטוף את הראש שלך. למרבה המזל, עורכי קוד כמו Visual Studio Code מספקים מגוון רחב של הרחבות המקלים על הפיתוח.

ב-Extensions Marketplace, אתה יכול לקבל את ההרחבה Alpine.js IntelliSense שמקלה על העבודה עם הנחיות. זה יכול לעזור לשפר את הפרודוקטיביות שלך בעת שימוש ב-Alpine.js בפרויקטים שלך.