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

Modernizr load

רן בר-זיק יוני 9, 2013 7:30 am אין תגובות

שימוש בטוען המשאבים של ספרית Modernizr, למה הוא חשוב, מי צריך אותו בכלל ואיך משתמשים בו?

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

במאמר הקודם, שבו דיברתי על שימוש ב-Modernizr ככלי לכתיבת בדיקות שונות, הזכרתי שיש ל-Modernizr תכונות נוספות. אחת התכונות השימושיות ביותר היא Modernizr.load. התכונה הזו כל כך שימושית עד שהיא זכתה אפילו לגרסה עצמאית משל עצמה ונפרדת מ-Modernizr.

כזכור, אנו יוצרים בדיקה חדשה ב-Modernizr באופן הבא:


if(Modernizr.canvas== true) {
console.log('Canvas is activated!');
} 

בבדיקה הזו, אנו בודקים אם canvas נתמך בדפדפן. הבעיה היא, שבעולם האמיתי אנחנו לא מסתפקים בהדפסת הודעה לקונסולה אלא הרבה פעמים אנו רוצים לטעון קוד JavaScript נפרד שמטפל בבעיה – למשל לטעון פתרון Polyfill זה או אחר. כך למשל, במקרה של canvas, אני ארצה לטעון במקרה של כשלון במבחן קוד שיפעיל את http://flashcanvas.net/ שמאפשר תמיכה באמצעות פלאש לדפדפנים ישנים יותר. הדרך הנכונה ביותר לעשות את זה היא שימוש ב-Modernizr.load – והנה הדוגמה:


Modernizr.load({
  test:  Modernizr.canvas,
  yep : 'activate-canvas.js',
  nope: 'activate-flash-canvas.js'
});

מה הולך פה? אנו משתמשים במתודת Modernizr.load שממקבלת אובייקט עם כמה פרמטרים – הראשון הוא הבדיקה שלנו – במקרה הזה בדיקה אם יש לנו canvas, אנו כמובן יכולים להשתמש ב-API של Modernizr על מנת לכתוב בדיקה משל עצמנו ולהשתמש בה. הפרמטר השני הוא איזה JavaScript לטעון אם הבדיקה הצליחה והשלישי, nope, מגדיר איזה JavaScript לטעון אם הבדיקה נכשלה.

אפשר לטעון גם קבצי CSS! למשל:


Modernizr.load({
  test:  Modernizr.fontface,
  yep : 'regular.css',
  nope: 'crippled.css'
});

כאן אני בודק אם יש את התמיכה ב-fontface, במידה וכן, אני טוען את ה-CSS הרגיל, במידה ולא, אני טוען את ה-CSS שמיועד לדפדפנים שלא מקבלים את התמיכה הזו.

אפשר לעשות כמה בדיקות ולטעון כמה סקריפטים או קבצי CSS, למשל:


Modernizr.load({
  test:  Modernizr.fontface,
  yep : 'regular.css',
  nope:['presentational-polyfill.js', 'crippled.css']
});

במקרה הזה אני פשוט מעביר מערך של 2 קבצים (אפשר יותר) – אחד מהם קובץ CSS והשני הוא קובץ JS ושניהם יטענו אם הדפדפן לא תומך ב-font face.

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


Modernizr.load({
    test : Modernizr.websockets && window.JSON,
    nope : 'functional-polyfills.js',
    both : [ 'app.js', 'extra.js' ],
});

אחד מהפיצ'רים החזקים ב-Modernizr.load הוא האפשרות לשים callback שירוץ בגמר הבדיקות והטעינות השונות – וכך לוודא שכל הסקריפטים/קבצי ה-CSS נטענו לפני שמתחילים לעבוד. בדיוק בשביל זה יש לנו את מתודת complete:


Modernizr.load({
  test:  Modernizr.canvas,
  yep : 'activate-canvas.js',
  nope: 'activate-flash-canvas.js',
  complete : function () {
      myApp.init();
    }
});

myApp.init ירוץ רק לאחר השלמת הבדיקות והטעינות השונות.

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


Modernizr.load([
    // בדיקה ראשונה
  {
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // בדיקה שניה
  {
    test : Modernizr.websockets && window.JSON,
    nope : 'functional-polyfills.js',
    both : [ 'app.js', 'extra.js' ]
    }  
]);

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


Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);

וואו! מה הולך פה? בואו ונראה, ראשית, אני מנסה לטעון את jQuery מתוך מקום חיצוני לאפליקציה שלי – הענן של גוגל. איך אני מבצע את ניסיון הטעינה הזה? משתמש במתודת load ושם את ה-URL של הסקריפט. אחרי כן, אני מריץ את מתודת complete, מה אני שם שם? בדיקה קטנטנה שבה אני בודק אם אובייקט window.jQuery קיים. במידה והוא קיים, סימן ש-jQuery נטען והכל תקין. במידה ולא, סימן שהמשאב החיצוני התקלקל ואז אני טוען את jQuery מהתיקיה של האפליקציה שלי. בסוף בסוף אני מעלה את הסקריפט שמפעיל את האפליקציה שלי.

למה לי לעשות את זה? ככה אני מרוויח פעמיים: קודם כל, אני יכול להעזר בענן של גוגל ואז יש סיכוי גבוה ש-jQuery תהיה ב-cache של הדפדפן ואז אני מרוויח זמן הורדה וטעינה. בנוסף, אני יודע שאם הענן של גוגל ייכשל (והוא יכול להכשל), האפליקציה עדיין תעבוד. אחרי כן אני מוודא שהסקריפט שלי needs-jQuery.js תמיד ירוץ אחרי שהמשאב של jQuery יהיה זמין לו. אפשר להשתמש בזה כמובן לא רק ל-jQuery אלא לכל משאב שיש כמה דרכים לטעון אותו (למשל CDN).

יש עוד תכונות שימושיות ל-Modernizr, מדובר באמת בספריה נפלאה שבזמן האחרון מהווה ממש סטנדרט הכרחי בפיתוח ווב. אפשר להסתדר בלעדיה (והראיתי גם איך) אבל חשוב להכיר אותה ואת העקרונות שעובדים מאחוריה. ריבוי הדפדפנים וההתפתחות העתידית של התקן מחייבים אותנו לכתוב קוד גמיש שמסוגל להתמודד עם פלטפורמות שונות – שימוש ב-Feature detection הוא קריטי בבניית קוד כזה.

הדבר האחרון שאתם רוצים להציג בראיון עבודה זה אתר כזה למשל:

ביזיון זה אנחנו
ביזיון זה אנחנו

אם אתם עובדים במקום עבודה שמכריח אתכם לייצר אתרים/אפליקציות כאלו, אני הייתי ממליץ במהירות להחליף אותו. אפילו שתמיד יש סיכוי שלא היו מקבלים אתכם לשם מההתחלה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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