模板引擎是什么
模板引擎是将静态部分糅合的一种实现机制或者技术。
目前使用较广的模板引擎有以下几种：Jade / Pug、EJS、Handlebars。
本文详述Jade / Pug模板引擎在项目开发中的使用
注意：
Jade现在已经重命名为Pug，建议大家切换到新的模板引擎Pug，虽然官方仍在支持Jade
新的Pug使用pug-cli作为命令，全局安装命令为
npm install pug-cli -gJade编译命令为
pug index.jade // 格式化已压缩的文件
pug -P index.jade // 格式化未压缩的文件
pug -w index.jade // 实时编译为什么使用模板引擎？
通过比较模板引擎和简单字符串拼接在写代码时得表现就能一目了然啦！
简单字符串拼接：
- 将 HTML 代码（View 层）和 JS 代码（Controller 层）混杂在一起，UI 与逻辑代码混杂，阅读起来吃力。一旦业务复杂，或多人维护的情况下，几乎会失控。
- 如果需要拼接的 HTML 代码里有很多引号的话（比如有大量的 href 属性，src 属性），非常容易出错。
模板引擎Jade：
- Jade是express（基于 Node.js（基于 Chrome V8 引擎的 JavaScript 运行环境） 平台，快速、开放、极简的 web 开发框架）默认的模板引擎；
- 超强的可读性、灵活易用的缩进、块扩展、代码默认经过代码处理以增加安全性、拥有编译和运行时的上下文错误报告、命令行编译支持、HTML5模式、可选的内存缓存、联合动态的静态标记类、利用过滤器解析树的处理...
Jade不局限于Node.js，其他后台语言也可以用Jade来开发页面。Jade模板引擎是需要经过配置和编译才能在浏览器运行，而不像ejs这样的模板引擎里面本来就是HTML标签。如此麻烦，为什么还要使用呢？使用集成的ide或者插件，比如emmet来写代码也很快。那是因为Jade模板引擎很好的解决了巢状嵌套问题
在开发HTML页面的时候会涉及很多复杂区块，或深层次的DOM嵌套，这就是著名的巢状DOM结构嵌套，在后期维护修改时容易出错（一不小心少了<符号，或者标签未闭合）
Jade语法
参考jade官网示例，地址：https://pug.bootcss.com/api/getting-started.html
完整示例代码，GitHub地址：https://github.com/Hayley2016/template-engine-pug
Jade-文档声明和头尾标签：
元素不需要尖括号、标签不需要成对出现、子元素相对于父元素要保持缩进、标签和文本需空格隔开
Jade-标签语法 && Jade-属性文本和值：
元素和标签傻傻分不清楚：div是一个块状元素，<div></div>，尖括号包起来的div（如<div>、</div>）是标签，用来标记这个元素，尖括号里面是元素名，元素是由开始和结束标签组成，用来包含某些内容的整段代码；整个HTML文档就是由许许多多的HTML元素组成的；所以应该说是元素语法，而不是标签语法；
Jade-混合的成段文本和标签
Jade-注释和条件注释
IE兼容写法：
doctype html
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
head
meta(charset='utf-8')
title Jade-注释和条件注释
body
p ie兼容写法
</html>
Jade-变量声明和数据传递
声明变量用 p #{var} 方式取值 或 p= var 取值
1. 文档声明变量
2. 命令行传递变量
执行命令
pug test.jade -P -w --obj "{'name': 'gxj'}"执行结果
3. json文件形式传递变量
执行命令
pug index.jade -P -w -O test.jsontest.json文件内容
{
"name": "whl"
}执行结果
Jade-安全转义与非转义
流程代码-for-each-while
流程代码-if-else-unless
神奇的 mixins
jade代码块重用，使用mixins关键字命名一个mixins，使用加号（+）名称，使用该mixins
Jade-模板的继承
解决子文件和父文件之间继承问题
Jade-模板的包含
解决文件之间，区块之间内嵌关系
render及renderFile方法
参考官网API：https://pug.bootcss.com/api/reference.html
过滤器 filters
过滤器可以让您在 Pug 中使用其他的语言。它们接受传入一个文本块的内容。向过滤器传递参数，只需要将参数如同标签属性一样，放在括号里即可，如：:less(ieCompat=false)
runtime环境下使用jade
利用html2jade反编译
以上讲的都是将jade编译成html，而html5jade模块可以将html反编译成jade
npm install html2jade -ghtml2jade命令：
// 将百度HTML反编译成jade文件，命名为baidu.jade
html2jade https://www.baidu.com/ > baidu.jade
// 反编译本地文件
html2jade index.html > index.jade总结
Jade存在的缺点
- 可移植性差
- 调试困难
- 性能不是非常出色
但仍然选择Jade的原因
- 初始阶段，开发效率高
- 稳定阶段，协作成本低
附录
参考文章
推荐课程