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

Иногда создаваемый компонент связан с большим количеством статических данных. Единственный «нормальный» способ хранить эти данные в 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);

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

Автор: cs0ip

Источник