微信客服
微信公众号Express 4.8.x—JADE模版引擎
JADE模版引擎
jade 可以减少编写 html ，下面是个例子：
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.下面是转换后的 html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>基本上jade是以缩进的方式编写，比如：
html head body
转换后的html是：
<html> <head></head> <body></body> </html>
编写网页 javascript 代码
head
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}转换后的html
<head>
<script type="text/javascript">
if (foo) {
bar(1 + 5)
}
</script>
</head>单行内容
p You are amazing
转换后
<p> You are amazing </p>
多行内容
p. Jade is a terse and simple templating language with a strong focus on performance and powerful features.
注意 p. 后面的 . 。
循环
尽管已经支持 JavaScript 原生代码，Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是 each, 这种形式：
each VAL[, KEY] in OBJ
一个遍历数组的例子 ：
- var items = ["one", "two", "three"] each item in items li= item
渲染为:
<li>one</li> <li>two</li> <li>three</li>
遍历一个数组同时带上索引：
items = ["one", "two", "three"]
each item, i in items
li #{item}: #{i}渲染为:
<li>one: 0</li> <li>two: 1</li> <li>three: 2</li>
遍历一个数组的键值：
obj = { foo: 'bar' }
each val, key in obj
li #{key}: #{val}将会渲染为：<li>foo: bar</li>
Jade 在内部会把这些语句转换成原生的 JavaScript 语句，就像使用 users.forEach(function(user){, 词法作用域和嵌套会像在普通的 JavaScript 中一样：
each user in users each role in user.roles li= role
如果你喜欢，也可以使用 for ：
for user in users for role in user.roles li= role
条件语句
Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号，这样会看上去对设计师更友好一点，
同时要在心里记住这个表达式渲染出的是 常规 JavaScript：
for user in users
if user.role == 'admin'
p #{user.name} is an admin
else
p= user.name和下面的使用了常规 JavaScript 的代码是相等的：
for user in users
- if (user.role == 'admin')
p #{user.name} is an admin
- else
p= user.nameJade 同时支持 unless, 这和 if (!(expr)) 是等价的：
for user in users unless user.isAnonymous p | Click to view a(href='/users/' + user.id)= user.name
模板继承
Jade 支持通过 block 和 extends 关键字来实现模板继承。 一个块就是一个 Jade 的 block ，它将在子模板中实现，同时是支持递归的。
Jade 块如果没有内容，Jade 会添加默认内容，下面的代码默认会输出 block scripts, block content, 和 block foot.
html
head
h1 My Site - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p some footer content现在我们来继承这个布局，简单创建一个新文件，像下面那样直接使用 extends，给定路径（可以选择带 .jade 扩展名或者不带）. 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 foot 块 没有 定义，所以它还会输出父级的 "some footer content"。
extends extend-layout block scripts script(src='/jquery.js') script(src='/pets.js') block content h1= title each pet in pets include pet
同样可以在一个子块里添加块，就像下面实现的块 content 里又定义了两个可以被实现的块 sidebar 和 primary，或者子模板直接实现 content。
extends regular-layout block content .sidebar block sidebar p nothing .primary block primary p nothing
参看中文详细教程 https://github.com/visionmedia/jade/blob/master/Readme_zh-cn.md
所有文章未经授权禁止转载、摘编、复制或建立镜像，违规转载法律必究。
举报邮箱：doramart@qq.com
推荐阅读
![[转]有关网页渲染，每个前端开发者都该知道的那点事](https://cdn.html-js.cn/cms/upload/smallimgs/img1435810953000.jpg)