相对于 jade, 我还是更喜欢 swig 前端模板引擎, jade 虽然语法简练高效了不少, 但是在我这最大的问题是
他没有一个 html 该有的样子...
所以我还是决定使用 swig, 页面结构, 样子都是熟悉的样子, 使用起来顺手了许多.
很多朋友也在纠结二者的优缺点, 这个根据需求因人而异吧
这是两者的比较
http://vschart.com/compare/swig-template-engine/vs/jade-template-engin
下面我们一起学习下 swig 这个前端模板引擎
swig 的简单介绍
swig 是 JS 模板引擎, 它有如下特点:
支持大多数主流浏览器.
表达式兼容性好.
面向对象的模板继承.
将过滤器和转换应用到模板中的输出.
可根据路劲渲染页面.
支持页面复用.
支持动态页面.
可扩展, 可定制.
一. swig 的安装
npm install swig --save
二. 和 express 框架集成
- app.js
- var express = require('express');
- var swig = require('swig');
- var path = require('path')
- var app = express();
- var port = process.env.PORT || 4000
- // 设置 swig 页面不缓存
- swig.setDefaults({
- cache: false
- })
- app.set('view cache', false);
- app.set('views','./views/pages/');
- app.set('view engine','html');
- app.engine('html', swig.renderFile);
- app.listen(port);
- console.log('server is started at http://localhost:'+port);
- //index page
- app.get('/',function(req, res){
- res.render('index',{
- title:'首页',
- content: 'hello swig'
- })
- })
- index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>{{ title }}</title>
- </head>
- <body>
- {{ content }}
- </body>
- </html>
然后测试运行
node app.js
在浏览器输入: http://localhost:4000, 执行效果如下
浏览器运行. png
三. 基本用法
1. 变量
{{ name }}
这里需要注意的是前后两端都要有空格, 这样 {{name}} 写就会报错
2. 属性
{{ student.name }}
3. 模板继承
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 %} index {% endblock %}
- {% block content %}
- <div>
- <h1>hello swig</h1>
- <div>
- {% endblock %}
注意我这里并没有复写 {% block head %}{% endblock %} 这个块
也就是说我们可以在 layout.html 模板页面里面定义很多 block, 而子页面可以有选择性的实现.
4.include 模板
包含一个模板到当前位置, 这个模板将使用当前上下文
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>{% block title %}{% endblock %}</title>
- {% include "./includes/head.html" %}
- {% block head %}{% endblock %}
- </head>
- <body>
- {% include "./includes/header.html" %}
- {% block content %}{% endblock %}
- </body>
- </html>
5.if 判断
{ % if name === '郭靖' % }
hello 靖哥哥
{ % endif % }
6.if-else 判断
{ % if name === '郭靖' % }
hello 靖哥哥
{ % elseif name === '黄蓉' % }
hello 蓉妹妹
{ % else % }
hello 欧阳峰
{ % endif % }
7.for 循环
先上栗子:
- // arr = [1, 2, 3]
- { % for key, val in arr % }
- <p>{ { key } } -- { { val } }</p>
- { % 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: 一个帮助函数, 以指定的参数作为周期
使用方法:
- // arr = [1, 2, 3]
- { % for key, val in arr % }
- <p>{{ loop.index }} -- {{ key }} -- {{ val }}</p>
- { % endfor % }
8. 强大的内置过滤器
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
使用方法:
例如我们要格式化一个时间, 使用方法和 linux 上的管道命令非常像
{{ birthday|date('Y-m-d') }}
大写首字母
{{ name|title }}
9.set 命令
用来设置一个变量, 在当前上下文中复用
- {% set foo = [0, 1, 2, 3, 4, 5] %}
- {% for num in foo %}
- <li>{{ num }}</li>
- {% endfor %}
参考文献: http://www.iqianduan.net/blog/how_to_use_swig
来源: http://www.jb51.net/article/140182.htm