一个前端攻城狮的全栈之路第四弹：jade模板引擎的简单介绍和使用

1、类似于java的jsp模板引擎一样，nodejs的模板引擎jade也是爽歪歪，下面就简单说明一下本文大致介绍的jade内容

（1）拆分可复用的模块，以及怎么在其余模块里引入复用对的模块，这里的模板又分为两类：

 （a）. head中的link和script标签，通过include嵌套引用

 （b）. html的头部声明，就是doctype html定义的部分，通过extends继承引用

（2）定义块级元素:“block content"

（3） 怎么在标签中绑定变量

（4） 怎么在标签中定义class、href等常用属性

（5）怎么循环列表

（6）怎么调用封装的公用方法处理标签上绑定的变量，类似于vue中的过滤器

（7） 怎么在模块中引入当前模块的js等

（8）怎么使用if/else判断

2、按照上述顺序，就一一列举些小例子

（1）拆分可复用的模块

（a）  如果项目比较大，并且分的比较细，可以将header中的link标签再单独拆分出来，在header.jade中引用，如下图

（b）header定义html头部和引入link.jade,(注：这里的引用要用：include嵌套)

（c）在其它模板中引入公用的header.jade(注：这里的引用要用：extends继承)

（2）定义块级元素:“block content"

  如果想直接定义一个div,可这样书写（注：相当于div可省略不写）

如果想指定为其他块级标签，在前面声明即可，例如声明为form

（3）怎么在标签中绑定变量，这里分为两种情况：

（a） 标签的内容是变量

（b）标签的属性是变量

（4）怎么在标签中定义class、href等常用属性

直接定义在标签后的括号中，用“”逗号+空格“”隔开（逗号非必须，建议加上）

（5）怎么循环列表

用each..in方法循环

（6）怎么调用封装的公用方法处理标签上绑定的变量，类似于vue中的过滤器

例如方法format已经封装在app.js中

（7）怎么在模块中引入当前模块的js等

如果当前模块需要引入它自己的js，这里引入的位置需要注意，应该在当前模块最外层div标签闭后引入

（8）怎么使用if/else判断

（9）会学以上的方法，小的demo应该是没问题了，另一些高阶的用法mixins等大家可参考官网来学习！！！