Modernizr load

במאמר הקודם, שבו דיברתי על שימוש ב-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 הוא קריטי בבניית קוד כזה.

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

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