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

青旅半醒 2023-07-18 02:52 4阅读 0赞

# 一、前言 #

随着前端业务的不断发展，页面交互逻辑的不断提高，让数据和界面实现分离渐渐被提了出来。JavaScript的MVC思想也流行了起来，在这种背景下，基于node.js的模板引擎也随之出现。

## 什么是模板引擎？ ##

它用于解析动态数据和静态页面所生成的视图文件，将原本静态的数据变为动态，快速地实现页面交互；  
目前使用较广的模板引擎有以下几种：Jade / Pug、EJS、Handlebars。

## jade模板引擎 ##

jade模板引擎相较于原来的html会显得更加简洁，它将标签原本的"<>"符号去掉，用括号代替，层级使用tab缩进来分，并且也支持js语法；

# 二、jade的基本使用 #

安装jade：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>cnpm install jade --save</code> </td> 
 </tr> 
 </tbody> 
</table>

在程序中引入jade：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>app.set(</code><code>'views'</code><code>,</code><code>"public"</code><code>);&nbsp;&nbsp;</code><code>//设置视图的对应目录</code> <code>app.set(</code><code>"view engine"</code><code>,</code><code>"jade"</code><code>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//设置默认的模板引擎</code> <code>app.engine(</code><code>'jade'</code><code>, require(</code><code>'jade'</code><code>).__express);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定义模板引擎</code> </td> 
 </tr> 
 </tbody> 
</table>

特定路由渲染：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>app.use(</code><code>"/"</code><code>,</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.render(</code><code>"index.jade"</code><code>);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

完整实例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>const express=require(</code><code>"express"</code><code>);</code> <code>const jade=require(</code><code>"jade"</code><code>);</code> <code>const fs=require(</code><code>'fs'</code><code>);</code> <code>var</code>&nbsp;<code>app=express();</code> &nbsp; <code>//引用jade</code> <code>app.set(</code><code>'views'</code><code>,</code><code>"public"</code><code>);&nbsp;&nbsp;</code><code>//设置视图的对应目录</code> <code>app.set(</code><code>"view engine"</code><code>,</code><code>"jade"</code><code>);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//设置默认的模板引擎</code> <code>app.engine(</code><code>'jade'</code><code>, jade.__express);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//定义模板引擎</code> &nbsp; <code>//获取jade文件</code> <code>var</code>&nbsp;<code>str=jade.renderFile(</code><code>"./public/index.jade"</code><code>,{pretty:</code><code>true</code><code>});</code> <code>console.log(str);</code> &nbsp; <code>app.use(</code><code>"/"</code><code>,</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.render(</code><code>"index.jade"</code><code>);</code> <code>});</code> &nbsp; <code>app.listen(8080);</code> </td> 
 </tr> 
 </tbody> 
</table>

由上面的app.set('views',"public");可知，这里将jade文件放在了public文件夹下：

![format_png][]

在执行res.render时，会自动渲染public中的index.jade文件，之后转换为HTML5进行dom渲染显示。

# 三、jade基础语法 #

## 1、jade对很多html操作进行了简化，如下： ##

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>html</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>head</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>style</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div(</code><code>class</code><code>=</code><code>"content"</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>h1 正文</code> </td> 
 </tr> 
 </tbody> 
</table>

了解过html语句的，从结构上一定会发现，它将原本的双标签省略了，尖括号也不见了，而层级的划分则由缩进实现，默认的，jade会把几乎所有缩进后的字母变为标签(行内元素)。以下代码会变为：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>&lt;html&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;style&gt;&lt;/style&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"content"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;h1&gt;正文&lt;/h1&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<div class="content"></div>也将用div(class="content")代表，简化了代码的书写；

## 2、“|”符号的作用 ##

有时我们想让我们的标签成为文字，那么“|”成为了绝好的工具：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>div(</code><code>class</code><code>=</code><code>"content"</code><code>,id=</code><code>"content"</code><code>)</code> <code>　　| center</code> </td> 
 </tr> 
 </tbody> 
</table>

我们可以看到，他将center作为文字原封不动的写入了html中，而不是作为一个标签渲染。  
　　当然我们用它来转换js语句：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>script</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>|&nbsp;</code><code>var</code>&nbsp;<code>cli = document.getElementById(</code><code>"content"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>| cli.onclick=</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>|&nbsp;&nbsp; alert(</code><code>"aaa"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>| }</code> </td> 
 </tr> 
 </tbody> 
</table>

他将会变为：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>cli = document.getElementById(</code><code>"content"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cli.onclick=</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"aaa"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 3、识别js语句： ##

可以通过 script. 来识别js语法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>script.</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>cli = document.getElementById(</code><code>"content"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cli.onclick=</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"aaa"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

他也会变为：

我们可以看到，相比于用 | 使用script. 更加方便快捷。

## 4、引入其他js文件： ##

想在jade的js标签中引入其他js文件？没错，它也支持。前提请确保他们在同一文件夹下：

![format_png 1][]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>script</code> <code>　　include click.js</code> </td> 
 </tr> 
 </tbody> 
</table>

得到：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;script&gt;</code><code>var</code>&nbsp;<code>cli = document.getElementById(</code><code>"content"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cli.onclick=</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"aaa"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 5、表达式 ##

“-”允许我们直接写js语法，在变量调用时，通过 \#\{a+b\} 或 div=a+b 进行：

会得到：

## 6、for循环： ##

"-"也可以用于循环语句的使用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>html</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>head</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-</code><code>var</code>&nbsp;<code>arr=0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>i=5;i&gt;arr;i--)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div=i</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div the number =</code>&nbsp;<code>#{i}</code> </td> 
 </tr> 
 </tbody> 
</table>

得到：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;html&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;head&gt;&lt;/head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;5&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;4&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;3&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;2&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;1&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;the number = 0&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 7、case ，when ##

类似于switch case语句：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>html</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>head</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-&nbsp;</code><code>var</code>&nbsp;<code>test =&nbsp;</code><code>"汉子"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-</code><code>var</code>&nbsp;<code>none =&nbsp;</code><code>"无"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div The word is</code>&nbsp;<code>#{test}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code>&nbsp;<code>test</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>when&nbsp;</code><code>"a"</code><code>: div the when is a</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>when&nbsp;</code><code>"b"</code><code>: div the second is b</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>when&nbsp;</code><code>"汉子"</code><code>: div the Third is 汉子</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>default</code><code>: The words is</code>&nbsp;<code>#{none}</code> </td> 
 </tr> 
 </tbody> 
</table>

得到：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;html&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;head&gt;&lt;/head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;The word is 汉子。&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;the Third is 汉子&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

类似于switch case，只执行when中与case对应的代码块，在匹配后面用 : 来作为要执行的代码，后面跟上标签和对应语句

## 8、if else条件判断 ##

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>html</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>head</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-</code><code>for</code><code>(</code><code>var</code>&nbsp;<code>i=12;i&gt;0;i--)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-</code><code>if</code><code>(i%2==0)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div(style={background:</code><code>'#eee'</code><code>,width:</code><code>'100%'</code><code>,height:</code><code>'20px'</code><code>,color:&nbsp;</code><code>'#333'</code><code>}) 偶数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-</code><code>else</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div(style={background:</code><code>'#333'</code><code>,width:</code><code>'100%'</code><code>,height:</code><code>'20px'</code><code>,color:&nbsp;</code><code>'#eee'</code><code>}) 奇数</code> </td> 
 </tr> 
 </tbody> 
</table>

得到：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 </td> 
 <td> <code>&lt;html&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;head&gt;&lt;/head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#eee;width:100%;height:20px;color:#333"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 偶数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#333;width:100%;height:20px;color:#eee"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 奇数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#eee;width:100%;height:20px;color:#333"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 偶数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#333;width:100%;height:20px;color:#eee"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 奇数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#eee;width:100%;height:20px;color:#333"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 偶数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#333;width:100%;height:20px;color:#eee"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 奇数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#eee;width:100%;height:20px;color:#333"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 偶数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#333;width:100%;height:20px;color:#eee"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 奇数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#eee;width:100%;height:20px;color:#333"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 偶数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#333;width:100%;height:20px;color:#eee"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 奇数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#eee;width:100%;height:20px;color:#333"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 偶数&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div style=</code><code>"background:#333;width:100%;height:20px;color:#eee"</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp; 奇数&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 9、style的写法： ##

在对style样式进行修改时，与script相同，也可使用 . 对其进行编辑，之后对不同的标签在其后面加\{\}，大括号里写css语句1，并使用 ; 隔开

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>html</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>head</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>meta(charset=</code><code>"utf-8"</code><code>)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>title jade测试页面</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>style.</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body{margin:0;padding:0}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{width: 100px;height: 100px;background:</code>&nbsp;<code>#ccc;text-align: center;line-height: 100px;margin: 10px auto}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div.last{clear:left}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-</code><code>var</code>&nbsp;<code>a=0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>while</code>&nbsp;<code>a&lt;12</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>a%2==0 &amp;&amp; a!=0</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div.last=a++</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>else</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div=a++</code> </td> 
 </tr> 
 </tbody> 
</table>

得到：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> 
 <td> <code>&lt;html&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;meta charset=</code><code>"utf-8"</code><code>/&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;jade测试页面&lt;/title&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;style&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body{margin:0;padding:0}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{width: 100px;height: 100px;background:</code>&nbsp;<code>#ccc;text-align: center;line-height: 100px;margin: 10px auto}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div.last{clear:left}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/style&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;0&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;1&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"last"</code><code>&gt;2&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;3&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"last"</code><code>&gt;4&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;5&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"last"</code><code>&gt;6&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;7&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"last"</code><code>&gt;8&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;9&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&nbsp;</code><code>class</code><code>=</code><code>"last"</code><code>&gt;10&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;11&lt;/div&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 10、Mixin ##

Mixin的作用是对模块的复用，当重复代码有不同内容时，起作用就来了：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>-&nbsp;</code><code>var</code>&nbsp;<code>num = 0;</code> <code>mixin node</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div The number&nbsp;</code><code>in</code>&nbsp;<code>mixin node is</code>&nbsp;<code>#{num++}</code> <code>+node()</code> <code>+node()</code> <code>+node()</code> <code>div At last, the number&nbsp;</code><code>in</code>&nbsp;<code>mixin node is</code>&nbsp;<code>#{num++}</code> </td> 
 </tr> 
 </tbody> 
</table>

得到：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>&lt;div&gt;The number&nbsp;</code><code>in</code>&nbsp;<code>mixin node is 0&lt;/div&gt;</code> <code>&lt;div&gt;The number&nbsp;</code><code>in</code>&nbsp;<code>mixin node is 1&lt;/div&gt;</code> <code>&lt;div&gt;The number&nbsp;</code><code>in</code>&nbsp;<code>mixin node is 2&lt;/div&gt;</code> <code>&lt;div&gt;At last, the number&nbsp;</code><code>in</code>&nbsp;<code>mixin node is 3&lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

以上则是jade的一些常用语法，如果平常使用jade作为开发，那么这些是非常基础的，也希望大家有所体会

[format_png]: /images/20230528/65156ddb642f4e209f5e3597792a9ae1.png
[format_png 1]: /images/20230528/2995169295194d738b897496c553c613.png