TayebDev

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

“jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.”

המשפט האחרון הוא באמת נכון, זה משנה את הדרך שבה עובדים עם JS, אני פשוט אישית לא מתחבר לזה – היא דרך ארוכה יותר בהשוואה ל-Frameworkים אחרים. מההיכרות שלכם איתי אתם יודעים שאני משתמש בעיקר ב-MooTools בשביל לכתוב את קוד ה-JS שלי.

הדבר שאני הכי לא מתחבר אליו בספרייה, זה שבשביל להשתמש ביכולות שלה בהקשר של DOM Traversing זה שכל פעם צריך לקרוא לפונקציה jQuery (או ל-alias בצורת $).
הפונקציה בעצם עוטפת את כל האלמנטים שנמצאים לפי ביטוי הסלקציה או את האובייקט שמועבר בתור פרמטר לפונקציה, בתוך מערך. וכל הפונקציונליות של הפריימוורק בנוי על איטרציה על המערך הזה, כל פעולה תתבצע על כל איברי המערך.

זה דבר חכם מאוד לעשות, אבל מה קורה כאשר עושים פעולות על אלמנט בודד? באמת צריך להפעיל לולאה בשביל אלמנט בודד אחד?

בנוסף, עבודה עם אירועים, יש שתי דרכים לעשות להשתמש בפונקציית bind או להשתמש בפונקציה שמתארת את האירוע (אך ורק אם זה אירוע ברירת מחדל כמו mouseover).
ולכל אחת הפונקציות מעבירים פונקציה שתשמש בתור event listener והיא מקבלת בתור הפרמטר את אובייקט האירוע המתוקן שלהם (תיקונים עבור IE כמובן) וה-this שלה הוא בעצם האלמנט עצמו שעליו עובדים.
ה-context של this הוא הבעיה שמטרידה אותי פה, כי בעצם מה שעושים באירועים הוא בד”כ עבודה נוספת על ה-DOM, שינוי של תכונות, חיפוש, הוספה וגם עבודה על אובייקטים אחרים שלא קשורים ב-DOM (כמו Ajax, ומופעי מחלקות פרטיים). אבל למה לספק לנו את האלמנט המקורי ולא את הגרסה העטופה שלו? ברור שנצטרך לעטוף אותו שוב, ואז מדובר בעוד קריאה לפונקציה, ליצור עוד אובייקט.

זה גורם לי גם להיות סקפטי לגבי מבחני המהירות בין הספריות השונות, jQuery היא במקום השני בד”כ אחרי dojo toolkit בחיפוש ב-DOM והיא יותר מהירה מ-MooTools, אבל האם המהירות הזאת לא נופלת ממעמדה כאשר כל פעם צריך לקרוא לפונקציה $ בשביל לעטוף את האלמנט או לבצע לולאה בשביל להגיע לאלמנט בודד? בעוד ש-MooTools למשל בגלל הדרך שהיא עובדת מאפשרת להמשיך לעבוד עם האלמנט המשופר גם בתוך האירוע.

יצירה של אלמנטים היא נושא קליל ב-jquery, מעבירים את ה-markup שאנחנו רוצים לתוך הפונקציה jQuery או $, והיא בעצם הופכת אותו למבנה DOMי שעטוף בתוך אובייקט jQuery.
אין לי התנגדות לזה, אבל אנחנו עובדים עם JS וה-DOM, אז שתהיה אפשרות לפחות להגדיר אלמנטים בצורה OOPית.

דבר אחרון שקצת מפריע לי זה שאין שיפור בנוחות בעבודה עם OOP כמו שיש ב-MooTools או ב-Prototype. בשביל ליצור מחלקות חייבים לעבוד בצורה הרגילה והמסורתית, יצירה של פונקציה להרחיב אותה עם this , ירושה לבצע בדרך המכאיבה של העתקת prototype, קריאה למתודה במחלקת האב בעזרת call/apply לפונקציה מה-prototype של האב וכו’. פחות נעים, אבל אפשר להסתדר עם זה.

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

יכול להיות שהרשמים הראשוניים שלי הם שגויים כי איני מכיר את הספרייה לעומק ולא עבדתי איתה כמו שעבדתי עם MooTools, החל מספטמבר יהיו לי חודשיים (עד הגיוס הקרב והבא) אינטנסיביים של שימוש ב-jQuery ודעתי עוד תשתנה סביר להניח (אחרת הפופולריות שלה לא מובנת).