npm 包 swig-ts 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Swig-ts 是一个模板引擎，将模板和数据结合渲染出 HTML、XML 和更多的文本形式，支持过滤器、逻辑语句和自定义标签等功能，是前端开发中必不可少的一个工具，本文将介绍 Swig-ts 的使用教程。

安装

可使用 npm 安装 swig-ts：

npm install swig-ts

或者，在 HTML 文件头部添加以下代码，使用 CDN 引入 swig-ts：

<script src="https://cdn.bootcdn.net/ajax/libs/swig/1.4.2/swig.min.js"></script>

基本用法

引入 Swig-ts：

var swig = require('swig');

编写模板：

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    ------------------------
-------
------
---------- --------------
-------
-------

渲染模板：

var template = swig.compileFile('../views/index.html');
var output = template({ title: 'Swig-ts', name: 'World' });
console.log(output);

输出结果：

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    ----------------------
-------
------
---------- -----------
-------
-------

过滤器

Swig-ts 支持过滤器，可对数据进行处理，使用 | 符号添加过滤器，如下例：

{{ name|capitalize }}

将 name 变量的首字母大写。

默认提供的过滤器包括：

过滤器名称	作用
`batch`	按数量分批
`capitalize`	首字母大写
`date`	格式化日期
`default`	设置默认值
`json_encode`	转换成 JSON 字符串
`join`	连接字符串中的元素
`length`	数组或字符串的长度
`lower`	转换成小写字母
`replace`	替换字符串
`reverse`	反转数组或字符串
`round`	数值四舍五入
`slice`	截取数组或字符串中的一部分
`sort`	对数组进行排序
`title`	单词首字母大写
`truncate`	截取字符串，如果超出指定长度则加上省略号
`upper`	转换成大写字母
`urlencode`	对字符串进行 URL 编码
`url_decode`	对 URL 编码的字符串进行解码
`raw`	禁止对一段代码进行转换，例如，输出一个带有 script 标签的脚本

自定义过滤器

需要先定义过滤器函数，然后将函数添加到模板引擎中：

function formatPrice(num) {
    return '$' + num.toFixed(2);
}

swig.setFilter('price', formatPrice);

使用时：

{{ price(total_price) }}

控制结构

Swig-ts 支持 if、else、for 等控制结构，如下例：

{% if name %}
    <h1>Hello, {{ name }}!</h1>
{% else %}
    <h1>Hello, World!</h1>
{% endif %}

{% for i in items %}
    <li>{{ i }}</li>
{% endfor %}

自定义标签

Swig-ts 支持自定义标签，需要先定义标签函数，然后将函数添加到模板引擎中：

function formatDate(date, format) {
    // 自定义标签函数内容
}

swig.setTag('date', formatDate);

使用时：

{% date mydate, "YYYY-MM-DD" %}

缓存

Swig-ts 默认会缓存编译后的模板，以提高渲染速度，如果需要刷新缓存，可以调用 swig.invalidateCache() 函数。

结语

Swig-ts 是一个强大的模板引擎，除了上述功能外，还有很多灵活的用法，读者可以参考官方文档进行深入学习。在实际开发中，合理运用模板引擎，可以轻松实现大量的数据渲染和格式化，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055eac81e8991b448dc230