Express全系列教程之(十)：渲染jade模板引擎
一、前言
随着前台业务的不断发展，页面交互逻辑的不断提高，让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来，在这种背景下，基于node.js的模板引擎也随之出现。
什么是模板引擎？
它用于解析动态数据和静态页面所生成的视图文件，将本来静态的数据变为动态，快速地实现页面交互；
目前使用较广的模板引擎有以下几种：Jade / Pug、EJS、Handlebars。
jade模板引擎
jade模板引擎相较于原来的html会显得更加简洁，它将标签本来的”<>”符号去掉，用括号代替，层级使用tab缩进来分，并且也支持js语法；
二、jade的基本使用
安装jade：
cnpm install jade –save
在程序中引入jade：
app.set(‘views’,”public”);//设置视图的对应目录
app.set(“view engine”,”jade”);//设置默认的模板引擎
app.engine(‘jade’, require(‘jade’).__express);//定义模板引擎
特定路由渲染：
app.use(“/”,function(req,res){
res.render(“index.jade”);
});
完整实例：
const express=require(“express”);
const jade=require(“jade”);
const fs=require(‘fs’);
var app=express();
//引用jade
app.set(‘views’,”public”);//设置视图的对应目录
app.set(“view engine”,”jade”);//设置默认的模板引擎
app.engine(‘jade’, jade.__express);//定义模板引擎
//获取jade文件
var str=jade.renderFile(“./public/index.jade”,{pretty:true});
console.log(str);
app.use(“/”,function(req,res){
res.render(“index.jade”);
});
app.listen(8080);
由上面的app.set(‘views’,”public”);可知，这里将jade文件放在了public文件夹下：
jade地址
在执行res.render时，会自动渲染public中的index.jade文件，之后转换为HTML5进行dom渲染显示。
三、jade基础语法
1、jade对很多html操作进行了简化，如下：
html
????head
????????style
????body
????????div(class=”content”)
????????????h1 正文
理解过html语句的，从结构上肯定会发现，它将本来的双标签省略了，尖括号也不见了，而层级的划分则由缩进实现，默认的，jade会把几乎所有缩进后的字母变为标签(行内元素)。以下代码会变为：
<html>
? ?<head>
? ? ? <style></style>
? ?</head>
? ?<body>
????????<div class=”content”>
????????????<h1>正文</h1>
????????</div>
? ?</body>
</html>
<div class=”content”></div>也将用div(class=”content”)代表，简化了代码的书写；
2、“|”符号的作用
有时我们想让我们的标签成为文字，那么“|”成为了绝好的工具：
div(class=”content”,id=”content”)
????| center
我们可以看到，他将center作为文字原封不动的写入了html中，而不是作为一个标签渲染。
当然我们用它来转换js语句：
script
????| var cli = document.getElementById(“content”);
????| cli.onclick=function(){
????|alert(“aaa”);
????| }
他将会变为：
<script>
? ? var cli = document.getElementById(“content”);
? ? cli.onclick=function(){
? ? ? ? alert(“aaa”);
? ? }
</script>
3、识别js语句：
可以通过 script. 来识别js语法：
script.
????var cli = document.getElementById(“content”);
????cli.onclick=function(){
????????alert(“aaa”);
????}
他也会变为：
<script>
? ? var cli = document.getElementById(“content”);
? ? cli.onclick=function(){
? ? ? ? alert(“aaa”);
? ? }
</script>
我们可以看到，相比于用 | 使用script. 更加方便快捷。
4、引入其余js文件：
想在jade的js标签中引入其余js文件？没错，它也支持。前提请确保他们在同一文件夹下：
引入js
script
????include click.js
<script>var cli = document.getElementById(“content”);
????cli.onclick=function(){
? ? ? ???? alert(“aaa”);
????}
</script>
5、表达式
“-”允许我们直接写js语法，在变量调用时，通过 #{a+b} 或者 div=a+b 进行：
html
????head
????body
????????-var a=10
????????-var b=20
????????div a+b为:#{a+b}
????????div=a+b
会得到：
<html>
????<head></head>
????<body>
????????<div>a+b为:30</div>
????????<div>30</div>
????</body>
</html>
6、for循环：
“-“也可以用于循环语句的使用
html
????head
????body
????????-var arr=0;
????????-for(var i=5;i>arr;i–)
????????????div=i
????????div the number = #{i}
得到：
<html>
????<head></head>
????<body>
????????<div>5</div>
????????<div>4</div>
? ? ? ? <div>3</div>
????????<div>2</div>
????????<div>1</div>
????????<div>the number = 0</div>
????</body>
</html>
7、case ，when
相似于switch case语句：
html
????head
????body
????????- var test = “汉子”
????????-var none = “无”
????????div The word is #{test}
????????case test
????????????when “a”: div the when is a
????????????when “b”: div the second is b
????????????when “汉子”: div the Third is 汉子
????????????default: The words is #{none}
得到：
<html>
????<head></head>
????<body>
????????<div>The word is 汉子。</div>
????????<div>the Third is 汉子</div>
????</body>
</html>
相似于switch case，只执行when中与case对应的代码块，在匹配后面用 : 来作为要执行的代码，后面跟上标签和对应语句
8、if else条件判断
html
????head
????body
????????-for(var i=12;i>0;i–)
????????-if(i%2==0)
????????????div(style={background:’#eee’,width:’100%’,height:’20px’,color: ‘#333’})偶数
????????-else
????????????div(style={background:’#333′,width:’100%’,height:’20px’,color: ‘#eee’})奇数
得到：
<html>
????<head></head>
????<body>
????????<div style=”background:#eee;width:100%;height:20px;color:#333″>? ? 偶数</div>
????????<div style=”background:#333;width:100%;height:20px;color:#eee”>? ? 奇数</div>
????????<div style=”background:#eee;width:100%;height:20px;color:#333″>? ? 偶数</div>
????????<div style=”background:#333;width:100%;height:20px;color:#eee”>? ? 奇数</div>
????????<div style=”background:#eee;width:100%;height:20px;color:#333″>? ? 偶数</div>
????????<div style=”background:#333;width:100%;height:20px;color:#eee”>? ? 奇数</div>
????????<div style=”background:#eee;width:100%;height:20px;color:#333″>? ? 偶数</div>
????????<div style=”background:#333;width:100%;height:20px;color:#eee”>? ? 奇数</div>
????????<div style=”background:#eee;width:100%;height:20px;color:#333″>? ? 偶数</div>
????????<div style=”background:#333;width:100%;height:20px;color:#eee”>? ? 奇数</div>
????????<div style=”background:#eee;width:100%;height:20px;color:#333″>? ? 偶数</div>
????????<div style=”background:#333;width:100%;height:20px;color:#eee”>? ? 奇数</div>
????</body>
</html>
9、style的写法：
在对style样式进行修改时，与script相同，也可使用 . 对其进行编辑，之后对不同的标签在其后面加{}，大括号里写css语句1，并使用 ; 隔开
html
????head
????????meta(charset=”utf-8″)
????????title jade测试页面
????????style.
????????????body{margin:0;padding:0}
????????????div
????????????{width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
????????????div.last{clear:left}
????body
????????-var a=0;
????????while a<12
????????????if a%2==0 && a!=0
????????????????div.last=a++
????????????else
????????????????div=a++
得到：
<html>
? <head>
? ? <meta charset=”utf-8″/>
? ? <title>jade测试页面</title>
? ? <style>
? ? ? body{margin:0;padding:0}
? ? ? div
? ? ? {width: 100px;height: 100px;background: #ccc;text-align: center;line-height: 100px;margin: 10px auto}
? ? ? div.last{clear:left}
? ? </style>
? </head>
? <body>
? ? <div>0</div>
? ? <div>1</div>
? ? <div class=”last”>2</div>
? ? <div>3</div>
? ? <div class=”last”>4</div>
? ? <div>5</div>
? ? <div class=”last”>6</div>
? ? <div>7</div>
? ? <div class=”last”>8</div>
? ? <div>9</div>
? ? <div class=”last”>10</div>
? ? <div>11</div>
? </body>
</html>
10、Mixin
Mixin的作用是对板块的复用，当重复代码有不同内容时，起作用就来了：
– var num = 0;
mixin node
? ? div The number in mixin node is #{num++}
+node()
+node()
+node()
div At last, the number in mixin node is #{num++}
得到：
<div>The number in mixin node is 0</div>
<div>The number in mixin node is 1</div>
<div>The number in mixin node is 2</div>
<div>At last, the number in mixin node is 3</div>
以上则是jade的少量常用语法，假如平时使用jade作为开发，那么这些是非常基础的，也希望大家有所体会
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Express全系列教程之(十)：渲染jade模板引擎
