Jade 模板引擎学习笔记

###Jade 模板引擎

最近在学习NodeJS相关的知识，因此接触了Jade模板，对其中的语法和思想总结如下。

从实际意义上来说，Jade是为了提高前端开发人员的效率而产生的。Jade中，空格、换行、缩进都是有意义的，由这些决定了标签和内容的嵌套关系。

典型地，在HTML中，开始标签+内容+结束标签的模式，被改造成开始标签+空格+内容的模式，如：

HTML

<span class="abc">span content</span>

Jade

span.abc span content

其中，.abc和span中间的空格不能省略，省略则无法进行解析。

嵌套关系则由缩进决定，如：

HTML

<div><p>content</p></div>

Jade

div
    p
        content

或

div
    p content

类和ID则直接跟在标签后面，如：

div.aClass.bClass.#idOfDiv

注释支持单行//进行注释。还有更多语法上的说明，可以在使用时参考此处。

作为模板语言，Jade支持文件的包含include和扩展extends的，分别说明：include比较符合正常思维，什么地方缺某部分包含进来即可；extend则使用先给出整体，再替换局部的模式。

include的例子：

//- index.jade
doctype html
html
    include ./layout/header.jade
    body
    h1 include demo
    p content
    include ./layout/footer.jade

extends的例子

//- layout.jade
doctype html
html
    head
        block title
        title Default Title
    body
        block content


//- index.jade
extends ./layout/layout.jade

//- 进行替换
block title
    title New Title

block content
    h1 extends demo
    p content

个人觉得include比较符合人的习惯，extends则更适合进行模板化的开发。

最近在学很多东西，Git、NodeJS、express、gulp、Jade，陆续都要写一些文章进行记录，供自己日后进行查阅。