אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery Scripts » מפתחים תוסף ל-jQuery? כדאי להשתמש ב-jQuery Boilerplate

מפתחים תוסף ל-jQuery? כדאי להשתמש ב-jQuery Boilerplate

רן בר-זיק מרץ 16, 2014 8:55 am אין תגובות

כותבים קוד עם jQuery? ארגנו אותו כתוסף עם תבנית עיצוב יעילה וידידותית במיוחד

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

למרות שעושה רושם בזמן האחרון ש-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 היא דבר שחוסך המון זמן – נסו ותהנו 🙂

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד