Jade —— 源于 Node.js 的 HTML 模板引擎
Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。
试玩
你可以在网上试玩 Jade。
特性
- 客户端支持
- 代码高可读
- 灵活的缩进
- 块展开
- Mixins
- 静态包含
- 属性改写
- 安全，默认代码是转义的
- 运行时和编译时上下文错误报告
- 命令行下编译jade模板
- HTML5 模式 (使用
!!! 5文档类型) - 在内存中缓存(可选)
- 合并动态和静态标签类
- 可以通过
filters修改树 - 模板继承
- 原生支持 Express JS
- 通过
each枚举对象、数组甚至是不能枚举的对象 - 块注释
- 没有前缀的标签
- AST Filters
- 过滤器
:stylus必须已经安装 stylus:less必须已经安装 less.js:markdown必须已经安装 markdown-js 或者 node-discount:cdata:coffeescript必须已经安装coffee-script
- Emacs Mode
- Vim Syntax
- TextMate Bundle
- Coda/SubEtha syntax Mode
- Screencasts
- html2jade 转换器
其它实现
jade有其他语言的实现，可以实现前后端渲染的统一：
- php
- scala
- ruby
- python
- java
安装
npm install jade
浏览器支持
把 Jade 编译为一个可供浏览器使用的单文件，只需要简单的执行:
make jade.js
如果你已经安装了 uglifyjs (npm install uglify-js)，你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。
make jade.min.js
默认情况下，为了方便调试Jade会把模板组织成带有形如 __.lineno = 3 的行号的形式。 在浏览器里使用的时候，你可以通过传递一个选项 { compileDebug: false } 来去掉这个。
下面的模板
p Hello #{name}
会被翻译成下面的函数：
function anonymous(locals, attrs, escape, rethrow) {
var buf = [];
with (locals || {}) {
var interp;
buf.push('\nHello '
+ escape((interp = name) == null ? '' : interp) + '\n');
}
return buf.join("");
}
通过使用 Jade 的 ./runtime.js你可以在浏览器使用这些预编译的模板而不需要使用 Jade, 你只需要使用 runtime.js 里的工具函数, 它们会放在 jade.attrs, jade.escape 这些里。 把选项 { client: true } 传递给 jade.compile(), Jade 会把这些帮助函数的引用放在jade.attrs, jade.escape.
function anonymous(locals, attrs, escape, rethrow) {
var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
var buf = [];
with (locals || {}) {
var interp;
buf.push('\nHello '
+ escape((interp = name) == null ? '' : interp) + '\n');
}
return buf.join("");
}
API
var jade = require('jade');
// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);
选项
self使用self命名空间来持有本地变量. (默认为false)locals本地变量对象filename异常发生时使用，includes 时必需debug输出 token 和翻译后的函数体compiler替换掉 jade 默认的编译器compileDebugfalse的时候调试的结构不会被输出pretty为输出加上了漂亮的空格缩进 (默认为false)
标签
标签就是一个简单的单词:
html
它会被转换为
标签也是可以有 id 的:
div#container
它会被转换为
怎么加 class 呢？
div.user-details
转换为
多个 class 和 id? 也是可以搞定的:
div#foo.bar.baz
转换为
不停的 div div div 很讨厌啊 , 可以这样:
#foo
.bar
这个算是我们的语法糖，它已经被很好的支持了，上面的会输出：
<div id="foo">div><div class="bar">div>
标签文本
只需要简单的把内容放在标签之后：
p wahoo!
它会被渲染为 wahoo!
很帅吧，但是大段的文本怎么办呢：
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
渲染为 foo bar baz rawr.....
怎么和数据结合起来？ 所有类型的文本展示都可以和数据结合起来，如果我们把 { name: 'tj', email: '[email protected]' } 传给编译函数，下面是模板上的写法:
#user #{name} <#{email}>
它会被渲染为
当就是要输出 #{} 的时候怎么办? 转义一下!
p \#{something}
它会输出 #{something}
同样可以使用非转义的变量 !{html}, 下面的模板将直接输出一个