Express全系列教程之(十)：jade模板引擎
1、前言
随着前端业务的不断发展，页面交互逻辑的不断提升，让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来，在这种背景下，基于node.js的模板引擎也随之出现。javascript
什么是模板引擎？
它用于解析动态数据和静态页面所生成的视图文件，将本来静态的数据变为动态，快速地实现页面交互；
目前使用较广的模板引擎有如下几种：Jade / Pug、EJS、Handlebars。css
jade模板引擎
jade模板引擎相较于原来的html会显得更加简洁，它将标签本来的"<>"符号去掉，用括号代替，层级使用tab缩进来分，而且也支持js语法；html
2、jade的基本使用
安装jade：前端
cnpm install jade --save
在程序中引入jade：java
app.set('views',"public"); //设置视图的对应目录
app.set("view engine","jade"); //设置默认的模板引擎
app.engine('jade', require('jade').__express); //定义模板引擎
特定路由渲染：node
app.use("/",function(req,res){
res.render("index.jade");
});
完整实例：express
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文件夹下：npm
在执行res.render时，会自动渲染public中的index.jade文件，以后转换为HTML5进行dom渲染显示。app
3、jade基础语法
一、jade对不少html操做进行了简化，以下：
html head style body div(class="content") h1 正文
了解过html语句的，从结构上必定会发现，它将本来的双标签省略了，尖括号也不见了，而层级的划分则由缩进实现，默认的，jade会把几乎全部缩进后的字母变为标签(行内元素)。如下代码会变为：dom
<html>
<head>
<style></style>
</head>
<body>
<div class="content">
<h1>正文</h1>
</div>
</body>
</html>
<div class="content"></div>也将用div(class="content")表明，简化了代码的书写；
二、“|”符号的做用
有时咱们想让咱们的标签成为文字，那么“|”成为了绝好的工具：
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>
三、识别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. 更加方便快捷。
四、引入其余js文件：
想在jade的js标签中引入其余js文件？没错，它也支持。前提请确保他们在同一文件夹下：
script include click.js
获得：
<script>var cli = document.getElementById("content");
cli.onclick=function(){
alert("aaa");
}
</script>
五、表达式
“-”容许咱们直接写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>
六、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>
七、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对应的代码块，在匹配后面用 : 来做为要执行的代码，后面跟上标签和对应语句
八、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>
九、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>
十、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. Express全系列教程之(十)：jade模板引擎
- 2. Express全系列教程之(十)：渲染jade模板引擎
- 3. Express全系列教程之(十一)：渲染ejs模板引擎
- 4. Express---jade模板引擎(一)
- 5. Express---jade模板引擎(二)
- 6. JADE模板引擎教程
- 7. Jade模板引擎教程
- 8. express 应用模板引擎jade,ejs
- 9. 模板引擎之-jade
- 10. Jade模板引擎入门教程
- 更多相关文章...
- • Maven 项目模板 - Maven教程
- • Eclipse 代码模板 - Eclipse 教程
- • Java 8 Stream 教程
- • YAML 入门教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面试的几个实用小技巧，不妨看看！
- 2. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 3. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 4. 如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 5. Mac OS非兼容Windows软件运行解决方案——“以VMware & Microsoft Access为例“
- 6. 封装 pyinstaller -F -i b.ico excel.py
- 7. 数据库作业三ER图待完善
- 8. nvm安装使用低版本node.js(非命令安装)
- 9. 如何快速转换图片格式
- 10. 将表格内容分条转换为若干文档
欢迎关注本站公众号,获取更多信息
