Использование комментариев для хранения статических данных в 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); 

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

ссылка на оригинал статьи http://habrahabr.ru/post/213009/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *