מבוא מואץ ל-jQuery עבור מפתחי #C ו-Java מנוסים

מה יש בה ב-jQuery שהיא כל כך מצליחה, ומפתחים רבים כל כך תלויים בה?

מקור: יח”צ

jQuery היא כל כך נפוצה בקרב מפתחי ווב, שניתן להתייחס אליה כחלק משפת JavaScript לדפדפן. קחו את jQuery מהעולם – ותמצאו מליון נשמות אבודות, שלא יודעות כיצד להמשיך ולכתוב אפליקציות ווב.

הבהרה: jQuery היא ספרייה ל-JavaScript – לא הרחבה לשפה. היא פשוט מסייעת במידה כ”כ רבה עד שהפכה אצל מפתחים רבים לחלק בלתי נפרד מכתיבת קוד ב-JavaScript. כאשר דפדפן אינו מעורב (לדוגמה node.js) – אין לה שום משמעות.

מה יש בה ב-jQuery שהיא כ”כ מצליחה, ורבים כ”כ תלויים בה? בפוסט זה אנסה לענות על השאלה.

אז מה יש בשפה הזאת?

לא מזמן שאלה אותי מישהי כיצד אני בוחר את רמת העומק / הפרטים של הפוסטים. מדוע הם יחסית high level ולא בפרטים? לא ידעתי בעצמי מה לענות. “כי זו הרמה הקריטית יותר להצלחת הפיתוח” – עניתי, אבל לא שכנעתי את עצמי. “אולי בגלל שאני ארכיטקט וזו רמת הפרטים שאני רגיל לה?” – ניסיתי שוב. לא ממש ידעתי. ישנתי על זה לילה. אני חושב ששתי הסיבות הן:

  • להגיע לקהל יעד רחב
  • לכסות נישות שלא מכוסות היטב – כלומר Value Proposition ייחודי.

על jQuery יש כמויות אדירות של חומרים. רוצים לדעת מה ההבדל בין live ל-bind? עשרות מקורות טובים ישמחו להסביר. עם מעט חיפוש, גוגל יפנה אתכם לתשובה בודדת ב-StackOverflow שעונה בדיוק, אבל בדיוק, על המקרה שאתם מתמודדים איתו. אבל יש משהו שנראה לי ייחודי ושקשה למצוא – מבט גבוה קצת מהפרטים, מפוכח ובעברית – על מה שקורה שם.

לפני כתיבת פוסט זה חיפשתי בגוגל “jQuery Crash Course” או “jQuery introduction”. יש הרבה תוצאות – אבל הן מספקות hands-on בכדי להתחיל להשתמש ב-jQuery. הן לא מספקות הקדמה נאותה שתכין אתכם ללמידת jQuery או בכלל תעזור לכם להבין אם זה מה שאתם מחפשים. כשאני התחלתי ללמוד jQuery (לא כ”כ מזמן) – רציתי למצוא מישהו שיספר לי “מה העוקץ ב-jQuery” – אך לא מצאתי. אז הנה התשובה לפניכם.

עלייתה של jQuery

תחילתה של jQuery היא בימי הביניים (של הדפדפנים – כמובן). ימים אפלים שהאנושות מנסה לשכוח. בעוד ש-JavaScript הייתה סטנדרטית (נניח…), ה-APIs של הדפדפן לייצוג דף ה-HTML, מה שנקרא (Document Object Model (DOM, היה שונה למדי בין דפדפן לדפדפן. אמנם היו פונקציות עם שמות זהים (כמו getElementsByTagName) – אבל ההתנהגויות היו שונות. לעתים הן החזירו מבנים שונים, לפעמים הן קראו לאירועים (events) בסדר שונה. ובד”כ הן עשו את זה לאט ובצורה לא יעילה, תחת ההנחה ששינויים דינמיים ב-DOM הם מעטים למדי. בקיצור: כל מה שלא הייתם רוצים מ-API.

הכתיבה של קוד ווב Cross-Browser הייתה סיוט, ואכן רק אנשים מעטים הסכימו לעסוק במלאכה הבזויה[א]. ספריה שתספק API אחיד, אמין ומהיר עתידה להפוך לדבר שהמפתחים יהיו תלויים בו ולא יוכלו עוד בלעדיו. כעשור מאוחר יותר, הדפדפנים מהירים יותר ואחידים יותר במבנה ה-DOM APIs שלהם.

“מדוע מפתחים עדיין ‘תלויים’ ב-jQuery?” – אפשר לשאול. ובכן, לשימוש ב jQuery יש הרבה תיעוד ודוגמאות – הרבה יותר מאשר שימוש ישיר ב-DOM. בנוסף, בעוד שה-API של ה-DOM התפתח בקצב איטי ונשאר דומה למדי לתכנון בין 13+ שנים, jQuery יכלה להרשות לעצמה שינויים יותר דרמטיים שמשקפים יותר טוב את צורכי התקופה.

אז מה jQuery מספקת?

אמירה מקובלת היא ש “jQuery היא רק ספריה ל-Selection” – אבל זה לא מדויק. jQuery מכסה מספר נושאים:

  • ביצוע שינויים ב-DOM – קריאה וכתיבה.
  • מודל פשוט ואחיד יותר של אירועים (DOM events).
  • שיפורי ביצועים עבור טיפול בהרבה אירועים.
  • אנימציות – שיכולות להיות מופעלות על כל אלמנט ב-DOM כמו Image, או Div שמאגד אלמנטים רבים.
  • הפשטה של XMLHttpRequest – מה שקרוי Ajax.

מקור: flickr, cc-by Robert Banh

כפי שניתן לראות, jQuery היא דיי רוחבית. חוץ מהאנימציות שהן קצת “אקסטרה” – ספריה זו מספקת עטיפה ל-DOM שמאפשרת לנו לעבוד איתה ברמת הפשטה קצת יותר גבוהה.

אלטרנטיבות

Prototype ו-MooTools הן ספריות בעלות יכולות מקבילות, פחות או יותר. jQuery נצחה אותן בזכות קהילה, תיעוד טוב יותר או אולי אמינות גבוהה יותר. Dojo, YUI או ExtJS/Sencha הן ספריות שמספקות רמת הפשטה גבוהה בהרבה ובעצם מנתקות אתכם מה-DOM. הן נותנות למפתח לעבוד ברמה קרובה הרבה יותר ל-Windows Forms או AWT ובעצם מייצרות מודל חדש אלטרנטיבי ל-DOM שהמפתח עובד מולו.

יש המון כוח ויופי בכך ש-jQuery לא מתארת מודל חדש, אלא רק מודל משופר של ה-DOM. המפתח נותר עם קשר והבנה טובה בהרבה למה שקורה בפועל בתוך הדפדפן ו-jQuery יכולה להתחבר בקלות להמון ספריות שנכתבו בחשיבה על ה-DOM. מי שרוצה ליצור ספרייה מעל YUI צריך לעבוד ע”פ המודל של YUI שעשוי בהחלט לא להתאים ל-Dojo או ל-ExtJS.

טעימה מיכולותיה של jQuery

לא אנסה להרשים אתכם בתצוגות-תכלית מגניבות. ה-Adoption של jQuery הוא כבר מעבר לזה. אנסה לתת, בקצרה, טעימה מהיכולות העיקריות והסגנון של jQuery.

DOM Manipulation

בדומה ל-SQL בה יש משפטי SELECT…FROM…WHERE עם פורמט ידוע, גם ב-jQuery יש דרך פעולה שחוזרת על עצמה. משפטי jQuery הם בעלי המבנה הבא:

$(‘selection’).<execute>();

 

בחר שורה של אלמנטים – ובצע עליהם משהו: שינוי של HTML, CSS, רישום לאירועים ועוד. חלק גדול מהיופי של jQuery היא הדרך בה היא משתלבת בטבעיות בנוף של HTML, JavaScript ו CSS. שפת CSS עושה פעולה דומה: בוחרת אלמנטים ב-DOM (כלומר ב-HTML) ומכילה עליהם עיצוב. jQuery משתמשת בתחביר של javaScript לתאר את אותה התבנית. הנה דוגמה:
$(‘.banner’).css(‘background-color’, ‘red’);
שהיא המקבילה לכתיבת ה-CSS הבא:
.banner {
  background-color : red;
}

מפתח שחדש ל-jQuery אך בקיא ב-CSS יוכל ללא קושי להגדיר שאילתות דיי מורכבות. jQuery לא אמורה להיות תחליף ל-CSS – לצורך זה היא תהיה משמעותית פחות יעילה, אבל היא מאפשרת באותה דרך חשיבה לבצע שינויים מרחיקי לכת בעזרת שורות בודדות של קוד.

התחביר של jQuery, בדומה ל-javaScript, תומך בשרשור (chaining). פעולת ה-Select מחזירה רשימה (באורך 0, 1 או יותר) של אלמנטים ב-DOM. כל אחת מפעולות ה-execute מחזירה את אותה הרשימה של אובייקטים עליה נקראה, כך שיהיה ניתן לשרשר עליה עוד ועוד פעולות:

$(‘div > p’).show().css(‘color’, ‘blue’).removeClass(‘selection’);

קריאה זו תבחר את אלמנטי ה-p (פסקה ב-HTML) שנמצאים ישירות בתוך div, תציג אותם, תחיל על הטקסט צבע כחול ותסיר class בשם selection – אם קיים. אם ננסה לתאר בצורה יותר כללית את תבנית כתיבת הביטויים ב-jQuery – אפשר לתאר אותם כך:

$(‘selection’).<execute>().<execute>().<filter>().execute();

פעולת הפילטר היא פעולה שמצמצמת את רשימת האובייקטים. “צמצום” יכול להיות גם פעולת בחירה במקרה זה, כאשר find בוחרת את אלמנטי ה-strong הבנים לאלמנטי ה-div שבחרנו:

$(‘div’).css(‘border’, ‘1px solid blue’).fadeTo(‘slow’, 0.5).find(‘strong’).css(‘color’, ‘red’);

הנה דוגמת ההרצה של קוד זה. אין מניעה שיהיו יותר אלמנטים של strong מאלמנטים div-אבות כמובן, כך שהשם “צמצום” (filter) הוא שם בהחלט לא מדויק. וריאציה אחרת של צמצום נקראת “טיול” או traversal. בעזרת פקודות כגון ()parent או ()siblings אפשר “לטייל” על ה-DOM מהנקודה בה אתם נמצאים.

יש מספר רב של פעולות execute, traversal ו-filter אפשריות – אני בטוח שגוגל יוכל לעזור לכם למצוא מידע רב על כולן.

טיפול באירועים (events)

jQuery מספקת רמת הפשטה נוחה יותר לאירועים ב-DOM. לדוגמה, עבור hover סביר שמפתח יבחר להירשם לאירועים של ה-DOM בשם mouseOver ו-mouseOut, אבל היכרות אינטימית תלמד שברוב הדפדפנים שימוש ב-mouseEnter ו-mouseLeave הוא עדיף. jQuery חוסכת לכם ללמוד פרטים כאלו ומספקת אירוע hover (שדורש 2 פונקציות: כניסה ויציאה) שידע לעשות את הדבר הנכון עבור כל דפדפן.

עוד צרה קשה היא רישום מופעים רבים של אירוע. נאמר שיש לכם גלריה עם 100 תמונות על המסך, שבפעולת Hover אתם רוצים להדגיש את התמונה (אחת מ-100) שכרגע העכבר מצביע עליה. הדרך הנאיבית היא לרשום את אירוע ה-hover והטיפול בו 100 פעם, פעם עבור כל תמונה בגלריה. מחיר הביצועים עלול להיות הרסני.

עדיף בהרבה לרשום את אירוע ה-hover פעם אחת על כל הגלריה, לאתר את התמונה הרלוונטית לאירוע ואז להפעיל את קוד הטיפול באירוע בעזרת ההקשר הנכון. שיפור הביצועים הוא משמעותי מאוד, אבל לדפדפנים שונים יש חוקים שונים כיצד לעשות זאת. jQuery מספקת הפשטה טובה לסיבוכיות זו ונותנת לכם לרשום אירועים על “קבוצה של אלמנטים” בקלות רבה.

מקור: אתר Alexa

כיצד jQuery עובדת? (בקצרה)

jQuery היא ספריית JavaScript לכל דבר. מוסיפים אותה ל-HTML Header ואז ניתן להשתמש בה. jQuery רושמת אובייקט גלובלי בשם $ (שם חוקי ב-javaScript) שהוא משמש כמפתח לפעולות שונות של הספריה. כאשר מבצעים Selection (כלומר “בחירה”) – לא מקבלים רשימה של האובייקטים האמיתיים ב-DOM, כי אם wrappers של jQuery שמספקים API בטוח, cross-browser, ופשוט יותר.

ל-jQuery יש אלגוריתם יעיל לביצוע selection ב-DOM. הוא נקרא Sizzle וניתן למצוא אותו כספריית javaScript עצמאית. ספרייה זו באמת “רק עושה selection”. הנה כמה כללים איך להשתמש ב jQuery בצורה יעילה. יש שמועות על כך ש-jQuery מבצעת caching לאלמנטים ב-DOM. שמעתי אותן לא פעם. לא נתקלתי מעולם בזכר להתנהגות שנראתה כמו caching עבור פעולות DOM. בעיקרון, גישה ישירה ל-DOM אמורה להיות תמיד מהירה יותר משימוש ב-jQuery.

Plug-ins

ניתן לכתוב plugins ל-jQuery. בפועל plugin הוא פונקציה שנרשמת על ה-namespace של jQuery (כלומר, סימן ה $) ויכולה להשתלב בתבנית ה-Select-execute. לדוגמה, אני יכול לכתוב פונקציה שהופכת אלמנטים להציג מימין לשמאל, ע”י שינוי כל פרטמר אפשרי לתמוך בהתנהגות זו. במקום לקבל רשימה של wrappers ולעבור עליהם בלולאה, יהיה הרבה יותר אלגנטי להשתמש בפונקציה שלי בצורה הבאה:

$(‘.text .localizable’).toRTL();

יש כמה כללים (המנעות מהתנגשויות על הסימן $, אתחול, …) שכדאי להקפיד עליהם בעת כתיבת jQuery Plugin – יש מדריכים רבים באינטרנט שישמחו לספר ולהדגים זאת. סה”כ ראיתי כמה jQuery Plugins שלא הייתה להם הצדקה אמיתית להיכתב כ-Plugin. אני מנחש שאם jQuery הייתה קוראת ל-Plugins בשם פחות מרשים (כמו jQuery Embedded Function) – היו נכתבים הרבה פחות Plugins של jQuery.

[א] הפוסט מופנה למפתחי Server בשפות מודרניות, שם ה-APIs המקובלים טובים בהרבה.

פוסט זה פורסם במקור ב-Software Archiblog.

ליאור בר-און

ליאור בר-און הוא Chief Architect בחברת סטארטאפ ישראלית גדולה.

הגב

7 Comments on "מבוא מואץ ל-jQuery עבור מפתחי #C ו-Java מנוסים"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
אלעד
Guest

בימים אלה אני עובד על Framework בJavascript שנועד לקרב את קהל מפתחי ה Java בעיקר לשפת Javascript. מזמין את כולכם להכנס: http://stackjs.org

מולי באהר
Guest

חשוב להדגיש את החשיבות הגוברת של ג׳אווהסקריפט לשיפור חווית המשתמש בצד הלקוח.
JQuery קלה, יעילה ואינטואיטיבית ומכאן הפופולאריות הגוברת שלה
כולל תמיכה של ענקיות כמו גוגל / מפתחי גוגל,
ועם התחייבות לרוץ בצורה אחידה מעל *כל* הדפדפנים.

ההקבלה לשליפת נתונים א-לה sql מקורית ולא מדוייקת.
המבנה שאוב מלוגיקת ה-CSS והגישה של שפות תכנות פונקציונליות.

Almog Baku
Guest
אחלה פוסט! ולמרות שאני מכיר כמעט את כל רזיה של jQuery מה שמדהים בה זה שתמיד יש מה ללמוד על הספרייה הנהדרת הזו. אומנם לא הבנתי מה הקשר לC# וJAVA.. אבל ניחא. אני חייב לציין שהלינק שצירפת לגבי היעילות בכתיבת סלקטורים ושאר הירקות עם jQ מאוד מאוד מעניין! הוא חידש לי שם כמה וכמה דברים! למרות שיש דברים שם שאני חושב שמיותרים- כמו כתיבת event לרכיב מעל- זה סתם יוצר קוד מסורבל ומכוער. ובמקרה הזה אנחנו לא בונים מנוע אטומי. מה שמאוד יפה היום הוא שבזכות הקידמה, המון דברים שבעבר היינו מפתחים בעזרת js כמו hovers effects וכד' אפשר לעשות… Read more »
stv
Guest

תודה רבה על הפוסט. למרות שיש לי היכרות עם jQuery עדיין למדתי משהו חדש.

מרצה jQuery
Guest

סיכום תמציתי ובהיר.
הייתי מוסיף על כך, שjQuery גם מספקת כמה פונקציות utility כלליות (כגון $.trim או $.each)
וגם, את העובדה, ש-jQuery, בגלל שהיא מספקת adapter גנרי לפונקציות שהן browser specific, הרי שהיא דואגת למקסם את הביצועים של הדפדפן – לעיתים הדפדפן יודע לבצע פעולה מסויימת natively (מה שאומר הרצה יעילה של קטע הקוד המדובר בשפת מכונה), ולעיתים לא – jQuery תבצע את הפעולה בקוד javascript (מישהו אמר IE8?)

ליאור בר-און
Guest

מקבל, – תודה!

דני
Guest

כדאי גם להזכיר את http://zeptojs.com/
ספרייה לדפדפנים חדשים, יעילה, מהירה ורזה בהרבה מ jquery המספקת תמיכה לדפדפנים ישנים.

wpDiscuz

תגיות לכתבה: