XTemplate模板学习和使用总结

前言

XTemplate是我接触的第一个模板语言，用在公司的一个NodeJS项目中，跟它打交道经常是因为需要使用它的语法向模板中注入数据。因为是刚入门前端不久，所以一开始对这个语言有些抵触（毕竟不会用，还要上手写业务...），“这种我明明可以写在js文件里啊，为啥非要写在模板里？？”之类。但是在了解并使用它写了一些业务之后就发现，模板语言是真的好用。

XTemplate的好处

首先，使用XTemplate可以很方便地使用include语法调用不同的模板。你可以将一个复杂的页面拆成几个不同的模块来写，其中很可能一些模块是可复用的，这样将来再需要这些模块时只要简单的将其include进来就好，而不必每次都重新写一遍。在浏览代码时也会显得很直观；
这种可拆分的特性不仅仅只是直观而已，其可维护性和可扩展性都大大提高了。业务需求变更时，只需更改涉及到的功能模块，然后所有调用这个模块的页面都会同步修改。想要增加功能时亦是如此；
也是因为可拆分的特性，一个项目可以方便的分由几个团队成员共同完成，每个人都可以专注于开发自己的模块，避免不必要的代码冲突，这使得开发效率大大提高；
就数据的导入来讲，在模板阶段导入数据和采用js文件异步方式导入数据优势各有不同。js异步加载一般是在页面在用户浏览器端加载完成时进行，也就是说页面“到达”浏览器端时是没有数据的。但这个特点并不影响js异步加载作为页面交互的主要手段。模板加载的方式就不同了，页面在“到达”用户浏览器之前就已经是加载好了的，用户不必再通过js向服务器发送请求，以加载页面的基础数据，只需要在需要交互的时候再发送请求即可，体验更加无缝；
XTemplate对编写HTML也是非常友好的。具体在于XTemplate提供了不少非常实用的语法功能，正是在了解和使用这些功能的过程中，我逐渐改变了想法（留下了不学无术的泪水.jpg）；
由于没有接触过其他模板引擎，所以XTemplate独立于其他模板引擎的独有特点这里就不讲了（毕竟刚入门的菜鸡）。但是就自己在工作中的使用体验来讲，XTemplate还是很好上手的，学习成本并不高。

XTemplate语法

下面着重介绍一些我在工作中经常用到的语法：

一、变量

利用这个语法可以向HTML中插入变量（数据），是一个经常会被用到的基础功能，语法如下：

{{ pageData }}

不但如此，还可以访问并取到变量的子级变量，语法和js相同：

{{ pageData.num }}
{{ pageData['num'] }}

然而，使用 {{}} 会对一些类似"<"， ">"这样的字符串进行转义，显示出来就是"& lt;"， "& gt;"，所以如果需要引入原始数据（不被转义），就需要使用下面的语法：

{{{ pageData }}}
{{{ pageData.num }}}

如果连大括号都要保留（不被转义或误识别）的话，那就需要这样写：

{{%
  {{ pageData }}
%}}

如果想添加注释呢，只需要在双括号内加一个感叹号就行了：

{{! 博主很帅(cai)，大家知道就行了，不要声张}}

二、作用域

每一个模板都有一个独立的作用域，在子模板中可以访问到父模板的上下文，但是在子模板中定义或者修改变量不会影响到父模板的变量。如下所示：

parent.XTpl:

{{ set (a = 1, b = 2) }}
{{include ("sub.XTpl") }}
in parent:
a = {{ a }}
b = {{ b }}

sub.XTpl:

in sub:
{{ set b = 3 }}
a = {{ a }}
b = {{ b }}

渲染 parent.XTpl，将会得到下面的结果：

in sub:
a: 1
b: 3
in parent:
a: 1
b: 2

三、方法

在写模板的时候可以使用js自带的方法，比如数组的方法、字符串的方法都可以使用，这点非常方便。

{{ set str = '我没有钱' }}
{{ str.split('')[0] + str.split('')[2] + str.split('')[3] }}  // => 我有钱

四、操作符

XTemplate支持常见的操作符，比如：加(+)，减(-)，乘(*)，除(/)，余(%)，还有比较类型的：=, !, >, >=, <, <=，以及逻辑操作方面的：或(||)，与(&&)，非(!)等等，甚至支持三元运算符：

{{ a > b ? a : b }}

然而需要注意的是：这里面不包含""号，如果需要使用等于，必须使用全等号(=)，否则会报错。

五、函数调用

如果你传递了 javascript 的方法到模板中，你可以像在 javascript 中一样使用它。比如使用预先定义并传进来的函数，将加载进模板的json数据转换为字符串，以供js文件从HTML中调取。

六、if 语句

使用if语句可以对一个或多个条件进行判断，从而根据需求的不同而显示不同的代码块。

{{# if (I'm rich) }}
  Show me my money.
{{/ if }}

或者你还可以加入 elseif 语句

{{# if (I am handsome) }}
  I am handsome.
{{ elseif (I am owesome) }}
  I am not only handsome but also owesome.
{{ else }}
  Sorry, but there is no else.
{{/ if }}

七、each 语句

使用each语句可以对数据和HTML结构进行循环，非常方便的将数据按照顺序写入到HTML结构中:

{{set (array = [{
  name: "one"
}, {
  name: "two"
}])}}
{{#each(array)}}
  {{'第' + (xindex + 1) + '行:' + this.name}}
{{/each}}

渲染这个模版，将会得到结果：

第1行：one
第2行：two

八、include 语句

include语句用于引入其他模板：

{{ include ("item.xtpl") }}

不但如此，在引入模板时还可以传递并修改参数：

{{ set (x = "x", y = "y") }}
{{ include ("sub.xtpl", a = x, b = x)}}

渲染 parent.html 将会得到结果：

x: x
y: y
a: x
b: x

九、模板继承

模板继承可以使用户非常容易地复用模板。比如可以写一个基础模板，里面写入一些公用的内容，并且在里面定义一些block，比如header/body/footer之类，然后子模板只需要将这些block重写即可。如下：

先定义一个base.xtpl：

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8" />
        <title>{{title}}</title>
        {{{block ("head")}}}
    </head>
    <body>
        {{{block ("body")}}}
    </body>
</html>

再编写content.xtpl：

{{extend ("./parent")}}
{{#block ("head")}}
    <link type="text/css" href="test.css" rev="stylesheet" rel="stylesheet"/>
{{/block}}
{{#block ("body")}}
    <h2>{{title}}</h2>
{{/block}}

然后我们使用数据 {title: 'XTemplate'} 渲染 content.xtpl，将会得到下面的结果：

<!doctype html>
<html>
    <head>
        <meta name="charset" content="utf-8" />
        <title>XTemplate</title>
        <link type="text/css" href="test.css" rev="stylesheet" rel="stylesheet"/>
    </head>
    <body>
        <h2>XTemplate</h2>
    </body>
</html>

总结

XTemplete是博主接触的第一款模板语言，算是有了一个概念。希望将来可以不断拓展知识面，不断接触更多更好玩的东西。