למרות שעושה רושם בזמן האחרון ש-Angular תופסת את כל תשומת הלב בפיתוח פרונט אנד, יש עדיין לא מעט עבודה לבצע באמצעות jQuery. כאשר אני כותב סקריפט שמשתמש ב-jQuery, הרבה פעמים אני מעדיף לכתוב את הסקריפט הזה כתוסף (Plugin) ולא סתם כערימה של קוד שיושבת שם. כך אני מרוויח שני דברים: אפשרות להעביר את הקוד מפרויקט לפרויקט ותחזוקה יותר קלה.
בזמן האחרון, כאשר אני יוצר תוספים, אני משתמש יותר ויותר בתבנית עיצוב (Design Pattern) ששמה הוא jQuery Boilerplate. התבניות שמציעים שם ממש נוחות בכל מה שקשור לכתיבת הקוד באופן מונחה עצמים נוח נעים. אך גיליתי בזמן האחרון שדווקא יש מעט אנשים שמשתמשים בו – אז זו הזדמנות טובה לחלוק את הבשורה הלא ממש חדשה הזו.
ראשית – דף הפרויקט. יש שם לא מעט תבניות עיצוב ומקורות עזרה נוספים. מי שרוצה לקרוא ולהתעמק מוזמן כמובן. אני בדרך כלל משתמש בתבנית העיצוב הבסיסית ביותר שזמינה כאן.
בגדול, מדובר בתבנית עיצוב פשוטה לחלוטין והתיעוד שלה די מסביר בגדול מה הולך שם. אבל אני אעבור כאן על כמה דברים בסיסיים שיש בתבנית.
החלק החשוב ביותר הוא הגדרת שם התוסף – שהוא הפונקציה שלה אנו קוראים כאשר אנו רוצים להפעיל אותו (למתקדמים – זה פשוט שם תכונת ה-prototype של jQuery). וכמובן הפרמטרים שאפשר להעביר לתוסף. אני מאמין גדול בפרמטרים כאלו ונוטה להשתמש בהם כל הזמן.
var pluginName = "defaultPluginName",
defaults = {
propertyName: "value"
};
בגדול זה העיקר – עכשיו צריך לעבור למתודות – המתודה הראשית היא init שהיא זו שרצה מיד לאחר הקריאה לתוסף. פה אפשר גם לקרוא למתודות נוספות כמובן. בדרך כלל, מה שאני עושה במתודה הזו (ובכל מתודה אחרת) היא הגדרה של this – כיוון שכידוע הוא משתנה לפי הקונטקסט ב-JavaScript" לפיכך אני נוהג לפתוח כל מתודה בהגדרה כזו:
yourOtherFunction: function () {
var _this = this;
}
אני יודע שחלק, אפילו גדול, משתמשים ב-that במקום ב-this_, אבל ככה אני רגיל 🙂 כפי שאמרתי, עושים את זה בגלל שמשמעות ה-this משתנה. ואם זה נשמע מסובך – הנה דוגמה טובה:
function myClass() {
var _this = this;
whatever.each(function() {
// 'this' refers to the element that is being iterated
// '_this' still refers to the myClass() object.
});
}
עוד נוהג שסיגלתי לעצמי הוא לציין כל Private method ב-underscore לפניו, כך אני מסמן לעצמי שמדובר במתודה פרטית שמוטב לא לחטט בה אם חפץ חיים אנוכי.
אם אתם רוצים דוגמה לתוסף ממש פשוט שכתבתי, אתם מוזמנים להסתכל על more or less, שהוא תוסף ממש פשוט ונחמד שכתוב בדיוק לפי תבנית העיצוב הזו וזמין בגיטהאב.
אני יודע שחלק מכם יחשבו לעצמם 'למה אני צריך את הכאב ראש הזה?' וימשיכו לכתוב סקריפטים ב-jQuery ללא תוספים או תוספים ללא תבנית עיצוב מסודרת. אבל תאמינו לי – ברגע שתצטרכו להוסיף פונקציונליות לקוד, או ברגע שתצטרכו לשכפל את הקוד למוצר או פרויקט אחר, אתם רק תודו לעצמכם על עשרים הדקות שהקדשתם לבנות את הקוד נכון. שימוש בתבניות עיצוב בכלל ובתנית עיצוב פשוטה וקלה כל כך כמו jQuery Boilerplate היא דבר שחוסך המון זמן – נסו ותהנו 🙂