用jade来编写HTML

Jade 是Node的模板引擎，可以用它来快速地编写HTML代码。在NPM下用命令npm install jade进行安装。本文大部分内容翻译自官网http://jade-lang.com/。

其他后台非Node的项目需要编写HTML的也可以用Jade先写好再导出HTML

下面来看看Jade提供了哪些有利于快速编写HTML的特性

1.属性

标签的属性看上去和HTML比较类似，例如

a(href='google.com') Google

将会生成

<a href="google.com">Google</a>

另外，可以在Jade中定义一些JS的变量用来做判定，像这样

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

要注意的是，var前面的"-"号不能漏，否则的话，这一行也会被解析成一个标签

在解析的过程中，如果不需要把属性中的特殊符号解析，要这样写

div(unescaped!="<code>")

那么代码就会被解析为

<div unescaped="<code>"></div>

大于号和小于号不会被解析城HTML符号，使用时要注意防止跨域脚本带来的安全问题

可以用数组标识一组类名，应用于标签上

如

-var classes = ['foo','bar','baz']

a(class=classes)

将生成

<a class="foo bar baz"></a>

另外，应用单个类可以直接这样写（类似于emmet插件）

a.button

如果不写标签将默认生成div

类似的，id可以用#表示

如，a#main-link

2.条件

同样可以将变量用于条件判断，官网给出了这样一个例子

- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default

    p you have #{friends} friends

同样的也支持if else

根据条件会解析出相应的语句。这个功能对于不是用Node.js作为后台开发的项目用处不大。

3.代码

Jade允许在模板中些Javascipt代码，代码分为这三种类型

1）不缓存的代码(Unbuffered Code)

-for ( var x = 0; x < 3; x++)

 li item

这段以-开头的代码会被立刻解析输出

2）有缓存的代码(Buffered Code)

有缓存的代码以=开头，将先计算=号右边的表达式再进行解析，如

p= 'This code is' + ' <escaped>!'

就相当于解析

p='This code is <escaped>!'

3）不转码的缓存代码（Unescaped Buffered Code）

以"!="开头，属性或者标签内的内容若包含特殊符号将不会被转码，所以还是要注意跨域脚本的安全问题

同样可以定义变量用于填充属性或内容

- var user = {name: '<strong>Forbes Lindesay</strong>'}
p Welcome #{user.name}
p Welcome !{user.name}

上面的语法表示的是转码的解析，<p>Welcome &lt;strong&gt;Forbes Lindesay&lt;/strong&gt;</p>

下面的则是不转码

<p>Welcome <strong>Forbes Lindesay</strong></p>

4.模板继承

对于写原生HTML的同学来说，这是非常实用的功能，可以代替以往的复制粘贴过程。

先在模板文件中写好框架

//- layout.jade

doctype html

html

head

block title

title Default title

body

block content

然后在继承的jade文件中只需要实现这两个block即可

//- index.jade

extends ./layout.jade

block title

title Article Title

block content

h1 My Article

支持多级继承。

在模板中可以添加默认内容，如果实现了block将会覆盖

可以用block append 或block prepend在模板位置的前或后添加一些代码

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')

5.包含

可以将一个jade文件作为一个模块，用其他jade文件包含

例如

//- includes/head.jade
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

//- index.jade
doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

//- includes/foot.jade
#footer
  p Copyright (c) foobar

这样就能模块化编写HTML了。