ValleyTpl

当前版本：1.1

ValleyTpl是一款Javascript的模板引擎，是以 StringBased 方式实现的。因此，该引擎目前可以在 Browser 和 NodeJS 两个终端执行。

目前已经加入了对于Express\Koa\koa2三个框架支持，方便开发。

问题：但对于 MVVM 的支持较难。因此，后续改进方向将是：在客户端采用 DomBased 方式实现，以支持 MVVM，而在服务器端采用 StringBased 方式实现。

使用

初始化

npm i
npm test

Run in Browser

生成浏览器引用文件：valleytpl.js和valleytpl.min.js

npm run build:web

ValleyTpl引入

<script src="dist/valleytpl.js"></script>
<script src="dist/valleytpl.min.js"></script>

设置缓存

vtpl.useCache = true; // 默认值为true，设置为false时缓存不生效，缓存目前为页面级别

调用

vtpl(tpl, data);

Run in NodeJS

环境

NoedeJS > 8.0

生成vtpl-node.js

npm run build:node

引用

const vtpl = require('./dist/index.js');

或者

npm i valley-tpl
const vtpl = require('valley-tpl');

调用

// run in async function
let tplContent = await vtpl.prepareTpl(tpl);
vtpl(tplContent, data);

或者

vtpl.prepareTpl(tpl).then(tplContent => vtpl(tplContent, data));

设置

vtp.setConfig({
  extension, // 扩展名，默认为xtpl
  encoding, // 编码格式，默认为utf-8
  useCache, // 默认为true，即使用cache
})

API

0. 注释

{* ... *} // 块注释
*** ... // 行注释

1. 变量

{{name}} // 变量输出
{{name|filter}} // 过滤器
{{name|filter:1,"a"}} // 含有输入的过滤器，name为filter的第一个输入值

增加过滤器

vtpl.register('functionName', function)

删除过滤器

vtpl.unregister('functionName')

已有过滤器

* htmlspecialchars // 将特殊字符转换为 HTML 实体
* datestr // 根据要求提供时间展示

2. 判断

if ... else if ... else

{{if a === 1}}
  ...
{{elseif b === 1}}
  ...
{{else}}
  ...
{{/if}}

3. 循环

for

{{for i = 0; i < list.length; i ++}}
  ...
{{/for}}

each

{{each list as item , index}}
  ...
{{/each}}

4. 不执行代码片段

hack

所有被hack包裹的片段将不执行，方便在一个模板中同时写浏览器模板和服务器模板

{{hack}}
  ...
{{/hack}}

5. 模板的继承

extends/block //类似于smarty的继承

父模板

{{extends parent}}
  ...
{{block block_name}}{{/block}}

子模板

{{block block_name}}
 ...
{{/block}}

6.模板引用

引用模板common.tpl

{{include common}}

对于NodeJS框架的支持

支持Express

可以使用vtpl-express

安装

npm i --save vtpl-express

使用

app.set('view engine', 'vtpl');
app.set('views', './views');
app.set('view encoding', 'utf-8'); // 设定文件编码格式
app.set('view cache', true); // 设定是否使用cache
app.get('/', function(req, res){
  res.render(tpl, data, filters);
});