Иногда создаваемый компонент связан с большим количеством статических данных. Единственный «нормальный» способ хранить эти данные в javascript — это строки. Но хранить в строках многострочные данные неудобно, т.к. каждая строка требует дополнительного форматирования. Кроме того приходится следить за экранированием символов.
В принципе данный способ лежит на поверхности, но не все задумывались о нем в таком аспекте. Кроме того здесь следует сделать замечание про минификацию. Она не должна порезать полезные комментарии.
И так, все, что нам нужно — это получить текстовое содержимое комментария. Но получить любой комментарий через рефлексию нельзя. Однако, согласно спецификации, Function.prototype.toString() возвращает текстовое представление функции. Включая комментарии. Поэтому нам нужно заключить наш комментарий в тело функции.
Приведу пример. Несколько надуманный, но отражающий суть. Хранение стилей в одном файле с js-компонентом.
И помните, что любой подход можно использовать как для зла, так и для добра. Всё зависит от ваших целей.
Всем добра )
В принципе данный способ лежит на поверхности, но не все задумывались о нем в таком аспекте. Кроме того здесь следует сделать замечание про минификацию. Она не должна порезать полезные комментарии.
И так, все, что нам нужно — это получить текстовое содержимое комментария. Но получить любой комментарий через рефлексию нельзя. Однако, согласно спецификации, 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);
И помните, что любой подход можно использовать как для зла, так и для добра. Всё зависит от ваших целей.
Всем добра )