Я изучал различные синтаксические анализаторы шаблонов, доступные для javascript, и пытаюсь создать что-то свое для использования на сервере (node.js) и на стороне клиента.
Я хочу написать javascript без ограничений внутри моего шаблона, как показано ниже, и мне не нравится изучать новый синтаксис. (не беспокойтесь о тегах, я их только что придумал, они могут быть чем угодно)
<ul>
<js>for (var i = 0, l = this.somearray.length; i < l; i++) {</js>
<li>
<span><js>print(this.somearray[i].key)</js></span>
<span><js>print(this.somearray[i].value.toLowerCase())</js></span>
</li>
<js>}</js>
</ul>
Я думал о разборе этого шаблона с помощью функции ниже.
function parse() {
var split = template.split(/<js>(.*?)<\/js>/g),
i, l;
for (i = 0, l = split.length; i < l; i += 2) {
var before = split[i],
content = split[i + 1] || null;
parsed += before ? 'print(' + JSON.stringify(before) + ');\n' : '';
parsed += content ? (content + '\n') : '';
}
}
это дало бы мне такой результат
print("<ul>\n");
for (var i = 0, l = this.somearray.length; i < l; i++) {
print("\n <li>\n <span>");
print(this.somearray[i].key);
print("</span>\n <span>");
print(this.somearray[i].value.toLowerCase());
print("</span>\n </li>\n");
}
print("\n</ul>");
функция печати будет выглядеть так
function print(s) {
output += s;
}
и если я затем отредактирую проанализированный код с помощью eval, результат будет выглядеть следующим образом ...
<ul>
<li>
<span>key1</span>
<span>value1</span>
</li>
<li>
<span>key2</span>
<span>value2</span>
</li>
<li>
<span>key3</span>
<span>value3</span>
</li>
</ul>
Я что-то здесь упускаю? Несколько строк кода, и это быстро, он может кэшировать разобранный JavaScript, поэтому в следующий раз он будет отображаться еще быстрее. Единственное, что я использую eval, который считается злом, но пока я не анализирую ввод пользователя, я думаю, что все должно быть в порядке ...
Есть мысли по поводу кода выше ??