ספריית jQuery התחילה עם רעיון פשוט וגאוני: לבנות API טוב יותר ואמין יותר עבור ה DOM. בימים שהם התחילו המצב היה הרבה יותר גרוע ממה שהוא היום והצורך ב API אמין לחיבור בין JavaScript לאלמנטים על המסך היה מאוד בולט.

מאז התאימות בין דפדפנים השתפרה מאוד והחל תהליך מופלא של רעיונות שעוברים מ jQuery לממשק ה DOM הסטנדרטי. נבחן שלושה רעיונות כאלה ונשווה בין גירסת ה jQuery שלהם לגירסא הבנויה בדפדפן.

1. שליטה בקלאסים עם classlist

אחד הדברים שאנשים הכי אוהבים לעשות ב JavaScript הוא להוסיף ולהוריד קלאסים מאלמנטים. כשמשתמש לוחץ על כפתור מוסיפים קלאס לאלמנט התפריט שגורם לתפריט להופיע. או כשמשתמש מתחיל לגרור אלמנט מוסיפים קלאס שמשנה את תמונת הרקע באזור אחר במסך כדי לתת אינדיקציה שאפשר לגרור לשם את הדבר.

ל DOM הרבה זמן לא היה מנגנון טוב לשליטה על הקלאסים. מתכנתים השתמשו בפעולות על מחרוזות כדי לעדכן את המאפיין class של האלמנט. כך בשביל להוריד את הקלאס active מאלמנט יכולת לכתוב קוד שנראה בערך כך:

var oldClass = el.getAttribute('class');
var newClass = oldClass.replace(/\bactive\b/, '');
el.setAttribute('class', newClass);

ארוך, מייגע ומועד לטעויות.

גירסת ה jQuery לסיפור היתה הרבה יותר פשוטה:

$(el).removeClass('active');

היום לכל אלמנט ב DOM יש אוביקט בשם classList שכולל את הפונקציות: add, remove, contains ו toggle. כתיב JavaScript מודרני להסרת קלאס נראה כך:

el.classList.remove('active');

הדוגמא הבאה מקודפן ממחישה את שני המנגנונים: לחיצה על הכפתור השמאלי תשנה את הקלאס באמצעות jQuery ולחיצה על הכפתור הימני תעשה את אותו הדבר דרך ה DOM API הסטנדרטי.

שורת הקוד בגירסת jQuery עדיין יותר קצרה אבל בכל מקרה הקוד של שתי הפעולות די דומה:

$('#p1').toggleClass('alt');
document.querySelector('#p1').classList.toggle('alt');

2. שמירת מידע באלמנטים עם dataset

כתיבת ממשקים מורכבים חייבה אותנו הרבה פעמים לשמור מידע מחוץ לאזור שמשתמשים רואים על המסך, ועדיין להיות מסוגלים לגשת למידע הזה ב Event Handler אחר. ללא משתנים גלובאליים דרך טובה לעשות זאת היא לשמור את המידע "בתוך" האלמנטים עצמם, ו jQuery הציע מנגנון מאוד פשוט לשמירת המידע וגישה חוזרת אליו.

ב jQuery לכל אלמנט יש Data Store שם אפשר לשמור מידע לפי מזהה ואחרי זה לשלוף את המידע חזרה ממקום אחר. המידע נשמר עבור אלמנט מסוים ולכן כל מי שיש לו גישה לאלמנט יכול לקרוא או לעדכן מידע זה. מבחינה פונקציונאלית דומה הדבר להוספת שדות על האלמנטים עצמם, רק שאתם לא צריכים לשבור את הראש כדי למצוא שם פנוי שלא יתנגש עם השדות שכבר מוגדרים מראש לכל DOM Element.

הקוד הבא ב jQuery לוקח אלמנט כפתור ושומר עליו את המספר 7:

$('button.counter').data('count', 7);

אפשר להשתמש בערך זה ב Event Handler של הלחיצה כדי להקפיץ Alert כל כמה לחיצות:

$('button.counter').on('click', (e) => {
    const oldCountValue = $(e.target).data('count');
    const newValue = oldCountValue + 1;
    $(e.target).data('count', newValue);
    if (newValue % 7 === 0) {
        alert('Boom');
    }
});

הערך נשמר "בתוך" הכפתור אבל משתמשים לא רואים אותו.

היום אפשר לקבל התנהגות דומה ב DOM בזכות ממשק שנקרא dataset. לכל אלמנט ב DOM יש אוביקט dataset שמחובר אליו ודרכו אפשר לשמור ולקרוא מידע מהאלמנט. בנוסף כל מאפיין שמתחיל במילה data ומוגדר ב HTML יהיה זמין לכם ב dataset של האלמנט.

לדוגמא עבור הכפתור הבא:

<button data-count="7">Click</button>

עכשיו אפשר באמצעות קוד JavaScript לקרוא את הערך של data-count ולהשתמש בו בתוכנית:

const count = document.querySelector('button').dataset.count;

בקודפן הבא תוכלו לראות דוגמא לתיבה שאפשר לשמור את הערך שלה במקום נסתר ב DOM או באמצעות jQuery Data API:

שווה לציין שבשמירה ל Dataset הערך נכתב ל DOM ואפשר לראות אותו למשל באמצעות Inspect Element של הדפדפן. אנחנו משתמשים ב Dataset הרבה פעמים כדי להעביר מידע בין ה Server לקוד JavaScript בצד לקוח: השרת כותב את ערך מסוים בתור JSON למאפיין data של אחד האלמנטים, וקוד JavaScript קורא מאפיין זה ומפענח את המידע.

3. אנימציות עם Web Animation API

ל jQuery יש ממשק אנימציות ממש פשוט ונוח שמאפשר בלי לכתוב CSS בכלל להוסיף אנימציות לפעולות בקוד. בהנחה שיש לכם אוביקט כזה ב HTML:

<div class='box'></div>

תוכלו להשתמש בשורת ה jQuery הבאה כדי לעשות לקופסא Fade Out:

$('.box').animate({ opacity: 0 });

ממשק חדש ב DOM מאפשר לבצע כמעט את אותו דבר באמצעות הפונקציה Element.animate. פונקציה זו מקבלת מערך של אוביקטים המתארים את מאפייני האלמנט שלכם ומבצעת שינוי של המאפיינים באנימציה. אותה שורת jQuery נראית ב DOM כך:

const box = document.querySelector('.box');
box.style.opacity = 0;
box.animate([{opacity: 1}, { opacity: 0 }], 500);

ההבדל המרכזי הראשון בין המנגנונים הוא שב DOM יש לציין את הערך ההתחלתי (הנוכחי) של השדה בעוד ש jQuery יודע להתחיל את האנימציה אוטומטית מהמצב הנוכחי; וההבדל השני שב DOM בנוסף לאנימציה עלינו לשנות לבד את הערך של השדה כדי שהערך "יישאר" על האלמנט גם אחרי האנימציה.

הקודפן הבא מראה המחשה של האנימציה. שימו לב לפתוח אותו מפיירפוקס או כרום כי זה עדיין לא נתמך בכל הדפדפנים:

לסיכום jQuery היא הספריה שהשפיעה ומשפיעה הכי הרבה על ההתפתחות של ה DOM API בדפדפנים. העובדה שהיא נמצאת בכל מקום והרבה מאוד אנשים מהתעשיה עובדים איתה ומכירים אותה מאפשרת לנסות רעיונות בצורה לא מחייבת, וכשיש רעיונות טובים בהחלט יהיה מי שיכניס אותם גם לתקן.

רוצים לשמוע עוד על jQuery? ביום חמישי הקרוב אעביר וובינר של שעה בו אציג את הספריה מהבסיס שלה ועד שימושים מורכבים - כולל כתיבת פלאגינים. אם אתם עדיין לא מרגישים בנוח עם jQuery ולא ידעתם את מי לשאול לגביה יום חמישי זאת ההזדמנות שלכם. פרטים והרשמה בחינם בקישור:

https://www.tocode.co.il/workshops/55