写在前面
目前nodejs的模板引擎有很多,各自有各自的优缺点。在本篇博客中,我会初步介绍其中的两个主流模板引擎之一:Jade。
EJS 和 Jade的争论一直存在,可以参考下面这篇知乎:
关于nodejs的模板引擎,如何选择 EJS 和 Jade?
jade简介
jade有两个特点:
简洁:它独特的缩进语法使得它特别的简洁,比一般的模板引擎文件大小要小得多。
破坏:如果你选择了jade,那么你就只能用jade了,它是侵入式的,没有ejs那么温和。
使用jade
引入jade
const jade=require('jade');
使用jade
//对字符串进行渲染
var str=jade.render('html');
//对文件进行渲染
var str=jade.renderFile('./views/8.jade', {pretty: true});
//pretty:true表示使用缩进
jade基础
html结构
它是根据缩进来判断结构关系的,这样做单写一个html,head等,使得代码更加的简洁。
html 编译后 <html>
head <head>
style <style></style>
script <script></script>
body <body>
div <div>
ul <ul>
li <li></li>
li <li></li>
li <li></li>
div </ul>
</div>
<div></div>
</body>
</html>
<>内属性和值
它是根据()来处理的
script(src="a.js")
link(href="a.css",rel="stylesheet")
input(type="text",id="txt1",value="abc")
编译后
<script src="a.js"></script>
<link rel="stylesheet" href="a.css">
<input type="text" id="txt1" value="abc">
<><>间内容
a(href="http://www.baidu.com/") 百度
p(id="cs") 哈哈
编译后
<a href="http://www.baidu.com">百度</a>
<p id="cs">哈哈</p>
<><>嵌套
html
head
style
body
div aaa
span bbb
编译后
<html>
<head>
<style></style>
</head>
<body>
<div>aaa<span>bbb</span></div>
</body>
</html>
style(json写法)
div(style="width:200px;height:200px;background:red")
div(style= {width: '200px', height: '200px', background: 'red'})
编译后
<div style="width:200px;height:200px;background:red"></div>
<div style="width:200px;height:200px;background:red"></div>
class(数组写法)
div(class="aaa left-warp active")
div(class= ['aaa', 'left-warp', 'active'])
编译后
<div class="aaa left-warp active"></div>
<div class="aaa left-warp active"></div>
id&class(简写)
div.box
div#div1
编译后
<div class="box"></div>
<div id="div1"></div>
&attributes
div&attributes({title: 'aaa', id: 'div1' class:'aa'})
编译后
<div id="div1" class="aa" title="aaa"></div>
jade进阶
|标记
在jade中,使用|表明其后一行的代码原样输出,不需要解析
html
head
script
|window.onload=function (){
| var oBtn=document.getElementById('btn1');
| oBtn.onclick=function (){
| alert('aaaa');
| };
|};
body
|abc
|ddd
|213
编译后
<html>
<head>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('aaaa');
};
};
</script>
</head>
<body>
abc
ddd
213
</body>
</html>
.标记
.是|的增强版,.表明其后的代码原样输出,不需要解析
html
head
script.
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('aaaa');
};
};
body
|abc
|ddd
|213
编译后
<html>
<head>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('aaaa');
};
};
</script>
</head>
<body>
abc
ddd
213
</body>
</html>
include
使用include可以引入外部js文件
html
head
script
include a.js
body
|abc
|ddd
|213
编译后
<html>
<head>
<script>
window.onload=function (){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('aaaa');
};
};
</script>
</head>
<body>
abc
ddd
213
</body>
</html>
#{}标记
#{name}中name表示使用外部传入的值。
后台js代码
const jade=require('jade');
console.log(jade.renderFile('./cs.jade', {pretty: true, a: 12, b: 5}));
jade代码
html
head
body
div 我的名字:#{a+b}
编译后
<html>
<head></head>
<body>
<div>我的名字:17</div>
</body>
</html>
style$class传值
后台js代码
const jade=require('jade');
console.log(jade.renderFile('./cs.jade', {pretty: true,
json: {width: '200px', height: '200px', background: 'red'},
arr: ['aaa', 'left-wrap']
}));
jade代码
html
head
body
div(style=json)
div(class=arr)
div(class=arr class="active")
编译后
<html>
<head></head>
<body>
<div style="width:200px;height:200px;background:red"></div>
<div class="aaa left-wrap"></div>
<div class="aaa left-wrap active"></div>
</body>
</html>
-标记
-表明其后一行的代码作为script执行,不显示
html
head
body
-var a=12;
-var b=5;
div 结果是:#{a+b}
编译后
<html>
<head></head>
<body>
<div>结果是:17</div>
</body>
</html>
=标志
=标志等价于#{}
html
head
body
span #{a}
span=a
编译后
<html>
<head></head>
<body><span>12</span><span>12</span></body>
</html>
jade高级
循环
使用循环可以动态建立节点,动态赋值
后台js代码
const jade=require('jade');
console.log(jade.renderFile('./cs.jade', {pretty: true,
arr: ['张三', '李四', '王五', '赵六']
}));
jade代码
html
head
body
ul
-for(var i=0;i<arr.length;i++)
li=arr[i]
编译后
<html>
<head></head>
<body>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
</body>
</html>
!标记
!标记作用是防止jade将<>解析为<>
后台js代码
console.log(jade.renderFile('./views/12.jade', {pretty: true,
content: "<h2>你好啊</h2><p>对方水电费色弱威尔士地方</p>"
}));
jade代码
html
head
body
div=content //会将<h2> 输出为<h2> 防止注入攻击
div!=content//会将<h2> 原样输出
if else
使用判断语句可以动态建立节点,动态赋值
html
head
body
-var a=19;
if(a%2==0)
div(style={background:'red'}) 偶数
else
div(style={background:'green'}) 奇数
编译后
<html>
<head></head>
<body>
<div style="background:green">奇数</div>
</body>
</html>
case
类似于js里的switch
html
head
body
-var a=1;
case a
when 0
div aaa
when 1
div bbb
when 2
div ccc
default
|不靠谱
编译后
<html>
<head></head>
<body>
<div>bbb</div>
</body>
</html>
jade实战
功能:通过jade动态生成html页面
后台js代码
const jade=require('jade');
const fs=require('fs');
var str=jade.renderFile('./views/index.jade', {pretty: true});
fs.writeFile('./build/index.html', str, function (err){
if(err)
console.log('编译失败');
else
console.log('成功');
});
jade代码
doctype
html
head
meta(charset="utf-8")
title jade测试页面
style.
div {width:100px;height:100px;background:#CCC;text-align:center;line-height:100px;float:left;margin:10px auto}
div.last {clear:left}
body
-var a=0;
while a<12
if a%4==0 && a!=0
div.last=a++
else
div=a++
生成的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jade测试页面</title>
<style>
div {width:100px;height:100px;background:#CCC;text-align:center;line-height:100px;float:left;margin:10px auto}
div.last {clear:left}
</style>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="last">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="last">8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</body>
</html>
总结
至此,我就把jade的写法规则,常用语法全部讲完了。
jade很灵活,语法不难但是很繁杂,希望你能把所有的代码自己运行一遍。
那样,你对jade的理解和使用会有很大的提升的