认识一下swig前端模板引擎

2019-04-234552次阅读swig

swig官网上的自我介绍是基于Node.js和浏览器的JavaScript模板引擎。下面介绍的是一些常用的基本语法,不过我还是极力推荐仔细阅读siwg官网教程。

 

swig的安装

通过NPM:

npm install swig --save

swig常用的基本语法

1.变量

传递给模板的变量可以使用双括号输出。

{{ name }}

访问对象的属性可以使用点符号或中括号来完成。以下示例等同:

{{ foo.bar }}
{{ foo['bar'] }}

中括号符号遵循与JavaScript相同的规则。如果某个键包含非字母数字字符,则必须使用中括号表示法进行访问,而不是使用点表示法。

{{ foo['chicken-tacos'] }}

如果一个变量没有定义,将被输出空字符串。

2.模板继承

Swig使用extends和block来实现模板继承。

首先我们定义一个模板layout.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock  %}</title>
    {% block head %}{% endblock  %}
</head>
<body>
    {% block content %}{% endblock  %}
</body>
</html>

这个模板里面我们定义了三个block块,子模板可以对这三个block继承,然后我们写一个index.html继承这个模板。

{% extends './layout.html' %}
{% block title %}网站首页{% endblock %}
{% block content %}
    <h1>hello swig</h1>
{% endblock %}

注意我这里并没有复写{% block head %}{% endblock %}这个块,

也就是说我们可以在layout.html模板页面里面定义很多block块,而子页面可以有选择性的实现块继承。

3.parent

将父模板中同名块内容注入当前块中。

{% extends "./foo.html" %}
{% block content %}
  My content.
  {% parent %}
{% endblock %}

4.include模板

相对于模板根目录的路径,将一个模板渲染到当前上下文中。

{% include "./includes/header.html" %}

5.注释

解析器简单地忽略注释标记。在您的模板呈现之前,它们将被删除,以便除非他们有权访问您的源代码,否则任何人都无法看到它们。

{#
这是一个评论。
在解析过程中将被完全剥离和忽略。即生成后模版内不可见。
#}

6.if判断

在标签内使用,如果if语句返回false ,则直到这个标签之后的代码块才会被呈现。

{% if false %}
  statement1
{% else %}
  statement2
{% endif %}
// => statement2

7.if-else判断

{% if false %}
  Tacos
{% elseif true %}
  Burritos
{% else %}
  Churros
{% endif %}
// => Burritos

8.for循环

// arr = [1, 2, 3]
{ % for key, val in arr % }

{ { key } } -- { { val } }

{ % endfor % }

for循环内置变量:

  • loop.index:当前循环的索引(1开始)

  • loop.index0:当前循环的索引(0开始)

  • loop.revindex:当前循环从结尾开始的索引(1开始)

  • loop.revindex0:当前循环从结尾开始的索引(0开始)

  • loop.key:如果迭代是对象,是当前循环的键,否则同 loop.index

  • loop.first:如果是第一个值返回 true

  • loop.last:如果是最后一个值返回 true

  • loop.cycle:一个帮助函数,以指定的参数作为周期

使用方法:

// obj = { one: 'hi', two: 'bye' };
{% for x in obj %}
  {% if loop.first %}<ul>{% endif %}
  <li>{{ loop.index }} - {{ loop.key }}: {{ x }}</li>
  {% if loop.last %}</ul>{% endif %}
{% endfor %}
// => <ul>
//    <li>1 - one: hi</li>
//    <li>2 - two: bye</li>
//    </ul>

9.set命令

用来设置一个变量,在当前上下文中复用

{% set foo = [0, 1, 2, 3, 4, 5] %}
 {% for num in foo %}
    <li>{{ num }}</li>
{% endfor %}

10.强大的内置过滤器

  • add(value):使变量与value相加,可以转换为数值字符串会自动转换为数值。

  • addslashes:用 \ 转义字符串

  • capitalize:大写首字母

  • date(format[, tzOffset]):转换日期为指定格式

  • format:格式

  • tzOffset:时区

  • default(value):默认值(如果变量为undefined,null,false)

  • escape([type]):转义字符

  • 默认: &, <, >, ", '

  • js: &, <, >, ", ', =, -, ;

  • first:返回数组第一个值

  • join(glue):同[].join

  • json_encode([indent]):类似JSON.stringify, indent为缩进空格数

  • last:返回数组最后一个值

  • length:返回变量的length,如果是object,返回key的数量

  • lower:同''.toLowerCase()

  • raw:指定输入不会被转义

  • replace(search, replace[, flags]):同''.replace

  • reverse:翻转数组

  • striptags:去除html/xml标签

  • title:大写首字母

  • uniq:数组去重

  • upper:同''.toUpperCase

  • url_encode:同encodeURIComponent

  • url_decode:同decodeURIComponemt

例如大写首字母:

{{ name|title }}

swig常用的API

1.Swig选项对象

Swig选项对象。该对象可以传递给许多API级别的Swig方法来控制引擎的各个方面。所有密钥都是可选的。

属性

  • autoescape:(boolean)控制是否会自动转义变量输出以获取安全的HTML输出。默认为true。在变量语句中执行的函数不会被自动转义。你的应用程序/功能应该照顾他们自己的自动转义。

  • varControls:(array)打开和关闭变量的控制。默认为['{{', '}}']。

  • tagControls:(array)打开和关闭标签控件。默认为['{%', '%}']。

  • cmtControls:(array)打开和关闭评论控件。默认为['{#', '#}']。

  • locals:(object)要传递给所有模板的默认变量上下文。

  • cache:(CacheOptions)模板的缓存控制。默认保存在'memory'。发送false到禁用。发送一个对象get和set函数来定制。

  • loader:(TemplateLoader)Swig将用于加载模板的方法。默认为文件系统加载器swig.loaders.fs。

 

2.swig.setDefaults

为SWIG环境设置默认值。

swig.setDefaults({ 
    cache: false,//禁用模板缓存。默认将所有模板保存到内存中
    loader: swig.loaders.fs(),//默认文件系统加载器
    locals: {//为所有模板设置全局可访问的方法上下文,
        now:function(){//允许您打印当前日期
            return new Date(); 
        } 
    }
});

loader:配置Swig以使用swig.loaders.fs(默认文件系统加载器)或swig.loaders.memory模板加载器

// 允许基本路径的文件系统加载器
// 这样,您就不会在模板引用中使用相对URL。
swig.setDefaults({ loader: swig.loaders.fs(__dirname + '/templates') });

locals:要传递给所有模板的默认变量上下文,变量也可以是 JavaScript函数。

var swig = require('swig');
var locals = {
        user:{
            name : 'robert',
            age : 24
        },
        mystuff: function(){
            return 'Things!';
        }
    };
swig.render('我叫{{user.name}},年龄是{{user.age}}。这是{{ mystuff() }}', { locals: locals });

3.swig.render(string,Swig选项对象)

编译并呈现最终输出的模板字符串。在呈现源字符串时,应在选项对象中指定文件路径,以便扩展、包含和导入正常工作。通过在选项参数中添加{ filename: '/absolute/path/to/mytpl.html' }来实现这一点。

swig.render('{{ tacos }}', { locals: { tacos: 'Tacos!!!!' }});

4.swig.renderFile( pathName , locals , cb )

编译并渲染最终输出的模板文件。这对于像Exp.js这样的库是非常有用的。

cd:异步回调函数。如果没有提供,编译器将同步运行。

swig.renderFile('./template.html', {}, function (err, output) {
  if (err) {
    throw err;
  }
  console.log(output);
});
上一篇: 深入了解Element​.class​List  下一篇: gulp4构建任务实例优化一  

认识一下swig前端模板引擎相关文章