Elapse 开源免费轻量级的 JavaScript 模版引擎 - 文章教程

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

发布于 2019-10-20 字数 8077 浏览 1175 评论 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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0