Elapse 开源免费轻量级的 JavaScript 模版引擎

发布于 2019-10-20 17:47:53 字数 6381 浏览 1477 评论 0

Elapse 是一个开源的 JavaScript 模板引擎，其特点如下：

语法简单：由于该引擎基于 JS 语法，并做增强，所以学习成本低，且功能强大。
可编译，高性能：经测试，编译后的运行效率和市面上大部分模板引擎效率持平，或更高。
简单的 include：只需配置一个loader（加载器），便可支持各种模板来源，并自动从来源获取模板

简单示例

简单的开始，从第一个程序开始。

示例模板

<table>
<thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>生日</th>
  </tr>
</thead>
<tbody>
  ${forarr #userList as user}
    <tr>
      <td>${user.name}</td>
      <td>${user.sex}</td>
      <td>${user.birthday}</td>
    </tr>
  ${/forarr}
</tbody>
</table>

示例JSON数据

{"userList": [{
  "name": "小明",
  "sex": "男",
  "birthday": "1989-10-29"
}, {
  "name": "小红",
  "sex": "女",
  "birthday": "1989-10-1"
}]}

示例渲染脚本代码

var template = $("#template").val();
var json = $.parseJSON($("#json").val());
//渲染代码开始
Elapse.renderFromSource({
source: template,
data: json,
complete: function (text) {
  $("#result").html(text);
}
});
//渲染代码结束

基本用法

变量

变量分为两种类型：动态变量、临时变量和全局变量。

访问动态变量

动态变量为用户自定义变量和注入到模板的变量。均为“#”这个特殊变量的子对象。“#”有两种形态，第一种形态为父对象模式，第二种形态为子对象模式。

父对象模式: #.varname 或者 #["varname"]
子对象模式: #varname
两种模式没有本质上的区别,“子对象模式”使用起来比较方便而已。

访问作用域临时变量

临时变量为语法环境下临时定义的变量。

${forarr #userList as user}
  ${user.name}
${/forarr}

“user”即为作用域临时变量,“forarr”是用于循环数组的关键字，在循环中，可直接用“user”访问当前数组元素。

全局JavaScript对象访问

可访问window下的所有数据

${@location.href}
“@”前缀即为window属性访问

循环语句

支持四种循环:forarr,foreach,loop,while。

forarr

forarr专门用来遍历数组，内部实现使用经典的遍历数组方式，速度快。

${forarr #userList as user}
  列表长度为:${#userList.length},现在循环到了${user#index},值:${user}
${/forarr}

在forarr循环中可以访问到两种作用域临时变量: 当前下标: ${user#index} 当前数组元素: ${user}

foreach

foreach为迭代集合专用

示例数据：
{
  "colors": {
  "red": "#ff0000",
  "green": "#00ff00",
  "blue": "#0000ff"
  }
}

迭代代码：
${foreach #colors as color}
  颜色${color#key}的十六进制值为:${color}
${/foreach}

在foreach循环中可以访问到两种作用域临时变量:
  当前迭代key: ${color#key}
  当前迭代值（如果有的话）: ${color}

loop

loop为循环器，只进行单纯的循环。

循环十次:
${loop 10 as ls}
  循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
${/loop}

循环十次，每次递增2:
${loop 10,2 as ls}
  循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
${/loop}

循环十次，每次递增2,初始值为5:
${loop 10,2,5 as ls}
  循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
${/loop}

在loop循环中可以访问到三种作用域临时变量:
  循环步进： ${ls#step}
  本次循环值：${ls#state}
  循环结束值：${ls#over}
  当前值：${ls}

while

条件循环，当条件为true时，循环继续。

${while true}
  一次循环立马退出
  ${break}
${/while}

分支语句

支持if,else,elseif,switch。

if

经典的if语句，简便的用法。

${if #userList.length == 3}
  用户列表长度为3
${/if}

else

经典的else语句，简便的用法。

${if #userList.length == 3}
  用户列表长度为3
${else}
  用户列表长度不为3
${/if}

elseif

进行“否则的话，那么如果这样。。。”的判断

${if #userList.length == 3}
  用户列表长度为3
${elseif #userList.length == 0}
  用户列表长度为0
${else}
  用户列表长度不为3
${/if}

switch

switch在某些情况下比if系列语句更快。并且进行大量平级条件判断的时候，比用if写出的代码更优雅。

${switch #userList.length}
  ${case 0}
  用户列表长度为空。
  ${break}
  ${case 1}
  用户列表长度为1。
  ${break}
  ${case 2}
  用户列表长度为2。
  ${break}
  ${case 3}
  用户列表长度为3。
  ${break}
  ${default}
  神马啊。。。
${/switch}

执行程序与设置

eval

执行一段代码，注意这里的eval和我们熟知的JavaScript中的eval没有任何关系。这里的作用为执行一段程序代码，但是不会渲染。

将一个变量赋null:
${eval #userList[0] = null}

定义一个变量,必须定义在#下:
${eval #myvar = "hello world!"}

set

对模板进行一些配置

配置模板不进行防html注入处理,此时渲染的结果将不会为Unicode编码（默认为Unicode编码输出，防止html注入):
${set filter_data: false}

可配置的选项:
${boolean} filter_data: 是否进行防止html注入处理？为true的时候，当注入的数据为html代码的时候，会被转换成Unicode码。

name

每个设置了name的模板都会在系统中注册，以便其他模板引入。

设置模板的name为“userlist”
${name userlist}

包含模板

include

通过指定一个名称来包含一个模板。

包含名称为“userlist”的模板：
${include userlist}

包含名称为“userlist”的模板,并且向其注入一些数据：
${include userlist:#userList}

引擎与高级功能

理念

模板基本执行机制为回调式，这样做的好处是可兼容各种加载机制，例如：异步载入。
默认缓存设置了name的模板，这其实是一个注册机制，亦可卸载注册过的模板。

主引擎

使用者只需接触主引擎，加载模板引擎后，访问Elapse使用主引擎。

编译一个模板

把模板编译为Template对象。

var templateSource = "hello ${#userName}!";
var template = null;
Elapse.compile({
  source: templateSource,  //模板源代码
  complete: function (_template) {  //编译成功后的回调函数
  template = _template;
  }
});

渲染

渲染一个Template对象。

var data = {
  userName: "小明"
};
var result = Elapse.render({
  data: data,  //注入到模板的数据
  template: template  //模板对象
});

设置模板加载器

一般用于模板include场景，只有设置了name的模板才可能被include，这是因为这个模板在编译的时候被注册到了模板引擎。如果欲include的模板没有被注册到系统，系统就会调用一个加载器尝试加载相应模板。这个加载器需要使用者自行实现。

Elapse.setLoader({
  loader: function (name, setter) {  
  //设置loader函数，当系统需要的模板未注册的话，会调用此方法。
  //name: 需要的模板的名称
  //setter: 接收模板方法。
  $.ajax({
    url: "/getTemplate",
    data: "name=" + name,
    type: "get",
    dataType: "text",
    success: function (source) {
    setter(source);
    }
  });
  }
});

你只需要满足loader的调用即可，只有当以上代码的“setter”参数接收了模板源文件，系统才认为得到了此模板。你对模板加载大可放心，一切都由引擎调度好了。

获取注册的模板

从系统获取注册的模板，如果没有找到相应模板，会调用loader尝试加载此模板。

Elapse.getTemplate({
  name: "userlist",  //要获取的模板名称
  complete: function (template) {  //获取完成回调
  
  }
});

移除注册的模板

从系统移除注册的模板

Elapse.removeTemplate({
  name: "userlist",  //要移除的模板名称
});

从一个模板源直接渲染

如果要多次渲染一个模板，不建议使用这个方法。

var templateSource = "hello ${#userName}";
var data = {
  userName: "小明"
};

Elapse.renderFromSource({
  source: templateSource,  //模板源
  data: data,  //注入到模板的数据
  complete: function (result) {  //渲染完毕的回调，通过参数传递渲染结果。
  alert(result);
  }
});

关于Template对象

Template对象无法直接创建，只能由主引擎生成并统一管理。

Template对象只有一个方法 - render:

var data = {
  userName: "小明"
};

Elapse.getTemplate({
  name: "userlist",  //要获取的模板名称
  complete: function (template) {  //获取完成回调
  var result = template.render({
    data: data
  });
  }
});

项目地址：https://github.com/yinhang/Elapse

分享到QQ

分享到微博