Jade —— 源于 Node.js 的 HTML 模板引擎

Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。

试玩

你可以在网上试玩 Jade。

特性

  • 客户端支持
  • 代码高可读
  • 灵活的缩进
  • 块展开
  • Mixins
  • 静态包含
  • 属性改写
  • 安全，默认代码是转义的
  • 运行时和编译时上下文错误报告
  • 命令行下编译jade模板
  • HTML5 模式 (使用 !!! 5 文档类型)
  • 在内存中缓存(可选)
  • 合并动态和静态标签类
  • 可以通过 filters 修改树
  • 模板继承
  • 原生支持 Express JS
  • 通过 each 枚举对象、数组甚至是不能枚举的对象
  • 块注释
  • 没有前缀的标签
  • AST Filters
  • 过滤器
  • Emacs Mode
  • Vim Syntax
  • TextMate Bundle
  • Coda/SubEtha syntax Mode
  • Screencasts
  • html2jade 转换器

其它实现

jade有其他语言的实现，可以实现前后端渲染的统一：

安装

全选复制放进笔记

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(‘\n<p>Hello ‘ + escape((interp = name) == null ? ‘‘ : interp) + ‘\n</p>‘);
  }
  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(‘\n<p>Hello ‘ + escape((interp = name) == null ? ‘‘ : interp) + ‘\n</p>‘);
  }
  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 默认的编译器
  • compileDebug  false的时候调试的结构不会被输出
  • pretty    为输出加上了漂亮的空格缩进 (默认为 false)

标签

标签就是一个简单的单词:

全选复制放进笔记

html

它会被转换为 <html></html>

标签也是可以有 id 的:

全选复制放进笔记

div#container

它会被转换为 <div id="container"></div>

怎么加 class 呢？

全选复制放进笔记

div.user-details

转换为 <div class="user-details"></div>

多个 class 和 id? 也是可以搞定的:

全选复制放进笔记

div#foo.bar.baz

转换为 <div id="foo" class="bar baz"></div>

不停的 div div div 很讨厌啊 , 可以这样:

全选复制放进笔记

#foo
.bar

这个算是我们的语法糖，它已经被很好的支持了，上面的会输出：

全选复制放进笔记

<div id="foo"></div><div class="bar"></div>

标签文本

只需要简单的把内容放在标签之后：

全选复制放进笔记

p wahoo!

它会被渲染为 <p>wahoo!</p>.

很帅吧，但是大段的文本怎么办呢：

全选复制放进笔记

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go

渲染为 <p>foo bar baz rawr.....</p>

怎么和数据结合起来？ 所有类型的文本展示都可以和数据结合起来，如果我们把 { name: ‘tj‘, email: ‘[email protected]‘ } 传给编译函数，下面是模板上的写法:

全选复制放进笔记

#user #{name} &lt;#{email}&gt;

它会被渲染为 <div id="user">tj &lt;[email protected]&gt;</div>

当就是要输出 #{} 的时候怎么办? 转义一下!

全选复制放进笔记

p \#{something}

它会输出 <p>#{something}</p>

同样可以使用非转义的变量 !{html}, 下面的模板将直接输出一个 <script> 标签:

全选复制放进笔记

- var html = "<script></script>"
| !{html}

内联标签同样可以使用文本块来包含文本：

全选复制放进笔记

label
  | Username:
  input(name=‘user[name]‘)

或者直接使用标签文本:

全选复制放进笔记

label Username:
  input(name=‘user[name]‘)

只 包含文本的标签，比如 <script>, <style>, 和 <textarea> 不需要前缀 | 字符, 比如:

全选复制放进笔记

html
  head
    title Example
    script
      if (foo) {
        bar();
      } else {
        baz();
      }

这里还有一种选择，可以使用 . 来开始一段文本块，比如：

全选复制放进笔记

p.
  foo asdf
  asdf
   asdfasdfaf
   asdf
  asd.

会被渲染为:

全选复制放进笔记

<p>foo asdf
asdf
  asdfasdfaf
  asdf
asd
.
</p>

这和带一个空格的 . 是不一样的, 带空格的会被 Jade 的解析器忽略，当作一个普通的文字:

全选复制放进笔记

p .

渲染为:

全选复制放进笔记

<p>.</p>

需要注意的是文本块需要两次转义。比如想要输出下面的文本：

全选复制放进笔记

</p>foo\bar</p>

使用:

全选复制放进笔记

p.
  foo\\bar

注释

单行注释和 JavaScript 里是一样的，通过 // 来开始，并且必须单独一行：

全选复制放进笔记

// just some paragraphs
p foo
p bar

渲染为：

全选复制放进笔记

<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>

Jade 同样支持不输出的注释，加一个短横线就行了：

全选复制放进笔记

//- will not output within markup
p foo
p bar

渲染为：

全选复制放进笔记

<p>foo</p>
<p>bar</p>

块注释

块注释也是支持的：

全选复制放进笔记

body
  //
    #content
      h1 Example

渲染为：

全选复制放进笔记

<body>
  <!--
  <div id="content">
    <h1>Example</h1>
  </div>
  -->
</body>

Jade 同样很好的支持了条件注释：

全选复制放进笔记

body
  //if IE
    a(href=‘http://www.mozilla.com/en-US/firefox/‘) Get Firefox

渲染为：

全选复制放进笔记

<body>
  <!--[if IE]>
    <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>
  <![endif]-->
</body>

内联

Jade 支持以自然的方式定义标签嵌套:

全选复制放进笔记

ul
  li.first
    a(href=‘#‘) foo
  li
    a(href=‘#‘) bar
  li.last
    a(href=‘#‘) baz

块展开

块展开可以帮助你在一行内创建嵌套的标签，下面的例子和上面的是一样的：

全选复制放进笔记

ul
  li.first: a(href=‘#‘) foo
  li: a(href=‘#‘) bar
  li.last: a(href=‘#‘) baz

Case

case 表达式按下面这样的形式写:

全选复制放进笔记

html
  body
    friends = 10
    case friends
      when 0
        p you have no friends
      when 1
        p you have a friend
      default
        p you have #{friends} friends

块展开在这里也可以使用:

全选复制放进笔记

friends = 5

html
  body
    case friends
      when 0: p you have no friends
      when 1: p you have a friend
      default: p you have #{friends} friends

属性

Jade 现在支持使用 ( 和 ) 作为属性分隔符

全选复制放进笔记

a(href=‘/login‘, title=‘View login page‘) Login

当一个值是 undefined 或者 null 属性 不 会被加上, 所以呢，它不会编译出 ‘something="null"‘.

全选复制放进笔记

div(something=null)

Boolean 属性也是支持的:

全选复制放进笔记

input(type="checkbox", checked)

使用代码的 Boolean 属性只有当属性为 true 时才会输出：

全选复制放进笔记

input(type="checkbox", checked=someValue)

多行同样也是可用的：

全选复制放进笔记

input(type=‘checkbox‘,
  name=‘agreement‘,
  checked)

多行的时候可以不加逗号：

全选复制放进笔记

input(type=‘checkbox‘
  name=‘agreement‘
  checked)

加点空格，格式好看一点？同样支持

全选复制放进笔记

input(
  type=‘checkbox‘
  name=‘agreement‘
  checked)

冒号也是支持的:

全选复制放进笔记

rss(xmlns:atom="atom")

假如我有一个 user 对象 { id: 12, name: ‘tobi‘ } 我们希望创建一个指向 /user/12 的链接 href, 我们可以使用普通的 JavaScript 字符串连接，如下:

全选复制放进笔记

a(href=‘/user/‘ + user.id)= user.name

或者我们使用 Jade 的修改方式, 这个我想很多使用 Ruby 或者 CoffeeScript 的人会看起来像普通的 JS..:

全选复制放进笔记

a(href=‘/user/#{user.id}‘)= user.name

class 属性是一个特殊的属性，你可以直接传递一个数组，比如 bodyClasses = [‘user‘, ‘authenticated‘] :

全选复制放进笔记

body(class=bodyClasses)

HTML

内联的 HTML 是可以的，我们可以使用管道定义一段文本 :

全选复制放进笔记

html
  body
    | <h1>Title</h1>
    | <p>foo bar baz</p>

或者我们可以使用 . 来告诉 Jade 我们需要一段文本：

全选复制放进笔记

html
  body.
    <h1>Title</h1>
    <p>foo bar baz</p>

上面的两个例子都会渲染成相同的结果：

全选复制放进笔记

<html><body><h1>Title</h1>
<p>foo bar baz</p>
</body></html>

这条规则适应于在 Jade 里的任何文本：

全选复制放进笔记

html
  body
    h1 User <em>#{name}</em>

Doctypes

添加文档类型只需要简单的使用 !!!, 或者 doctype 跟上下面的可选项:

全选复制放进笔记

!!!

会渲染出 transitional 文档类型, 或者:

全选复制放进笔记

!!! 5

或

全选复制放进笔记

!!! html

或

全选复制放进笔记

doctype html

Doctype 是大小写不敏感的, 所以下面两个是一样的:

全选复制放进笔记

doctype Basic
doctype basic

当然也是可以直接传递一段文档类型的文本：

全选复制放进笔记

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

渲染后:

全选复制放进笔记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

会输出 HTML5 文档类型. 下面的默认的文档类型，可以很简单的扩展：

全选复制放进笔记

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">‘
};

通过下面的代码可以很简单的改变默认的文档类型：

全选复制放进笔记

    jade.doctypes.default = ‘whatever you want‘;

过滤器

过滤器前缀 :, 比如 :markdown 会把下面块里的文本交给专门的函数进行处理。查看顶部 特性 里有哪些可用的过滤器。

全选复制放进笔记

body
  :markdown
    Woah! jade _and_ markdown, very **cool**
    we can even link to [stuff](http://google.com)

渲染为:

全选复制放进笔记

<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://google.com">stuff</a></p></body>

代码

Jade 目前支持三种类型的可执行代码。第一种是前缀 -， 这是不会被输出的：

全选复制放进笔记

- var foo = ‘bar‘;

这可以用在条件语句或者循环中：

全选复制放进笔记

- for (var key in obj)
  p= obj[key]

由于 Jade 的缓存技术，下面的代码也是可以的：

全选复制放进笔记

- if (foo)
  ul
    li yay
    li foo
    li worked
- else
  p oh no! didnt work

哈哈，甚至是很长的循环也是可以的：

全选复制放进笔记

- if (items.length)
  ul
    - items.forEach(function(item){
      li= item
    - })

所以你想要的！

下一步我们要 转义 输出的代码，比如我们返回一个值，只要前缀一个 =：

全选复制放进笔记

- var foo = ‘bar‘
= foo
h1= foo

它会渲染为 bar<h1>bar</h1>. 为了安全起见，使用 = 输出的代码默认是转义的,如果想直接输出不转义的值可以使用 !=：

全选复制放进笔记

p!= aVarContainingMoreHTML

Jade 同样是设计师友好的，它可以使 JavaScript 更直接更富表现力。比如下面的赋值语句是相等的，同时表达式还是通常的 JavaScript：

全选复制放进笔记

- var foo = ‘foo ‘ + ‘bar‘
foo = ‘foo ‘ + ‘bar‘

Jade 会把 if, else if, else, until, while, unless 同别的优先对待, 但是你得记住它们还是普通的 JavaScript：

全选复制放进笔记

if foo == ‘bar‘
  ul
    li yay
    li foo
    li worked
else
  p oh no! didnt work

循环

尽管已经支持 JavaScript 原生代码，Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是 each, 这种形式：

全选复制放进笔记

each VAL[, KEY] in OBJ

一个遍历数组的例子 ：

全选复制放进笔记

- var items = ["one", "two", "three"]
each item in items
  li= item

渲染为:

全选复制放进笔记

<li>one</li>
<li>two</li>
<li>three</li>

遍历一个数组同时带上索引：

全选复制放进笔记

items = ["one", "two", "three"]
each item, i in items
  li #{item}: #{i}

渲染为:

全选复制放进笔记

<li>one: 0</li>
<li>two: 1</li>
<li>three: 2</li>

遍历一个数组的键值：

全选复制放进笔记

obj = { foo: ‘bar‘ }
each val, key in obj
  li #{key}: #{val}

将会渲染为：<li>foo: bar</li>

Jade 在内部会把这些语句转换成原生的 JavaScript 语句，就像使用 users.forEach(function(user){, 词法作用域和嵌套会像在普通的 JavaScript 中一样：

全选复制放进笔记

each user in users
  each role in user.roles
    li= role

如果你喜欢，也可以使用 for ：

全选复制放进笔记

for user in users
  for role in user.roles
    li= role

条件语句

Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号，这样会看上去对设计师更友好一点， 同时要在心里记住这个表达式渲染出的是 常规 JavaScript：

全选复制放进笔记

for user in users
  if user.role == ‘admin‘
    p #{user.name} is an admin
  else
    p= user.name

和下面的使用了常规 JavaScript 的代码是相等的：

全选复制放进笔记

for user in users
  - if (user.role == ‘admin‘)
    p #{user.name} is an admin
  - else
    p= user.name

Jade 同时支持 unless, 这和 if (!(expr)) 是等价的：

全选复制放进笔记

for user in users
  unless user.isAnonymous
    p
      | Click to view
      a(href=‘/users/‘ + user.id)= user.name

模板继承

Jade 支持通过 block 和 extends 关键字来实现模板继承。 一个块就是一个 Jade 的 block ，它将在子模板中实现，同时是支持递归的。

Jade 块如果没有内容，Jade 会添加默认内容，下面的代码默认会输出 block scripts, block content, 和 block foot.

全选复制放进笔记

html
  head
    h1 My Site - #{title}
    block scripts
      script(src=‘/jquery.js‘)
  body
    block content
    block foot
      #footer
        p some footer content

现在我们来继承这个布局，简单创建一个新文件，像下面那样直接使用 extends，给定路径（可以选择带 .jade 扩展名或者不带）. 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 foot 块 没有 定义，所以它还会输出父级的 "some footer content"。

全选复制放进笔记

extends extend-layout

block scripts
  script(src=‘/jquery.js‘)
  script(src=‘/pets.js‘)

block content
  h1= title
  each pet in pets
    include pet

同样可以在一个子块里添加块，就像下面实现的块 content 里又定义了两个可以被实现的块 sidebar 和 primary，或者子模板直接实现 content。

全选复制放进笔记

extends regular-layout

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

前置、追加代码块

Jade允许你 替换 （默认）、 前置 和 追加 blocks. 比如，假设你希望在 所有 页面的头部都加上默认的脚本，你可以这么做：

全选复制放进笔记

html
  head
    block head
      script(src=‘/vendor/jquery.js‘)
      script(src=‘/vendor/caustic.js‘)
  body
    block content

现在假设你有一个Javascript游戏的页面，你希望在默认的脚本之外添加一些游戏相关的脚本，你可以直接append上代码块：

全选复制放进笔记

extends layout

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

使用 block append 或 block prepend 时 block 是可选的:

全选复制放进笔记

extends layout

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

包含

Includes 允许你静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, HTML 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹：

全选复制放进笔记

./layout.jade
./includes/
  ./head.jade
  ./tail.jade

下面是 layout.jade 的内容:

全选复制放进笔记

html
  include includes/head
  body
    h1 My Site
    p Welcome to my super amazing site.
    include includes/foot

这两个包含 includes/head 和 includes/foot 都会读取相对于给 layout.jade 参数filename 的路径的文件, 这是一个绝对路径，不用担心Express帮你搞定这些了。Include 会解析这些文件，并且插入到已经生成的语法树中，然后渲染为你期待的内容：

全选复制放进笔记

<html>
  <head>
    <title>My Site</title>
    <script src="/javascripts/jquery.js">
    </script><script src="/javascripts/app.js"></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <div id="footer">
      <p>Copyright>(c) foobar</p>
    </div>
  </body>
</html>

前面已经提到，include 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后，Jade 不会把这个文件当作一个 Jade 源代码，并且会把它当作一个普通文本包含进来：

全选复制放进笔记

html
  head
    //- css and js have simple filters that wrap them in
        <style> and <script> tags, respectively
    include stylesheet.css
    include script.js
  body
    //- "markdown" files will use the "markdown" filter
        to convert Markdown to HTML
    include introduction.markdown
    //- html files have no filter and are included verbatim
    include content.html

Include 也可以接受块内容，给定的块将会附加到包含文件 最后 的块里。 举个例子，head.jade 包含下面的内容：

全选复制放进笔记

head
  script(src=‘/jquery.js‘)

我们可以像下面给include head添加内容, 这里是添加两个脚本.

全选复制放进笔记

html
  include head
    script(src=‘/foo.js‘)
    script(src=‘/bar.js‘)
  body
    h1 test

在被包含的模板中，你也可以使用yield语句。yield语句允许你明确地标明include的代码块的放置位置。比如，假设你希望把代码块放在scripts之前，而不是附加在scripts之后：

全选复制放进笔记

head
  yield
  script(src=‘/jquery.js‘)
  script(src=‘/jquery.ui.js‘)

由于被包含的Jade会按字面解析并合并到AST中，词法范围的变量的效果和直接写在同一个文件中的相同。这就意味着include可以用作partial的替代，例如，假设我们有一个引用了user变量的user.jade`文件：

全选复制放进笔记

h1= user.name
p= user.occupation

接着，当我们迭代users的时候，只需简单地加上include user。因为在循环中user变量已经被定义了，被包含的模板可以访问它。

全选复制放进笔记

users = [{ name: ‘Tobi‘, occupation: ‘Ferret‘ }]

each user in users
  .user
    include user

以上代码会生成：

全选复制放进笔记

<div class="user">
  <h1>Tobi</h1>
  <p>Ferret</p>
</div>

user.jade引用了user变量，如果我们希望使用一个不同的变量user，那么我们可以直接定义一个新变量user = person，如下所示：

全选复制放进笔记

each person in users
  .user
    user = person
    include user

Mixins

Mixins 在编译的模板里会被 Jade 转换为普通的 JavaScript 函数。 Mixins 可以带参数，但不是必需的：

全选复制放进笔记

mixin list
  ul
    li foo
    li bar
    li baz

使用不带参数的 mixin 看上去非常简单，在一个块外：

全选复制放进笔记

h2 Groceries
mixin list

Mixins 也可以带一个或者多个参数，参数就是普通的 JavaScript 表达式，比如下面的例子：

全选复制放进笔记

mixin pets(pets)
  ul.pets
    - each pet in pets
      li= pet

mixin profile(user)
  .user
    h2= user.name
    mixin pets(user.pets)

会输出像下面的 HTML:

全选复制放进笔记

<div class="user">
  <h2>tj</h2>
  <ul class="pets">
    <li>tobi</li>
    <li>loki</li>
    <li>jane</li>
    <li>manny</li>
  </ul>
</div>

产生输出

假设我们有下面的 Jade 源码：

全选复制放进笔记

- var title = ‘yay‘
h1.title #{title}
p Just an example

当 compileDebug 选项不是 false, Jade 会编译时会把函数里加上 __.lineno = n;, 这个参数会在编译出错时传递给 rethrow(), 而这个函数会在 Jade 初始输出时给出一个有用的错误信息。

全选复制放进笔记

function anonymous(locals) {
  var __ = { lineno: 1, input: "- var title = ‘yay‘\nh1.title #{title}\np Just an example", filename: "testing/test.js" };
  var rethrow = jade.rethrow;
  try {
    var attrs = jade.attrs, escape = jade.escape;
    var buf = [];
    with (locals || {}) {
      var interp;
      __.lineno = 1;
       var title = ‘yay‘
      __.lineno = 2;
      buf.push(‘<h1‘);
      buf.push(attrs({ "class": (‘title‘) }));
      buf.push(‘>‘);
      buf.push(‘‘ + escape((interp = title) == null ? ‘‘ : interp) + ‘‘);
      buf.push(‘</h1>‘);
      __.lineno = 3;
      buf.push(‘<p>‘);
      buf.push(‘Just an example‘);
      buf.push(‘</p>‘);
    }
    return buf.join("");
  } catch (err) {
    rethrow(err, __.input, __.filename, __.lineno);
  }
}

当 compileDebug 参数是 false, 这个参数会被去掉，这样对于轻量级的浏览器端模板是非常有用的。结合 Jade 的参数和当前源码库里的 ./runtime.js 文件，你可以通过 toString() 来编译模板而不需要在浏览器端运行整个 Jade 库，这样可以提高性能，也可以减少载入的 JavaScript 数量。

全选复制放进笔记

function anonymous(locals) {
  var attrs = jade.attrs, escape = jade.escape;
  var buf = [];
  with (locals || {}) {
    var interp;
    var title = ‘yay‘
    buf.push(‘<h1‘);
    buf.push(attrs({ "class": (‘title‘) }));
    buf.push(‘>‘);
    buf.push(‘‘ + escape((interp = title) == null ? ‘‘ : interp) + ‘‘);
    buf.push(‘</h1>‘);
    buf.push(‘<p>‘);
    buf.push(‘Just an example‘);
    buf.push(‘</p>‘);
  }
  return buf.join("");
}

Makefile 的一个例子

通过执行 make， 下面的 Makefile 例子可以把 pages/*.jade 编译为 pages/*.html 。

全选复制放进笔记

JADE = $(shell find pages/*.jade)
HTML = $(JADE:.jade=.html)

all: $(HTML)

%.html: %.jade
    jade < $< --path $< > [email protected]

clean:
    rm -f $(HTML)

.PHONY: clean

这个可以和 watch(1) 命令起来产生像下面的行为：

全选复制放进笔记

$ watch make

命令行的 Jade

全选复制放进笔记

 使用: jade [options] [dir|file ...]

选项:

  -h, --help         输出帮助信息
  -v, --version      输出版本号
  -o, --out <dir>    输出编译后的 HTML 到 <dir>
  -O, --obj <str>    JavaScript 选项
  -p, --path <path>  在处理 stdio 时，查找包含文件时的查找路径
  -P, --pretty       格式化 HTML 输出
  -c, --client       编译浏览器端可用的 runtime.js
  -D, --no-debug     关闭编译的调试选项(函数会更小)
  -w, --watch        监视文件改变自动刷新编译结果

Examples:

  # 编译整个目录
  $ jade templates

  # 生成 {foo,bar}.html
  $ jade {foo,bar}.jade

  # 在标准IO下使用jade
  $ jade < my.jade > my.html

  # 在标准IO下使用jade, 同时指定用于查找包含的文件
  $ jade < my.jade -p my.jade > my.html

  # 在标准IO下使用jade
  $ echo "h1 Jade!" | jade

  # foo, bar 目录渲染到 /tmp
  $ jade foo bar --out /tmp

注意: 从 v0.31.0 的 -o 选项已经指向 --out, -O 相应做了交换

时间： 2024-10-17 21:01:29

Jade —— 源于 Node.js 的 HTML 模板引擎的相关文章

js 如何实现模板引擎

这是2013年的某个项目, 开发自己的编辑器,  当中需要用到模板引擎, 后自己简单琢磨了下,  实现了个简易版的.   实现模板解析最大的难题就是 变量解析 , 和如何有效的拼接可执行的字符串. 例:  hello world  {$title} 好 {$content}  {for(var i in data)}  你好  {/for} ,里面有 title,cotnent,data,及for循环,  "{$ }" 代表变量, "{for}"代表循环,{/for

Node.js背后的V8引擎优化技术

Node.js的执行速度远超Ruby.Python等脚本语言,这背后都是V8引擎的功劳.本文将介绍如何编写高性能Node.js代码.V8是Chrome背后的JavaScript引擎,因此本文的相关优化经验也适用于基于Chrome浏览器的JavaScript引擎. V8优化技术概述 V8引擎在虚拟机与语言性能优化上做了很多工作.不过按照Lars Bak的说法,所有这些优化技术都不是他们创造的,只是在前人的基础上做的改进. 隐藏类(Hidden Class) 为了减少JavaScript中访问属性所

doT.js——前端javascript模板引擎问题备忘录

我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想去寻找解决方法. 可是,我,是万难不能接受这种丑陋的解决方式的.有没有优雅的解决方法呢,于是在网上搜索到了doT.js. 主页很简洁,就一个页面,研究了一下,就顺利的上手了,相当的简单易用.主要分两步走. 1.写模板 写模板,就用官方文档里提供给你的三板斧就搞定了,当然总共不止三个: {{ }} f

node.js小工具——模板生成器

前言 我在做小程序的时候经常要新建页面,而且每个页面就是一个目录,每个目录里面都要创建四个文件. 感觉过于繁琐,写了一个小工具偷懒一下 app.js 1 const fs = require('fs'); 2 const dirName = 'hello'; // your new dir name 3 const url = `./${dirName}`; 4 const init = [ 5 { 6 url: `${url}/${dirName}.js`, 7 content: 'const

node.js的ejs模版引擎

ejs版本是0.8.8,生成的views目录下面只有index.ejs and error.ejs,没有layout.ejs. D:\lianchuangfile\nodeDevelop\microblog\views ejs的老版本0.6.1,生成的views目录下面除了index.ejs and error.ejs,还有layout.ejs.

十大模板引擎

1) Jade Jade是一个有着完善API和惊艳特性的JavaScript模板引擎.使用空白与缩进敏感的代码格式编写HTML页面.基于Node.js,运行在服务器端. 2) Mustache Mustache是一个logic-less(无逻辑或轻逻辑)语法模板.可以用于组织HTML.配置文件.源代码在内的任何东西.Mustache使用JavaScript对象的值,用来扩展模板代码中的大括号标签. 3) Transparency Transparency是一个强大的客户端模板引擎,用来将数据绑定

理解node的模板引擎

1.1.3:分析模板引擎    1.什么是模板引擎 模板引擎是一个将页面模板和要显示的数据结合生成HTML页面的工具 可以这么理解,如果说Express中的路由控制方法是MVC中的控制器的话,那么模板就是MVC的视图. 什么是ejs? ejs是模板引擎的一种,也是在1.1.2节中用到的模板引擎,因为它使用起来非常简单,而且与express集成良好. 2.使用模板引擎 我在之前讲过通过以下两行代码设置模板文件的存储位置和使用的模板引擎: app.set('views', path.join(__d

Node学习之（第三章：art-template模板引擎的使用）

前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的JavaScript 模板引擎,不仅可以在浏览器(前端)使用,同时也可以在Node中使用. GitHub地址:art-template 文档:官方中文 本章节我们来探讨下Node中使用art-template模板引擎生成一个标准的HTML文档. 主体 art-template原理就是将一个字符串数据按照模

为什么应使用 Node.js

为什么应使用 Node.js JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样,现在我们也可以在服务器上运行 JavaScript ,从前端跨越到后端,这样巨大的反差让人难以想象,因为仅仅在几年前 Javascript 还如同 Flash 或者 Java applet 那样嵌入网页在沙箱环境中运行. 在深入Node.js之前,你可能需要阅读和了解使用跨栈式 JavaScript(JavaScript across the s