תבנית JavaScript ללא ספרייה

תבנית JavaScript משמשת להפריד את מבנה ה-HTML מהתוכן הדינמי שהוא מכיל. במנועי תבנות סטנדרטיים דוגמת handlebars התוכן הדינמי מסומן באמצעות שפם {{ ... }} והמנוע מחליף את השפם בתוכן לפי דרישה. מנועי התבנות הם ספריות לכל דבר שאותם צריך להוסיף לדף כדי לרנדר את התוכן הדינמי.

מה הבעיה?

ככל שקהילת ה-JavaScript גדלה כך גדל כושר ההמצאה של חבריה והיום המתכנת הממוצע צריך לבחור בין לא פחות מ-20 מנועי תבנות templating כדוגמת: mustache, handlebars, underscore, pug. המשמעות היא שצריך ללמוד ספרייה נוספת, אבל מה שבאמת גרוע הוא הספרייה עצמה שמוסיפה משקל עודף לדף ומאטה את הטעינה שלו.

בגלל הסיבות שמניתי אני לא אוהב להשתמש במנועי תבנות. כשיש לי ברירה, אני מעדיף לטפל בתוכן הדינמי בדף באמצעות תבנית פשוטה שניתן לייצר באמצעות קצת HTML ומעט JavaScript.

הפתרון כולל שני חלקים: תבנית וסקריפט.

התבנית

הדפדפן יודע לקרוא תגיות סקריפט ששייכות לסוג text/javascript:

<script type="text/javascript"></script>

אבל אין מניעה להשתמש בסוג אחר שהדפדפן לא יודע מה לעשות איתו, לדוגמה text/template:

<script type="text/template"></script>

כשהדפדפן נתקל בסקריפטים מסוג לא ידוע הוא לא יודע מה לעשות איתם וכל מה שנמצא בתוכם לא נראה לעיני המשתמשים אבל למזלנו קיים בדף מה שאומר שניתן להשתמש בו בתור אלמנט של HTML.

בתוך הסקריפט נשים את התבנית שלנו.

לדוגמה פריט רשימה הכולל משתנה שאותו הסקריפט צריך להחליף:

<script type="text/template" id="msg-template">
    <li>%%msg%%</li>
</script>

• נשבץ את שמות המשתנים הדינאמיים בין רצף תווים לא מצוי. בדוגמה הזו, %%...%%. בדומה לשפם {{ ... }} המקובל בספריות דוגמת mustache.
• ניתן לטמפלייט id כדי שהסקריפט יוכל להשתמש בו.

הסקריפט

סקריפט ה-JavaScript לוקח את הטמפלייט ומחליף את תוכנו בערך המשתנה. הסקריפט שלי כתוב ב-jQuery שעושה את החיים להרבה יותר נוחים.

# define a message
var message = 'What a nice templating method!!"

# grab the template as html
var template = $('#msg-template').text();

# replace the variable with the message
template = template.replace('%%msg%%', message);

דוגמה פשוטה שתמחיש את העניין

הדוגמה הבאה שולחת מערך JSON לפונקציה add_msg שמייצרת את התוכן הדינמי ומשבצת לדף.

כך נראית התוצאה הסופית:

1. מבנה ה-HTML

ה- HTML מכיל רשימה שלתוכה יודבק המידע:

<div class="container">
    <ul class="" id="messages">
        <li class="empty">
        אין מסרים
        </li>
    </ul>
  </div>

ואת הטמפלייט המכיל 3 משתנים:

<script type="text/template" id="msg-template">
      <li class="%%color%%"><strong>%%date%%</strong>: %%msg%%</li>
</script>

• msg - התוכן
• date - תאריך
• color - קלאס שייתן צבע

שימו לב שסוג הסקריפט text/template אינו סטנדרטי.

2. המידע

המידע הוא מערך JSON:

var msgs = [
    {'msg': 'שמעת על המסעדה ששמה קרמה? אין תפריט אתה מקבל מה שמגיע לך', 'color': 'green'},
    {'msg': 'למה התרנגולת חצתה את הכביש? כדי להגיע לצד השני', 'color': 'red'},
    {'msg': 'החולה: "אני מכור לטוויטר" הרופא: "אני לא עוקב אחריך"', 'color': 'orange'},
    {'msg': 'רציתי להגיד לאיש שגנב לי את מקל הסלפי : "אתה צריך להסתכל על עצמך טוב טוב"', 'color': 'green'},
    {'msg': 'מה ההבדל בין מחית תפו"א ואפונה? כל אחד יכול למעוך תפו"א', 'color': 'red'},
    {'msg': 'איך נקרא ידוען באינסטגרם שלקה בשפעת? משפיען', 'color': 'orange'},
];

הסקריפט

הסקריפט כולל את הפונקציה add_msg שמחליפה את הטמפלייט בתוכן דינמי שמקורו ב-JSON , ומדביקה לתוך הרשימה:

function add_msg(message, color){
  // format the current date
  var d = new Date();

  var dateString = (('0' + d.getHours())).slice(-2) + ':' +
    (('0' + d.getMinutes())).slice(-2) + ':' +
    (('0' + d.getSeconds())).slice(-2);

  // define the color
  color = (typeof color === 'undefined' ? 'black' : color);

  // get the text content of the template
  var template = $('#msg-template').text();

  // replace the content
  template = template.replace('%%date%%', dateString);
  template = template.replace('%%msg%%', message);
  template = template.replace('%%color%%', color);
  
  // get the HTML list
  var msgsList = $('ul#messages');

  // remove the default message
  msgsList.find('li.empty').fadeOut();

  // prepend the template to the list
  msgsList.prepend(template);
}

כדי להזין את הפונקציה במרווחים קבועים אני משתמש ב-setInterval שמוסיף פריט אחד לדף בכל 4 שניות בתוך לולאה:

var i = 0;

var sI = window.setInterval(function(){
   add_msg(msgs[i].msg, msgs[i].color);
   i++;
   if(i >= msgs.length){
       i = 0;
       window.setTimeout(function(){
           $('ul#messages').html('');
       }, 3900);
   }
}, 4000);

לכל מדריכי ה-jQuery

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים