模板引擎——Jade学习笔记
目录
一、Jade基础语法知识
1、文档声明和头尾标签
2、实现命令行实时编译
3、标签语法
4、属性文本和值
5、混合的成段文本和标签
6、注释与条件注释
7、变量声明和数据传递
8、安全转义与非转义
9、流程代码之遍历—— for in、each、while
10、流程代码之条件判断—— if else、unless、case when
11、神奇的mixins
二、Jade进级
1、模板的继承
2、模板的包含
3、render及renderFile方法
4、过滤器filter
5、runtime环境下使用jade
6、利用html2jade反编译
三、Jade缺点及如何取舍
1、文档声明和头尾标签
2、实现命令行实时编译
3、标签语法
4、属性文本和值
5、混合的成段文本和标签
6、注释与条件注释
7、变量声明和数据传递
8、安全转义与非转义
9、流程代码之遍历—— for in、each、while
10、流程代码之条件判断—— if else、unless、case when
11、神奇的mixins
二、Jade进级
1、模板的继承
2、模板的包含
3、render及renderFile方法
4、过滤器filter
5、runtime环境下使用jade
6、利用html2jade反编译
三、Jade缺点及如何取舍
-------------------------------------------------------------------------------------------------
安装Jade
npm install -g jade
编译Jade文件
jade ××.jade
一、Jade基础语法知识
1、文档声明和头尾标签
新建一个文件夹，在文件夹下新建index.jade文件
2、实现命令行实时编译
$ jade index.jade
$ jade -P index.jade（格式化输出，其中P是大写）
$ jade -P -w index.jade（其中w是小写）
每次更改index.jade文件并保存后，jade会自动将其编译为index.html文件
3、标签语法
标签不用写尖括号，也不用闭合，只需要保持正确的缩进即可，缩进可以用空格实现，也可以用tab实现，但是不能二者混用。
4、属性文本和值
- 标签名后通过空格，来隔离标签内的内容
- id与class特殊，可直接跟在标签名后面，类似css写法
- div是特殊标签，可不写标签名（默认div）
- 其他属性通过括号（key='value'）的形式添加
- 通过缩进的方式来添加一个元素内的子元素（标签）
编译后结果
5、混合的成段文本和标签
1、如果一个标签内包含大段文本，而这段文本可能有换行，怎么处理？
在p标签后紧跟’.‘，然后换行写大段的文本内容，编译结果如下：
2、如果文本与子元素混合呢？
方法一。加’.‘，直接写标签
方法二。去掉’.‘，文本前加’|‘
方法三。去掉’.‘，文本前加’|‘，子标签用jade语法
编译结果（不同方法得到的格式可能有所不同，但结构一样）
6、注释与条件注释。
// 注释后html会保留注释，而//- 不保留，且通过换行与缩进，可实现块注释
如果我想在不同IE版本下使用不同的html代码怎么做？
条件注释
后面不要忘了加</html>
7、变量声明和数据传递
三种方式实现：
1、可以直接在index.jade文件中声明变量并调用：
相比后面两种方式，jade文件中定义的变量优先级最高。
2、直接从命令行传入变量
3、定义一个存放变量的json文件，并通过命令传入
执行命令（其中O是大写，传入json文件中变量）
8、安全转义与非转义
- {}安全转义
- !{} 非转义，script标签内代码会执行
- = 安全转义
- != 非转义
- 如果需要在页面中输出#{}、!{}这种字符，需要通过反斜杠\转义
- 65行调用的data是未定义的，与67行的区别是，如果该变量没有定义，65行会编译成'undefined'
- 69行作为非属性值调用，未定义的data变量也不会变成’undefined‘。
9、流程代码之遍历—— for in、each、while
10、流程代码之条件判断——if else、unless、case-when
（unless 相当于if not）
11、神奇的mixins
基础用法
嵌套的mixin
内联代码块
其中block是关键字，如果在调用mixin时，后面跟了子元素代码块，调用后，该代码块将替换定义中的block
传递属性
编译结果
传递不定项参数
二、Jade进级
1、模板的继承
Jade可以通过block+extends实现模板继承
block用法
上面第1个block用于定义模板，后面2个是调用，定义与调用都产生代码，且相同
extends用法
我们新建一个文件，命名为 layout.jade
在新建一个index2.jade来继承layout.jade。通过extends实现继承，后缀名可以带也可以不带，不用引号，如果layout.jade与index2.jade不在同一文件夹下，那么可以通过相对路径来实现继承。
其实这类似于语言的继承，比如Java。layout.jade文件是父类（确切来说是抽象类），并且声明了content这个block（类似于java中的抽象方法），index.jade是子类，在这个子类中我们完成了对block content的声明。
编译结果：
----------------
在layout.jade（父类文件）中定义的block会被index2.jade（子类文件）种定义的同名block覆盖掉，如下，这个也类似于Java中父子类方法的覆盖。
2、模板的包含
通过include关键字实现模板的包含，或者说对其他文件进行引入。
新建content.jade与content2.html文件：
在index2.jade文件中通过include关键字引入，jade文件可以不带后缀名，html文件要带
编译结果
3、render及renderFile方法
jade api（左边是options参数中的配置项）
以上各api是用来编译jade代码语句或者jade文件的。下面主要讲解3个api调用方法：
① 先在当前项目目录下执行命令
$ npm install jade
② 在项目目录下新建server.js文件，该文件创建了一个server，监听8080端口。
为测试单个api，可先把其他2个注释掉看效果。通过renderFile编译后的文件，与通过命令行编译jade文件的效果一样。
执行命令：$ node server，在浏览器中输入localhost:8080，便可看到编译后的结果，当然，是html标签经过浏览器解析后呈现的效果。
4、过滤器filter
Jade中的filter即插件，可以让我们使用其他风格的语法编写代码。如用markdown文件语法编写文本；用less语法写css，用coffeescript语法写JavaScript。
①首先安装全局filter插件：
②后来运行时提示我安装的jade版本比2.0.0低（是由于改名的原因吧。。。），所以提示我安装以下模块：
③然后我们就可以使用其他语法编写jade代码了
编译后结果
5、runtime环境下使用jade
这小节没做笔记，课程地址：https://www.imooc.com/video/5279
6、利用html2jade反编译
三、Jade缺点及如何取舍