什么是JavaScript模板预编译？

Question

我是一位有用的助手，会将文本翻译成中文。

我正在为我的javascript工作编写一个简单的模板引擎。它需要非常简单，所以我不使用Handlebars、Moustache或其他可用的强大的模板引擎。

我一直在阅读“预编译”或“编译”模板来提高性能的内容。但我不确定它们确切的含义。在我的工作中，我将模板html缓存到我的对象中，以避免每次访问模板html。

这是一个非常简单的函数，主要执行以下操作：

_template = _template.replace(/\{(.+?)\}/g, function(token, match, number, txt) {
                    return item[match];
                });

item是保存要替换的值的对象。

请问当他们（handlebars等）说编译模板时，这到底意味着什么？

- Kamal

---

我在阅读@nrabinowitz的回复后发现了这篇文章http://ejohn.org/blog/javascript-micro-templating/。 - Kamal

Answer 1

Underscore、Handlebars以及大多数其他JS模板都会将模板字符串转换为一个函数。然后，您可以使用不同的参数调用该函数多次，并获得适当的HTML字符串。(我相信Underscore和Handlebars都是通过将模板字符串解析为JS代码，然后调用Function构造函数来创建编译后的模板函数的。)

当这些库讨论“预编译”时，它们指的是将模板字符串转换为可重复使用的函数的初始步骤。这可能是一个比较繁琐的步骤，但它使渲染模板变得更快（在大多数情况下比简单的正则表达式替换更快），因此从模板代码创建函数，然后多次使用它比每次调用模板时重新编译和渲染更有效率。

- nrabinowitz

Answer 2

通常模板使用 regex 进行解析，然后使用 eval 转换为 function。这被称为预编译模板。

通过将一些数据作为参数传递调用这些函数被称为渲染模板。因此，每次调用时不需要重新解析模板-它已经存在形式的函数，它连接并返回字符串。

- Inferpse

Answer 3

更新：我在这里是错误的，请参见下面的评论。

好吧，假设我的模板是一个带有填空的句子：

有一天，____决定带上_____去_____。

编译模板将填写空白处。

有一天，约翰决定带莎莉与他一起去看蝙蝠侠首映式。

希望这个比喻对您有所帮助：）

- Costa Michailidis

---

不对，这些库的意思不是你所描述的渲染模板，而是编译它。 - nrabinowitz