XTemplate模板学习和使用总结
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是博主接触的第一款模板语言，算是有了一个概念。希望将来可以不断拓展知识面，不断接触更多更好玩的东西。
