Использование комментариев для хранения статических данных в Javascript

сегодня в 13:54

Иногда создаваемый компонент связан с большим количеством статических данных. Единственный «нормальный» способ хранить эти данные в javascript — это строки. Но хранить в строках многострочные данные неудобно, т.к. каждая строка требует дополнительного форматирования. Кроме того приходится следить за экранированием символов.



В принципе данный способ лежит на поверхности, но не все задумывались о нем в таком аспекте. Кроме того здесь следует сделать замечание про минификацию. Она не должна порезать полезные комментарии.

И так, все, что нам нужно — это получить текстовое содержимое комментария. Но получить любой комментарий через рефлексию нельзя. Однако, согласно спецификации, Function.prototype.toString() возвращает текстовое представление функции. Включая комментарии. Поэтому нам нужно заключить наш комментарий в тело функции.

Приведу пример. Несколько надуманный, но отражающий суть. Хранение стилей в одном файле с js-компонентом.

const Component = (function ($) {
  const initialize = (function () {
    var isInited = false;
    function css() {
      /*content-start
      .component, .component * {
        font-family: Arial;
        font-size: 12px;
        line-height: 1;
        color: #4D4D4D;
        padding: 0px;
        margin: 0px;
      }      
      content-end*/
    }
    return function () {
      if (isInited) return;
      isInited = true;      
      (function () {
        const startStr = '/*content-start',
              endStr = 'content-end*/',
              fnStr = css.toString(),
              textStart = fnStr.indexOf(startStr) + startStr.length,
              textEnd = fnStr.lastIndexOf(endStr),
              text = fnStr.substring(textStart, textEnd).trim();
        $(document.head).append($('<style type="text/css"/>').html(text));
      })();
    };
  })();
  return function () {
    initialize();
    this.x = 5;
    this.y = 10;
    this.elem = $('<div class="component"/>').text('x = ' + this.x + '; y = ' + this.y);
  };
})(jQuery);

И помните, что любой подход можно использовать как для зла, так и для добра. Всё зависит от ваших целей.

Всем добра )

Свежий взгляд

на бег

протестируй кроссовки

нового поколения

Стань

первоиспытателем!

Скачай Windows Server 2012 R2

и выиграй почетную футболку!

Скачать

Автоматизированное

продвижение сайтов

• 50% экономии на ссылках


• Запуск проекта за 10 минут


• Вывод и удержание в ТОП 10

Подробнее

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.