模板引擎——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缺点及如何取舍

-------------------------------------------------------------------------------------------------

安装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代码怎么做？

条件注释

后面不要忘了加

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缺点及如何取舍