如果你不知道什么是模板,或者没用过,那我们先认识下在不是模板的时候,用一种语言生成另一种语言的最直接方式的时候,怎么操作。
比如:使用Javascript生成一些HTML:
document.write('<h1>Please Don't Do This</h1>');
document.write('<p><span class="code">document.write</span>is naughty,</p>');
如果像上面这样一直往下写,写500行,这样写一点意义也没有,问题是出现在哪里呢?
是:切换上下文环境困难。由Javacript生成的HTML充满了问题:
1、必须不断地考虑哪些字符需要转义以及如何转义。
2、使用JavaScript生成那些自身包含Javascript代码的HTML会很让人抓狂。
3、通常会失去编辑器的语法高亮显示和其他方便的语言特性。
4、很难发现格式不正确的HTML。
5、很难直观地分析。
6、很难让别人读懂你的代码。
针对以上问题,模板解决了在目标语言中编写代码的问题,同时也让插入动态数据成为了可鞥。用Mustache模板将之前的例子重写:
<h1>Much Better</h1>
<p>No <span class="code">document.write</span>here!</p>
<p>Today's date is {{}}.</p>
Handlebars是流行模板引擎Mustache的扩展。之所以推荐Handlebars,是因为它简单的Javascript集成(前端后后端)容易掌握的语法。
理解模板引擎的关键是在于上下文环境。当渲染一个模板时,便会传给模板引擎一个对象,就是上下文对象。
例如:如果上下文对象是{ name: 'Buttercup'},模板是<p>Hello, {{name}}!<p>,通过模板渲染HTML,最终输出结果是:
<h1>Meadowlark Travel</h1>
<p>Welcome,Buttercup</p>