EJS和underscore模板

2014-06-21

NodeJS还没有流行起来之前,Ruby on Rails曾一度代表着互联网上最先进的生产力,好多后起之秀都受了它的影响。EJS和underscore作为新时代早期的开拓者,很自然地沿用了ERB的语法。但那毕竟是上个时代的遗产,和更先进的模板引擎Jade相比,显得落后不少。

互联网所有的人都在追新,我为什么还要写这样一个过时的技术?因为它虽然有些过时,但依然好用。为什么好用?因为简单。

其实做一个项目,能用到核武器的场景并不多,绝大部分情况下,几挺机枪就结束战斗了。

所以就算技术陈旧一点,也没什么大不了,反倒可能更快地解决战斗。Jade、Angular虽然很先进,不过大多数场景下EJS和Backbone也完全够用,而且更轻量级。

说归说,现实是搞技术的人太讨厌“陈旧”和“过时”了,有难以克服的追新强迫症。我决定狡猾地绕开这个问题,不说“过时”,而换成英语old-fashioned,感觉就另有一番味道了。

我们暂且把underscore和EJS的模板都统称为EJS like template。下面就来说一说这个old-fashioned模板技术。

概要

EJS like template的语法,两句话就能说明白:

<% JS逻辑代码 %> <%= 要输出的内容 %>

详细用法下面有代码示例,先说一下基本原理。

模板 + 数据 ==> 结果字串

先要有模板,模板本质上是一个函数。把数据传入模板函数,就生成结果字串。

和正则表达式类似,模板也有一个所谓的编译过程,是需要耗费时间的。

如果你需要用同一个模板生成好多份数据,不妨先创建好这个模板,然后在需要生成结果字串时传入数据。这样只会有一次编译模板的过程,执行效率会高一些。

拿underscore的模板为例:

// 下面这种写法会一步到位生成结果字串,但每一次调用都会创建一次模板
_.template('模板字串', {数据对象});

// 分两步的用法
var compiled = _.template('模板字串'); // 创建模板
compiled({数据对象1}); // 填充数据
compiled({数据对象2}); // 重复利用之前编译好的模板

underscore模板

underscore是我很喜欢的一个JS库,前后端都用得上。后起之秀Lo-Dash要比underscore更强,但体积也更大,如果做后端开发,不介意脚本体积,Lo-Dash是非常不错的选择。

如果你的代码用不到Lo-Dash有但underscore没有的特性,或者十分在意脚本体积,用underscore更省心。

下面的代码是几个underscore模板的例子:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/underscore-min.js"></script>
</head>
<body>

<script>
var list = ['foo', 'bar']; // 下面用来填充模板的数据
</script>


<!--
<% ... %> 用来包含要执行的JS代码,凡是不需要输出文本的地方都用它
<%= ... %> 用于输出文本,被包含的值解析后转换成文本
下面来看一个简单的循环,把list中每个元素打出来
为什么模板中可以直接用list的值?因为在执行模板填充时的上下文中可以找到list变量
-->
<script type="text/template" id="concat">
<% for(var i = 0; i < list.length; i++){ %>
<%= list[i] %>
<% } %>
</script>
<script>
var compiled = _.template(document.getElementById('concat').innerText);
console.log(compiled()); // 这个时候才会把值填进模板
</script>


<!--
习惯上,很少用上下文中的变量,而是显式传入数据对象
填充数据时,会从传入的对象中找到相应的key
例如模板中的list对应着数据对象中的list这个key的值
-->
<script>
var data = {
list: ['foo', 'bar']
};
compiled = _.template(document.getElementById('concat').innerText);
console.log(compiled(data)); // 显式传入数据对象
</script>


<!--
<%= ... %> 的一种等价方式是print函数
在EJS里也存在print函数
有时候print比用<%= ... %>方便一点点,如下例
-->
<script type="text/template" id="print">
<% for(var i = 0; i < list.length; i++){ print(list[i]); } %>
</script>
<script>
compiled = _.template(document.getElementById('print').innerText);
console.log(compiled(data));
</script>


<!--
上下文中的库和变量一样,都是可以在模板里使用的
下面模板中使用了underscore库的函数
-->
<script type="text/template" id="useLib">
<% _.each(list, function(item){ %>
<%= item %>
<% }); %>
</script>
<script>
compiled = _.template(document.getElementById('useLib').innerText);
console.log(compiled(data));
</script>


<!--
<%= ... %>所包含的可以是表达式
经常用于做一些简单的格式处理
-->
<script type="text/template" id="eval">
<% for(var i = 0; i < list.length; i++){ %>
<%= "(" + (i + 1) + ")" + list[i].toUpperCase() %>
<% } %>
</script>
<script>
compiled = _.template(document.getElementById('eval').innerText);
console.log(compiled(data));
</script>


<!--
模板最大的用处是输出HTML
为了可读性,一般将HTML标签直接写在模板里,不用包裹
只让动态的数据包含在<%= %>里,如下例
-->
<script type="text/template" id="html">
<div class="list">
<% for(var i = 0; i < list.length; i++){ %>
<div class="item">
<span class="num"><%= '(' + (i+1) + ')' %></span>
<span class="text"><%= list[i].toUpperCase() %></span>
</div>
<% } %>
</div>
</script>
<script>
compiled = _.template(document.getElementById('html').innerText);
var html = compiled(data);
console.log(html);
document.write(html); // 将生成的HTML写到页面
</script>


<!--
把一段文本原封不动地输出到页面上,就要进行必要的HTML转义
尤其文本是由用户输入的,很可能会包含HTML标签
<%- %>与<%= %>的不同之处是,<%- %>会把内容做HTML转义
-->
<script>
var htmlList = ['<div>', '<ul> & <ol>'];
</script>
<script type="text/template" id="escape">
<% for(var i = 0; i < htmlList.length; i++){ %>
<%- htmlList[i] %>
<% } %>
</script>
<script>
compiled = _.template(document.getElementById('escape').innerText);
var text = compiled(htmlList);
console.log(text);
document.write(text);
</script>

</body>
</html>

为什么模板中有空白和换行?

如果你观察了上面每段程序的console输出,会发现有大量换行和空格,这些换行和空格是哪里来的?答案是从模板里来。 在上面的例子中,我们像下面这样定义模板:

<script type="text/template">
<% for(var i = 0; i < list.length; i++){ %>
<%= list[i] %>
<% } %>
</script>

取模板,用的是这个script标签的innerText,所有包含在script标签中的字符(包括换行和空格)都存在于模板中。 一般来说,不必介意这些换行和空白,因为最终要生成的HTML会忽略掉标签之间的空白,这是HTML的语法规则。

但如果真就不能忽略该怎么办呢?只好把空格都人为去掉,但这样会牺牲掉代码的可读性。例如:

<script type="text/template">
<% for(var i = 0; i < list.length; i++){ %><%= list[i] %><% } %>
</script>

使用print函数可以不必在<% %>和<%= %>间来回切换,令代码变简洁:

<script type="text/template">
<% for(var i = 0; i < list.length; i++){ print(list[i]} %>
</script>

注意,上面模板中,script的innerText的开头和结尾分别有一个换行,它们依然还在。要去掉它们,可以用trim()函数来将换行去掉。

<%= %>和<%- %>中间两端的空格有效吗?

答案是无效。 <%= list[i] %> 和 <%= list[i] %>的结果是一样的,最后都等价于<%=list[i]%> 这样一来,为了代码可读性,可以随意加空格。

在模板中包含JS逻辑合适吗?

我不推荐这样做,因为如果模板中的逻辑出了问题,往往很难排查。而且IDE的语法检查会忽略模板中的JS,有语法错误无法报告。

其实模板就应该保持它原本的用途,滥用反倒降低开发效率。

什么样的JS逻辑应该放在模板中?

我觉得任何需要多步运算的逻辑,都应该剔除出模板,甚至前面例子中的循环都不应该有。绘制列表,建议就给container和item各定义一个模板,没必要像上面例子中那样。

几个比较适合把逻辑放在模板中的场景:

场景1:当某个变量存在的时候,输出这个变量,否则不输出: 特别注意,如果模板中直接使用一个不存在的变量,会报异常。例如:

<% if(varName){     %>
<%= xxx %>
<% } %>

如果varName不存在,则会抛异常说varName没有定义。为避免这种情况,可以把数据对象多嵌套一层。例如:

<% if(d.varName){     %>
<%= xxx %>
<% } %>

送数据的时候只需要简单套一层:

compiled({d: dataObj});

这样无论varName是否存在于d中,都不会抛出异常。

场景2:根据不同的条件,输出不同的值:

<% if(state === 'error'){ %>
<%= error_msg %>
<% else{ %>
<%= state %>
<% } %>

场景3:简单的格式转换,例如时间格式、数字格式、大小写等。

EJS

EJS也可以用在客户端,但通常都用于服务端NodeJS的模板引擎,例如Express,以及我博客用的hexo。

用Express创建一个使用EJS模板引擎的项目:

express -e projectName

参数-e表示模板引擎用EJS。

语法没什么好说,和underscore的很像,唯一不同的是: underscore的HTML转义是<%- %>,而EJS的HTML转义是用<%= %>,正好是颠倒的。这一点挺不爽,还好也不是大问题,因为一般用不到转义,用<%= %>就足够了。

回主页
京ICP备14007233-1号