jade模板语法
jade写的网页的demo
doctype html
html(lang="zh-CN")
head
meta(charset="UTF-8")
title jadeTest
body
.container
.header
.menu
.nav
li
a(href="#") 首页
li
a(href="#") 新闻中心
.center
.row
.size1
.box.timely-msg
.hd
h2
a(href="#") 及时消息
.bd
ul.list
li
a(href="#") 这款合资车售价18万，2.0T+8速动力，比迈腾还有面子，车标成亮点
.size2
.box.news-list
.hd
h2
a(href="#") 新闻列表
.bd
ul.list
li
a(href="#") 这款合资车售价18万，2.0T+8速动力，比迈腾还有面子，车标成亮点
.footer
p 公司版权，违者必究
jade的特点
p 不像HTML一样，有<>包围标签，jade中的标签的属性使用紧跟元素后面的小括号()括号括起来，属性值使用引号；
p 另外，jade元素没有相应的开始和结束标记，是通过标记的缩进来表示从属关系，这一点应该是和python的语法类似；
语法
doctype
p HTML文档的开始需要声明文档的类型，具体的声明方式为：
<!DOCTYPE html>
p jade中相应的声明方式为：
doctype html
元素和属性
p HTML中的元素和属性，元素的开始和结束标记，都是通过<>来标识，而在jade中，不需要使用<>标记元素的开始和结束。HTML中的元素属性，需要显示的声明属性的类型，如class、ID，jade中使用#表示id，.来表示class。
#user
.face
a(href="#") 修改头像
对应的HTML为:
<div id="user">
<div class="face"><a href="#">修改头像</a></div>
</div>
如果元素只有一个属性的时候，直接跟在元素后面的()中标明属性名并赋给相应的值就可以了，但如果元素有多个属性，那么元素的属性之间使用逗号(,)分割
#user
.face
a(href="#",target="_blank") 修改头像
<div id="user">
<div class="face"><a href="#" target="_blank">修改头像</a></div>
</div>
元素包含的内容
- 元素包含的内容，可以直接将内容跟在元素标签的后面；
.text 全面屏iPad来了！最低售价6499元，果粉们剁手吗
- 使用"="来设置元素包含的内容
.text="全面屏iPad来了！最低售价6499元，果粉们剁手吗"
上面2行代码对应的html为:
<div class="text">全面屏iPad来了！最低售价6499元，果粉们剁手吗</div>
<div class="text">全面屏iPad来了！最低售价6499元，果粉们剁手吗</div>
jade中的=
jade中的=后面可以跟任何表达式，这个表达式可以是字符串，可以是变量，也可以是函数，或者是表达式运算的结果。但需要注意，=后面的内容会被转码(escape)
注意：=和前面的元素之间不要有空格，如果出现了空格，=则会被认为是前面元素的内容
=后跟字符串
.text="Hello world!<b>Hello world!</b>"
解释为HTML后为：
<div class="text">Hello world!<b>Hello world!</b></div>
=后面的内容会被转码，如果不想后跟的内容被转码，则在=前面加!
.text!="Hello " + "<b>world!</b>"
解释为HTML后的内容为：
<div class="text">Hello <b>world!</b></div>
=后跟变量
ul.list
-var arr = ['one','two','three'];
each item in arr
li= item
这里的=后跟变量，还涉及到了jade的另外一个语法，jade的逻辑语法以及jade内嵌js代码
jade中元素的布尔属性
jade中元素的布尔属性设置为false，则不加入到元素中；如果元素中的布尔属性设置值为true或者不设置值，都会在元素中加入布尔属性
input(placeholder="请输入用户名",disabled)
input(placeholder="请输入密码",disabled=true)
input(placeholder="请确认密码",disabled=false)
解释为HTML后为：
<input placeholder="请输入用户名" disabled>
<input placeholder="请输入密码" disabled>
<input placeholder="请确认密码">
jade中元素添加内联样式
jade中元素添加内联样式，和为元素添加属性的方式基本一致，不同的是内联样式的属性会有多个，这多个属性，可以放到一个{}中，可以简单理解为js中的对象。
.text(style={color:'#f20',padding:'5px 10px'}) Hello World!
解释为HTML后的代码为：
<div style="color:#f20;padding:5px 10px" class="text">Hello World!</div>
jade元素添加内联样式，基本的方式就和上面介绍的一致，但有些特殊的地方，暂时还没有琢磨清楚，就是当属性名有-分隔的时候如font-size，在jade中内联样式中怎么书写，还不知道。
jade自闭合标签
HTML5标准要求自闭合元素不需要闭合标签，即最后的/不需要手动添加，有时为了兼容一些老版本的HTML标准的时候，需要后面的闭合标签，那么可以在自闭合标签后面紧跟一个/即可。
上面是文档介绍的，但我测试了几次，好像都没有实现，这个已经不重要了，现在的HTMl文档的标准是实现HTML5规范，HMTL5标准规范已经不允许使用自闭合标签的结束标签了。
input(placeholder="请输入用户名")/
img(src="../images/img-face.jpg")/
这个测试效果和文档介绍的结果不一致，现在也不那么重要了，解释后的HTML代码也没有添加自闭合的/。
jade中的特殊字符|
|在jade中是一个特殊的字符，它告诉jade模板解析器将后面的内容原样输出，|后面也可以跟HTML元素。
a(href="http://www.baidu.com") 百度
| bc 我查找信息，喜欢百度
| <a href="http://www.google.com">我想查找信息,不喜欢百度，喜欢谷歌</a>
解析为HTML的对应代码为：
<a href="http://www.baidu.com">百度</a>
bc 我查找信息，喜欢百度
<a href="http://www.google.com">我想查找信息,不喜欢百度，喜欢谷歌</a>
比如我们希望得到
<a href="http://www.baidu.com">百度</a>
bc 我查找信息，喜欢百度
这样的结果输出，如果我们直接使用前面提供的语法,
a(href="http://www.baidu.com") 百度
bc 我查找信息，喜欢百度
那么得到的结果将是
<a href="http://www.baidu.com">百度</a>
<bc>我查找信息，喜欢百度</bc>
jade解析器默认回家字母解析为标签，即使bc后面紧跟这后面的文字，jade解析器也会将bc解析为标记。这个时候使用jade的特殊字符|就可以解决这个问题，可以让后面的元素原样输出。
如果没有bc等字母的话，仅仅是文字，那是可以得到预期的结果输出的
<a href="http://www.baidu.com">百度</a>
我查找信息，喜欢百度
#[]语法
如果我想在一段文本中插入一段jade语句，就需要#[]语法了。我们可以将jade语句写在[]中，就可以被jade解释器解释成html语句了
.text Hello,#[span John]
解释后的HTML为：
<div class="text">Hello,<span>John</span></div>
jade中内嵌javascript
jade作为模板引擎，可以在jade代码中嵌入js代码，这里的js代码是作为服务端的代码来执行进行逻辑处理的，而不是常规的html网页中的浏览器的行为。
单行js代码
jade中嵌入单行js代码时，嵌入的js代码需要以“-”开头
ul.list
-for(var i = 0; i < 3; i++)
li= i + "我就是个新闻列表"
解释后对应的HTML
<ul class="list">
<li>0我就是个新闻列表</li>
<li>1我就是个新闻列表</li>
<li>2我就是个新闻列表</li>
</ul>
jade中=跟内容的时候，=和前面的元素不要留有空格，如果留空格的话，=就会被当作当前元素的内容来处理了
多行js代码
当在jade中嵌入多行js代码的时候，可以在每行js代码都以“-”开头，也可以让"-"独占一行，然后js代码做缩进书写。
ul.list
-
var n = 4;
for(var j = 1; j < n; j++)
li= j + "实时消息"
预期的输出HTML应该如下：
<ul class="list">
<li>1实时消息</li>
<li>2实时消息</li>
<li>3实时消息</li>
</ul>
上面的是文档介绍的语法，预期的输出应该是上面的输出，但我实际使用的时候并没有任何的输出，可能是现在的语法有变化，我没有细究。我真正实现嵌套多行js代码，仍旧是每行js代码以"-"开头。
ul.list
-var n = 4;
-for(var j = 1; j < n; j++)
li= j + "实时消息"
实际输出结果值如下：
<ul class="list">
<li>1实时消息</li>
<li>2实时消息</li>
<li>3实时消息</li>
</ul>
jade的逻辑语法
jade自己有一些逻辑的语法，可以与js一起使用，这些jade语句前面不需要使用-开头。和python语法类似。
遍历 each...in
ul.list
-var university = ['北京大学','清华大学','中国传媒大学'];
each item in arr
li= item
这里的=后跟的是变量，变量item
each...in还可以获取到迭代变量的索引
ul.list
-var city = ['北京','上海','深圳'];
each item,index in city
li=index + ": " + item
解释后的对应HTML为：
<ul class="list">
<li>0: 北京</li>
<li>1: 上海</li>
<li>2: 深圳</li>
</ul>
上面的便利对象是数组，each ... in语法遍历数组的时候，可以有2个变量，第一个变量为数组的项，第二个参数为数组的索引。
each...in语法还可以遍历对象。遍历对象的时候，each...in语法也是可以有2个参数，第一个参数为value，第二个参数为key。
ul.list
-var obj = {"address":"北京","mobile":"13278787878","job":"Teacher"};
each item,key in obj
li= key + ":" + item
解释后对应的HTML
<ul class="list">
<li>address:北京</li>
<li>mobile:13278787878</li>
<li>job:Teacher</li>
</ul>
循环 while
这个语法没想好怎么解释，就借用其他编程语言的解释吧，不说了，这里就是一个while...do的操作。
ul.list
-var num = 1;
while num < 4
li= num++
最后一行自增预算，也可以拆开来写，像js一样。
l.list
-var num = 0;
while num < 4
li= num
-num++
解释后对应的HTML：
<ul class="list">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
条件判断
条件判断，jade和其他编程语言的语法基本一致，起码使用的关键词是一致的，都为if。
jade中也可以使用取反操作，如!flag
-var flag = false;
if(flag)
.text 有权限
else if(!flag)
.text 没有权限
else
.text 谁知道有没有权限
case语法
jade中没有了switch，添加了case,这里也仅仅就是改了个名词，改了跟叫发，使用和实现方法是完全一样的。
-var gender = 1;
case gender
when 0
p 男
when 1
p 女
default
p 保密
<p>女</p>
复用块
jade中可以通过mixin定义复用块，定义方式为：mixin + 复用块的名称，使用方式为：+复用块名称
mixin下面的为复用块的内容，复用块需要先定义后使用。即在定义服用快之前，不能使用，而在定义了复用块以后的代码中，使用位置不限。
mixin showName
.name Nicholas
+showName
.text 我是java开发程序员
+showName
可以将复用块简单的理解为函数，可以向复用块中传递参数，使复用块更加具有灵活性
mixin box(cls,title)
.box(class=cls)
.hd
h2=title
.bd
+box("news","新闻列表")
解释后对应的HTML为：
<div class="box news">
<div class="hd">
<h2>新闻列表</h2>
</div>
<div class="bd"></div>
</div>
这里的复用块和我们之前的编码习惯基本上吻合了，就是我们要求定义个公用模块，然后有类似结构的都复制一个相同的模块，然后修改一下class和模块的标题，现在解决了手动修改的问题，可以直接引用并给相应的模块赋值相应的class和模块标题。
复用块中引用块
复用块还可以接收一个块(block)参数，这个参数是一组jade语句，这个参数名block是固定的，不能随意更改。在调用的时候，只需要将这组jade语句以缩进的形式写在mixin的下面即可。
复用块引用块情形的定义
mixin mixinName
jade语句
block
调用：
+mixinName
jade语句
demo
//复用块的定义
mixin showUserInfo
.name Nicholas
.job Teacher
block
//复用块调用
+showUserInfo
.text 他是个好老师，也是个好程序员
解释为HTML后为：
<div class="name">Nicholas</div>
<div class="job">Teacher</div>
<div class="text">他是个好老师，也是个好程序员</div>
如果参数名不使用固定的关键字block，则自定义的参数名会被解释为标记，并且不会起到参数的作用。前面我提到，可以将复用块简单的作为函数来理解，那么block我们就可以理解为形参，复用块调用下面的jade就可以理解为实参。
加入我定义复用块的时候，不添加block参数，那么在调用复用块的下一行的缩进jade语句是不会被解释为HTML的。比如我定义并调用一个复用块：
// 定义复用块
mixin showUserInfo
.name Nicholas
.job Teacher
//调用复用块
+showUserInfo
.text 他是个好老师，也是个好程序员
那么解释为HTML后是不会显示“他是个好老师，也是个好程序员”这一行内容的
<div class="name">Nicholas</div>
<div class="job">Teacher</div>
但如果调用复用块的下一行的jade语句没有缩进书写，那么这一行就不是作为复用块的实参出现的，只是一般的jade语句，可以被正常解释为HTML。
复用块中的attributes属性
前面的介绍，我们了解到复用块可以定义block参数，除了block参数以外，jade还有另外一个隐藏的参数attributes，类似于js中的默认的函数参数对象arguments.这个attributes参数没有想好怎么解释，看例子吧：
mixin showPersonal(name)
div(title!=attributes.title)=name
+showPersonal("我的姓名")(title="title属性")
解释后的HTML为：
<div title="title属性">我的姓名</div>
attributs参数的作用，请参考复用块showPersonal的调用时的第二个参数(title="title属性")。
再就是需要注意定义复用块时的attributes属性，demo中使用了!=,而不是常规的=，这是因为jade中的=会进行escaped转码，而使用了!=就不会进行转码。
上面的demo是只有一个参数title，那么有多个参数的时候，是也像定义元素的属性一样，定一个属性列表，属性之间使用逗号分隔呢？在不是使用attributes属性的时候，是没有问题的。但是使用attributes属性，灵活性会更高一些。
-var attr = {'data-user':'Nicholas','data-job':'Teacher'}
.text&attributes(attr)
.text(title="title",data-job="student",data-age="18")
.text&attributes(attr)这行代码，可以有缩进，也可以没有缩进，缩进和不缩进实现的效果是完全一样的
demo中的.text&attributes(attr)、.text(title="title",data-job="student",data-age="18")可以说实现的效果完全相同，在属性是固定的时候，但有的时候如果属性不固定，需要根据特定场景赋予不同属性的时候，attributes方式实现的灵活性就能体现出来了
填充数据 #{}、!{}、!=、=
我们已经知道为元素填充数据，可以通过=或者!=来实现,其中=和!=的区别仅仅是后跟的元素数据会不会被escaped转码，=会被转码，!=不会被转码。
.text= "信标请求优先避免与关键操作和更高优先级的网络请求竞争"
然而还有一些情况不适合使用=或者!=.这个时候就得使用#{}语法了，其实#{}和!{}的区别也是会不会被转码的不同。
-var answer = "混合模式开发";
.text 所谓hybrid，顾名思义就是‘#{answer}’
如上面的demo就不适合=,而使用#{}就比较合适。解释后的HTML：
<div class="text">所谓hybrid，顾名思义就是‘混合模式开发’</div>
填充数据的几种方式，使用=和!=的地方都可以使用#{}和!{}替换使用，但是使用#{}和!{}的地方不一定可以使用=和!=替换，简单来说，=和!=一般用于简单场景，#{}和!{}用于相对复杂一点的场景。
无论是使用=和!=还是使用#{}和!{}，当填充的数据是字符串的时候，都需要使用引号括起来。如果不加引号，会编译报错。
.text #{'啦啦'}
.text= '哗哗'
对应的HTML
<div class="text">啦啦</div>
<div class="text">哗哗</div>
注释
jade中的注释，和js等其他编程语言基本类似，单行注释使用//作为注释的开始。如果是多行注释，则让//单独占一行，接下来的jade缩进书写。
- 使用//注释的jade文件，被解释为HTML后，仍旧会显示注释的内容
- 如果不希望在jade中注释的内容显示在HTML中，则可以在使用//-注释
//
用户信息
包括用户名、出生日期、性别
.text Nicholas 1987.12.12 男
对应的HTML：
<!--用户信息
包括用户名、出生日期、性别-->
<div class="text">Nicholas 1987.12.12 男</div>
//-
用户信息
包括用户名、出生日期、性别
.text Nicholas 1987.12.12 男
对应的HTML：
<div class="text">Nicholas 1987.12.12 男</div>
jade中没有条件注释的方法。HTML中有条件注释的方法，如果有需要在jade中使用的条件注释的地方，直接使用HTML中的注释方法即可。
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
继承
jade支持继承，通过关键字extends来实现。
//- layout.jade
doctype html
html(lang="zh-CN")
head
block title
block script
body
block content
block footer
.footer
p 版权所属 违者必究
//- son.jade
extends layout.jade
block title
title 列表页
block script
script(script='https://lib.baomitu.com/jquery/3.3.1/jquery.js')
block content
.row
.size1
.box
.hd
h2 新闻列表
.size2
解释的对应HTML为：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>列表页</title>
<script script="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div class="row">
<div class="size1">
<div class="box">
<div class="hd">
<h2>新闻列表</h2>
</div>
</div>
</div>
<div class="size2"></div>
</div>
<div class="footer">
<p>版权所属 违者必究</p>
</div>
</body>
</html>
网友评论