Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持。
功能
- 客户端支持
- 超强的可读性
- 灵活易用的缩进
- 块扩展
- 代码默认经过编码处理以增强安全性
- 编译及运行时的上下文错误报告
- 命令行编译支持
- HTML5模式(使用!!!5文档类型)
- 可选的内存缓存
- 联合动态和静态标记类
- 利用过滤器解析树的处理
- 支持 Express JS
- 利用each透明的循环objects,arrays甚至不可枚举对象
- 块注释
- 不需要标记前缀
- AST过滤器
- 过滤器
- :sass 需要安装sass.js
- :less 需要安装less.js
- :markdown 需要安装markdown-js或node-discount
- :cdata
- :coffeescript 需要安装coffee-script
- Vim语法文件
- TextMate包
- Screencasts
通过npm:
npm install jade
可以通过下面命令将jade编译为客户端浏览器兼容的文件:
1
2
|
<span style="font-size: 13px;">$ make jade.js
</span>
|
或者,如果你已经通过npm安装了uglifyjs(npminstalluglify-js),可以通过下面的命令同时创建两个文件:
1
2
|
<span style="font-size: 13px;">$ make jade.min.js
</span>
|
公开API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<span style=
"font-size: 13px;"
>
var
jade = require(
'jade'
);
// 渲染字符串
jade.render(
'.csser.com 字符串'
, { options:
'here'
});
// 渲染文件
jade.renderFile(
'path/to/csser.com.jade'
, { options:
'here'
},
function
(err, html){
// 这里的options是可选的
// 回调函数可以作为第二个参数
});
// 编译一个函数
var
fn = jade.compile(
'string of jade'
, options);
fn.call(scope, locals);
</span>
|
Options
- 执行作用域(this)scope
- 本地变量对象locals
- 处理异常及缓存时使用filename
- 通过文件名将Javascript缓存在内存中cache
- 输出生成的标记和函数体debug
- 替换jade默认编译引擎compiler
语法
行尾
在解析前会将 CRLF 和 CR 转换为 LF.
标记
标记是一行的第一个单词:
1
2
|
<span style="font-size: 13px;">html
</span>
|
会被转换为 <html></html>
标记也可以有id:
1
2
|
<span style="font-size: 13px;">div#container
</span>
|
这将被渲染成<div id=”container”></div>
如何处理类?
1
2
|
<span style="font-size: 13px;">div.user-details
</span>
|
渲染为: <div class=”user-details”></div>
多个class?并且还有id?
1
2
|
<span style="font-size: 13px;">div#foo.bar.baz
</span>
|
渲染为:<div id=”foo” class=”bar baz”></div>
总写div确实很烦人,可以省略之:
1
2
3
|
<span style="font-size: 13px;">#foo
.bar
</span>
|
输出: <div id=”foo”></div><div class=”bar”></div>
标记文本
只需要将文本内容放在标记后面:
1
2
|
<span style="font-size: 13px;">p wahoo!
</span>
|
渲染为 <p>wahoo!</p>.
酷,但是如何处理大段文本呢?
1
2
3
4
5
6
|
<span style="font-size: 13px;">p
| foo bar baz
| rawr rawr
| super cool
| go jade go
</span>
|
渲染为 <p>foo bar baz rawr…..</p>
内插法?是的,这两种类型的文本都可以使用内插法,如果我们传入{ locals: { name: ‘一回’, email: ‘xianlihua[at]gmail.com’ }},可以这样做:
1
2
|
<span style="font-size: 13px;">#user #{name} <#{email}>
</span>
|
输出:<div id=”user”>一回 <xianlihua[at]gmail.com></div>
出于某种原因需要输出#{}?转义之:
1
2
|
<span style="font-size: 13px;">p \#{CSSer, 关注Javascript技术}
</span>
|
这样就得到了:<p>#{CSSer, 关注Javascript技术}</p>
也可以使用反转义变量!{html},下面的代码将输出script标记:
1
2
3
|
<span style="font-size: 13px;">- var html = "<script></script>"
| !{html}
</span>
|
包含文本的嵌套标记也可以使用文本块:
1
2
3
4
|
<span style="font-size: 13px;">label
| Username:
input(name='user[name]')
</span>
|
或者直接使用标记文本:
1
2
3
|
<span style="font-size: 13px;">label Username:
input(name='user[name]')
</span>
|
只接受纯文本的标记,如script,style,以及textarea不需要开头的|字符,例如:
1
2
3
4
5
6
7
8
9
10
|
<span style="font-size: 13px;"> html
head
title CSSer, 关注Web前端技术
script
if (foo) {
bar();
} else {
baz();
}
</span>
|
再次作为替代方案,我们可以使用点号’.'来表示一个文本块,例如:
1
2
3
4
5
6
7
|
<span style="font-size: 13px;"> p.
foo asdf
asdf
asdfasdfaf
asdf
asd.
</span>
|
输出:
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;"> <p>foo asdf
asdf
asdfasdfaf
asdf
asd
.
</p>
</span>
|
如果点号’.'与标记之间有空格,Jade解析其会忽略它,将其作为文本处理:
1
2
|
<span style="font-size: 13px;">p .
</span>
|
输出:
1
2
|
<span style="font-size: 13px;"><p>.</p>
</span>
|
注释
单行注释当前看起来与Javascript一致,即“//”,单行注释的内容必须放在同一行上:
1
2
3
4
|
<span style="font-size: 13px;">// 一些段落
p foo
p bar
</span>
|
将会输出:
1
2
3
4
|
<span style="font-size: 13px;"><!-- 一些段落 -->
<p>foo</p>
<p>bar</p>
</span>
|
Jade也支持非缓冲注释,只需增加一个横杠:
1
2
3
4
|
<span style="font-size: 13px;">//- 该行注释将不会被输出到解析后的页面中
p foo
p bar
</span>
|
输出:
1
2
3
|
<span style="font-size: 13px;"><p>foo</p>
<p>bar</p>
</span>
|
块注释
块注释会依据缩进进行处理:
1
2
3
4
5
|
<span style="font-size: 13px;"> body
//
#content
h1 CSSer,关注Web前端技术
</span>
|
输出:
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;"><body>
<!--
<div id="content">
<h1>CSSer,关注Web前端技术</h1>
</div>
-->
</body>
</span>
|
Jade也支持条件注释,例如:
1
2
3
4
|
<span style="font-size: 13px;">body
/if IE
a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox
</span>
|
输出:
1
2
3
4
5
6
|
<span style="font-size: 13px;"><body>
<!--[if IE]>
<a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>
<![endif]-->
</body>
</span>
|
嵌套
Jade支持通过嵌套来以自然的方式定义标记:
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;">ul
li.first
a(href='#') foo
li
a(href='#') bar
li.last
a(href='#') baz
</span>
|
块扩展
块扩展允许创建单行的简洁嵌套标记,下面的示例与上例输出相同:
1
2
3
4
5
|
<span style="font-size: 13px;"> ul
li.first: a(href='#') foo
li: a(href='#') bar
li.last: a(href='#') baz
</span>
|
特性
目前Jade支持’(‘和’)'的特性定界符。
1
2
|
<span style="font-size: 13px;">a(href='/login', title='View login page') Login
</span>
|
另外我们也可以使用冒号(:)来作为分割符:
1
2
|
<span style="font-size: 13px;">a(href: '/login', title: '注册成为CSSer.com会员') Login
</span>
|
Boolean特性也被支持:
1
2
|
<span style="font-size: 13px;">input(type="checkbox", checked)
</span>
|
值为变量的Boolean特性只有在值为true时输出:
1
2
|
<span style="font-size: 13px;">input(type="checkbox", checked: someValue)
</span>
|
分拆在多行也能正常解析:
1
2
3
4
|
<span style="font-size: 13px;">input(type='checkbox',
name='agreement',
checked)
</span>
|
文档类型
利用!!!来增加页面的文档类型:
1
2
|
<span style="font-size: 13px;">!!!
</span>
|
将会输出过渡型文档类型,然而:
1
2
|
<span style="font-size: 13px;">!!! 5
</span>
|
将会输出HTML5的文档类型,下面是默认定义的文档类型,这也可以很容易的被扩展:
1
2
3
4
5
6
7
8
9
10
11
12
|
<span style=
"font-size: 13px;"
>
var
doctypes = exports.doctypes = {
'5'
:
'<!DOCTYPE html>'
,
'xml'
:
'<?xml version="1.0" encoding="utf-8" ?>'
,
'default'
:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
,
'transitional'
:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
,
'strict'
:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
,
'frameset'
:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">'
,
'1.1'
:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'
,
'basic'
:
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">'
,
'mobile'
:
'<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};
</span>
|
要修改默认值只需改变:
1
2
|
<span style="font-size: 13px;">jade.doctypes.default = 'whatever you want';
</span>
|
过滤器
过滤器以冒号(:)作为前缀,如 :markdown 将会对文本进行函数处理,(一回注:类似Smarty的变量调节器),本页开始处列出了目前Jade支持的过滤器。
1
2
3
4
5
|
<span style="font-size: 13px;">body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [CSSer](http://www.csser.com)
</span>
|
渲染后:
1
2
|
<span style="font-size: 13px;"> <body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>
</span>
|
过滤器也可以处理解析树,通常过滤器可以正常处理文本块,但是通过传入规则的块过滤器可以做任何它能做的。
1
2
3
4
5
6
7
|
<span style="font-size: 13px;">body
conditionals:
if role == 'admin'
p You are amazing
else
p Not so amazing
</span>
|
代码
Jade目前支持三种类型的可执行代码,第一种以-为前缀,不会被缓冲:
1
2
|
<span style="font-size: 13px;">- var foo = 'bar';
</span>
|
这可被用于条件或循环:
1
2
3
|
<span style="font-size: 13px;">- for (var key in obj)
p= obj[key]
</span>
|
由于Jade的缓冲技术,下面的代码是有效的:
1
2
3
4
5
6
7
8
|
<span style="font-size: 13px;">- if (foo)
ul
li yay
li foo
li worked
- else
p oh no! you are not in csser.com
</span>
|
甚至详细的迭代循环:
1
2
3
4
5
6
|
<span style="font-size: 13px;">- if (items.length)
ul
- items.forEach(function(item){
li= item
- })
</span>
|
任何你希望的都可以实现!
接下来我们转义了缓冲代码,用于缓冲返回值,以等号(=)作为前缀:
1
2
3
4
|
<span style="font-size: 13px;">- var foo = 'bar'
= foo
h1= foo
</span>
|
输出: bar<h1>bar</h1>. 被’='缓冲的代码会默认经过转义以增强安全性,要输出为转义的值需要使用 !=:
1
2
|
<span style="font-size: 13px;">p!= aVarContainingMoreHTML
</span>
|
一个允许使用”vanilla”Javascript的例外,是 – each 标记,其表现形式为:
1
2
|
<span style="font-size: 13px;">- each VAL[, KEY] in OBJ
</span>
|
实现循环数组的例子:
1
2
3
4
|
<span style="font-size: 13px;">- var items = ["one", "two", "three"]
- each item in items
li= item
</span>
|
输出:
1
2
3
4
|
<span style="font-size: 13px;"><li>one</li>
<li>two</li>
<li>three</li>
</span>
|
循环对象的键和值:
1
2
3
4
|
<span style="font-size: 13px;">- var obj = { foo: 'bar' }
- each val, key in obj
li #{key}: #{val}
</span>
|
这会输出 <li>foo: bar</li>
也可以进行嵌套循环:
1
2
3
4
|
<span style="font-size: 13px;">- each user in users
- each role in user.roles
li= role
</span>
|
当一个属性为undefined,Jade会输出空串,例如:
1
2
|
<span style="font-size: 13px;">textarea= user.signature
</span>
|
近期的Jade版本会输出空字符串而不是undefined:
1
2
|
<span style="font-size: 13px;"><textarea></textarea>
</span>
|
命令行工具:bin/jade
输出html到标准输出(stdout):
1
2
|
<span style="font-size: 13px;">jade examples/*.jade --pipe
</span>
|
生成 examples/*.html :
1
2
|
<span style="font-size: 13px;">jade examples/*.jade
</span>
|
传入参数:
1
2
|
<span style="font-size: 13px;">jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'
</span>
|