模板引擎是什么

模板引擎是将静态部分糅合的一种实现机制或者技术。

目前使用较广的模板引擎有以下几种：Jade / Pug、EJS、Handlebars。

本文详述Jade / Pug模板引擎在项目开发中的使用

注意：

Jade现在已经重命名为Pug，建议大家切换到新的模板引擎Pug，虽然官方仍在支持Jade

新的Pug使用pug-cli作为命令，全局安装命令为

npm install pug-cli -g

Jade编译命令为

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]-->
headmeta(charset='utf-8')title Jade-注释和条件注释
bodyp 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.json

test.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 -g

html2jade命令：

// 将百度HTML反编译成jade文件，命名为baidu.jade
html2jade https://www.baidu.com/ > baidu.jade// 反编译本地文件
html2jade index.html > index.jade

总结

Jade存在的缺点

可移植性差
调试困难
性能不是非常出色

但仍然选择Jade的原因

初始阶段，开发效率高
稳定阶段，协作成本低

附录

参考文章

浅谈 Web 中前后端模板引擎的使用

Pug 中文文档

推荐课程

带你学习Jade模板引擎

前端模板引擎 —— 带你学习Jade / Pug 模板引擎相关推荐

Jade/Pug模板引擎
1.概述: Jade是一款基于haml的HTML的模板引擎,采用JavaScript实现,可以方便的在Node.js.Yeoman等框架中使用,已改名为pug. 2.全局安装: npm install ...
Android 动态壁纸引擎试刀学习（初识安卓引擎）
动态壁纸蛮好玩的,也没接触过,看官方有就拿了学习下,是小马第一次接触引擎Engine,激动兴奋...效果做出来了,就放博客里,记录笔记,吼吼,跟大家交流学习, 废话不多说了,先看效果,再看源码,之后小 ...
pug模板引擎(原jade)
前面的话为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
pug模板引擎——jade
随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js.css一样,html也出现了各种各样的工具,即模板引擎,本文不 ...
github项目学习--Vue结合Pug模板引擎
今天看到github上面一个vue项目,用的是Pug模板写的,很多人不知道Pug是什么,但要说到jade,相信很多人反应过来了.没错,Pug前身就叫jade,但是由于商标等问题,改名为Pug,当然,语 ...
pug模板语法在vue中的使用--HTML的模板引擎
一. 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签.它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植 ...
pug模板引擎基本用法
一.pug模板引擎基本用法 Pug是jade的新版,jade由于商标已被注册,所以更名为pug. 缩进标注:Pug模板和大多数模板不同,它有自己的语法特点,采用缩进的方式进行标注,使用这种方式,使得代 ...
Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
koa + pug模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...

前端模板引擎 —— 带你学习Jade / Pug 模板引擎