[Jade模块引擎]Jade入门
Posted 小碎石
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Jade模块引擎]Jade入门相关的知识，希望对你有一定的参考价值。
本文内容是根据慕课网上的Jade引擎课程和W3CPlus网站Jade博客内容整理而成的
参考内容
1. 慕课网 http://www.imooc.com/learn/259
2. Jade博客 http://www.w3cplus.com/html/jade.html
Jade现在已经更名为pug，并且有了一些新的变化。但是变化地方不多，所以这里先讲Jade入门。之后再讨论pug。
一、Jade的安装
npm install jade -g
二、Jade的简单使用
这里先简单提一下jade命令行怎么使用，在终端或者cmd中输入
jade filename.jade
这样就会将jade模板文件编译生成同名的.html文件
三、分类介绍Jade各种功能和用法
1. 标签
文档声明:
在Html5中，文档声明格式为 <!DOCTYPE html>
那么在Jade中，第一行就是用来声明文档类型的。在Jade中，支持以下文档，格式就是在doctype后面空格跟上文档类型
doctype html
doctype basic
doctype xml
doctype mobile
doctype transitional
doctype frameset
doctype 1.1
doctype strict
标签就是HTML标签，后面可以跟上#id .class分别表示id名和class名，id名只能有一个，但是class名可以有多个。
另外也可以通过()圆括号的形式来设置标签属性，如id，class，href，src，value，checked等等
// 如果标签为div同时指定了id或者class那么可以省略掉div
div.box
.box
p#title.bolder 这里通过#id和.class的形式给标签添加class和Id
img(src="#")
span 通过()圆括号添加标签其他属性
a(href="#") a link text
标签的属性如果有多个，可以用逗号,分割，也可以换行显示。针对没有属性值的属性如checked等，如果指定了变量值作为属性值，那么只有当属性值为真时，才会显示属性。
属性值支持字符串拼接。由于class是一个特殊属性，因此允许指定一个字符串数组。
2. 标签文本
标签文本就是标签内容，通常都是跟在标签后面，空上一个空格。
但是如果有大段文本怎么办?为了不让解析器将后面的多行文本解析成非标准标签。
可以在后面每行的文本内容前加上竖线|来告知解析器，不要将后面的内容进行解析。
如果后面的内容都不需要解析，那么可以直接在标签后面跟上一个.点符号。
p. 跟上.符号表示后面的内容都不用解析 如果使用了原生HTML标签则直接解析为原生标签 <span>使用HTML原始标签<span> p |使用|符号可以单独指定哪一行不需要解析 <span>这里的内容就会被解析<span>
标签文本内容如果是一个变量值，那么通过#{}形式来使用变量。
通过 - var variable = value 的形式来定义变量
如何只输出#{}内容而不要将其解析为读取变量呢？通过在#{}前面加上\反斜线即可。
如果变量内部有特殊字符，默认情况下解析器会将特殊字符进行转义。
那我就希望输出特殊字符，如<script>怎么办？可以使用!{}的形式来让变量内的特殊字符拒绝转义。
// #{} // !{} - var script = "<script>alert(1);</script>" p.escape #{script} p.origin !{script} p.raw \#{script}
对于纯文本标签，如 script, style, textarea 我们可以不需要. |符号。因为系统默认就会认为下面的内容都是不需要解析的文本内容。
最后有一个简单的变量解析格式:
#{variable} 等价于 = variable
!{variable} 等价于!= variable
3、注释
注释很重要，包括单行注释，块注释和非缓冲注释三种
单行注释使用//双斜线，会生成到html文件中<!--做成html格式的注释-->
块注释也是使用//双斜线，不同的是如果想将某一块注释掉，需要将块内容放到//下面一行并用缩进格式表示
最后是非缓冲注释，表示最后生成的Html文件中不显示这一块内容。使用//- 形式表示。
4、多级标签如何表示
这里涉及到多级标签互相嵌套情况下，如何优雅编写Jade模板
通常情形下，Jade模板中的标签嵌套都是使用换行缩进的方式进行。但是也允许使用标签后面加:再加空格的方式填写后面的标签
ul
li.first
a(href="#") foo
li
a(href="#") bar
li.last
a(href="#") baz
ul
li.first: a(href="#") node
li: a(href=‘#‘) jade
li.last: a(href="#") react
5、流程控制
既然Jade是为了简化我们编写html文件的代码，那么肯定就会提供流程控制机制来避免重复性地代码编写。如
for, each, case, if else, unless
a. for
类似于for ... in语法
当然for也支持原始的循环作用
//- 特别注意缩进关系，否则编译要报错 ul - for (var i = 0; i < 3; i++) li game #{i}
for还可以和else一起使用，当循环的对象没有值时，则使用else语句
- var books = []
ul
for book in books
li= book
else
li sorry, no books
b. each
each遍历数组或者对象时，是按照 each value [, key ] in obj/array 的格式进行解析的
- var items = ["react", "angular", "vue"] each item in items li= item //- <li>react</li> <li>angular</li> <li>vue</li>
- var items = ["html5", "css3", "es6"]; each item, index in items li #{index}. #{item} //- <li>0. html5</li> <li>1. css3</li> <li>2. es6</li>
c. case
case的作用就和switch一致，用于根据变量值进行不同分支操作或显示。
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have one friends
when 10
p you have some friends
default
p you have #{friends} friends
当然这个地方如果为了节省代码空间，可以使用内联语法冒号:
还有一个地方要注意的就是，如果多个when都按照同一种方式来处理时，则多个when之间同级显示
- var apples = 1
case apples
when 0
when 1
p you have few apples
default
p you have #{apples} apples
d. if else
最简单的条件判断
e. unless
unless等价于 if(!(expr)) 也就是当条件判断语句为假的时候才执行代码
最后介绍一个 block 也就是 代码块
6、模板继承
7、模板包含
8、Mixins
Mixins是一个很神奇的功能，可以理解为就是将常用的Jade代码转换成了函数，有点类似于css预编译技术中的mixins
目的就是为了减少重复代码的编写，通过将重复的代码整合为Mixins格式，可以传递参数值从而产生不同的Jade代码
a. 不带参数
mixin list
ul
li node
li connect
li express
li koa
+list()
通过mixin关键字来定义一个混合mixin后面跟上指定的名称。当你需要调用这个mixin时，使用+[name]()格式进行调用。
b. 带参数
mixin courseList(name, courses)
ul.name
- each course in courses
li= course
+courseList("tom", ["dom","bom","ecmascript"])
c. 多个参数可以使用REST格式
mixin courseList(name, ...courses)
ul.name
- each course in courses
li= course
+courseList("tom", "dom","bom","ecmascript")
四、如何编译Jade文件生成HTML文件
在文章开头提供了一个最简单的使用命令。那么通过 jade --help方式可以查看详细的jade命令行
-O --obj <str|path> 表示可以通过指定json文件路径或者是传入一个obj对象的格式化字符串来编译Jade模板文件
-P --pretty 表示输出的html文件是格式优雅的html文件(也就是正常人写的Html文件，带缩进的)
-c --client 表示将jade模板文件编译生成为js文件，用于浏览器运行环境内解析jade模板文件
-w --watch 表示实时监视jade模板文件的变化，一旦文件发生改变就会自动编译成html文件
最后，关于Jade的入门介绍就到这里结束了。接下来有一篇文章专门将Jade官网上的案例运行并讲解一遍。
以上是关于[Jade模块引擎]Jade入门的主要内容，如果未能解决你的问题，请参考以下文章