一、前言

随着前端业务的不断发展，页面交互逻辑的不断提高，让数据和界面实现分离渐渐被提了出来。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文件夹下：

在执行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文件？没错，它也支持。前提请确保他们在同一文件夹下：

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作为开发，那么这些是非常基础的，也希望大家有所体会

Express全系列教程之(十)：jade模板引擎的更多相关文章

Express全系列教程之(十一)：渲染ejs模板引擎
一.简介相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用.因此其学习成本是很低的.您也可参考ejs官网:https ...
Express全系列教程之(一)：Express的安装和第一个程序
前言 ndoe.js,一个基于javsscript运行环境的服务器语言,它的出现使得javascript有能力去实现服务器操作.在gitHub上ndoe.js的star数已接近6万,可见其受欢迎程度: ...
Express全系列教程之(九)：将session上传至mysql数据库
一.简介实际引用中,有些公司在不同地区会设置不同服务器,因此就需要用到nginx以实现负载均衡,这时,将session数据保存至数据库就成为了需要面对的问题,我们以MySQL数据库为例,看看他是如何 ...
Express全系列教程之(八)：session的基本使用
一.关于session session是另一种记录客户状态的机制,与cookie保存在客户端浏览器不同,session保存在服务器当中:当客户端访问服务器时,服务器会生成一个session对象,对象中 ...
Express全系列教程之(七)：cookie的加密
一.关于cookie加密 cookie加密是让客户端用户无法的值cookie明文信息,是数据安全的重要部分:一般的我们可以在保存cookie时对cookie信息进行加密,或者在res.cookie中对 ...
Express全系列教程之(六)：cookie的使用
一.关于Cookie 在我们关闭一个登录过的网址并重新打开它后,我们的登录信息依然没有丢失:当我们浏览了商品后历史记录里出现了我们点击过的商品:当我们推回到首页后,推荐商品也为我们选出了相似物品:事实 ...
Express全系列教程之(五)：Express的中间件
一.中间件从字面意思,我们可以了解到它大概就是做中间代理操作,事实也是如此:大多数情况下,中间件就是在做接收到请求和发送响应中间的一系列操作.事实上,express是一个路由和中间件的web框架,E ...
Express全系列教程之(四)：获取Post参数的两种方式
一.关于POST请求 post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新.相比于get请求,post所 ...
Express全系列教程之(三)：get传参
一.关于get请求一般在网站开发中,get都用作数据获取和查询,类似于数据库中的查询操作,当服务器解析前台资源后即传输相应内容:而查询字符串是在URL上进行的,形如: http://localhos ...

随机推荐

vue-cli脚手架build目录中的karma.conf.js配置文件
本文系统讲解vue-cli脚手架build目录中的karma.conf.js配置文件这个配置文件是命令 npm run unit 的入口配置文件,主要用于单元测试这条命令的内容如下 "c ...
Java-马士兵设计模式学习笔记-工厂模式-模拟Spring读取Properties文件
一.目标:读取properties文件,获得类名来生成对象二.类 1.Movable.java public interface Movable { void run(); } 2.Car.java ...
51NOD1052 最大M字段和
传送门分析一眼看去我们自然会想到dp[i][j][k]表示区间[i,j]中选k个子段的最大值.然后我们考虑降去一维.我们设dp[i][j]表示考虑了前i个数,在选了a[i]的情况下共有j个子段的最 ...
WOJ 39 塌陷的牧场
感觉……做克老师的题,都很神仙…… 还有去年一个人坐在家里写挂60分算法的惨痛记忆,凭借着一点点记忆重新写这道题. 感觉这并查集真的很神仙,仍然不会算最后的α的复杂度……自己想感觉无论如何都要挂个lo ...
几种jar转exe方法的比较
原摘自:https://blog.csdn.net/uikoo9/article/details/7458666 几种jar转exe方法的比较 2012年04月13日 17:33:07 阅读数:153 ...
Ubuntu 切换到桌面快捷键设置
设置完以上步骤后,这接windows系统键+d,即可切换到桌面. ps:按Alt+Tab键,可以切换到自己想要的图标进程.
Eclipse报错could not write metadata for '/remotesystemstempfiles'
1. windows-Preferences 中,在search中输入remote,取消选中reopen remote systems view to previous state'. 2. win ...
python运算优先级
运算符优先级(下面的优先级高) 运算符描述 lambda Lambda表达式 or 布尔“或” and 布尔“与” not x 布尔“非” in not in 成员测试 is ...
【LeetCode】 Longest Common Prefix
Longest Common Prefix Write a function to find the longest common prefix string amongst an array of ...
[转]ORA-12516, TNS:listener could not find available handler with matching protocol stack
转至:http://blog.csdn.net/MichaelSrc/article/details/6760247 1.查看当前连接进程数 SQL>select count(*) from v ...

Express全系列教程之(十)：jade模板引擎