Handlebars:

<p>
  {{#if title}}
    <h4>{{title}}</h4>
  {{/if}}
  {{#if list}}
    {{#each list}}
      <li>{{this}}</li>
    {{/each}}
  {{/if}}
  {{#if map}}
    {{#each map}}
      <p>
        <span>{{key}}</span>
        :
        <span>{{value}}</span>
      </p>
    {{/each}}
  {{/if}}
</p>

Jade:

p
  if title
    h4.title= title
  if list
    ul
      each item in list
        li= item
  if map
    p
      span= key
      | :
      span= value

测试代码 CoffeeScript 版本:

data =
  title: 'a title'
  list: [
    'line a'
    'line b'
    'line c'
    'line d'
  ]
  map:
    a: 'this is a'
    b: 'this is b'
    c: 'this is c'
console.time 'Handlebars'
[1..10000].map ->
  Handlebars.templates['template.hbs'](data)
console.timeEnd 'Handlebars'

console.time 'jade'
[1..10000].map ->
  jade.attrs data
console.timeEnd 'jade'

测试代码编译到 JS:

// Generated by CoffeeScript 1.6.3
var data, _i, _j, _results, _results1;

data = {
  title: 'a title',
  list: ['line a', 'line b', 'line c', 'line d'],
  map: {
    a: 'this is a',
    b: 'this is b',
    c: 'this is c'
  }
};

console.time('Handlebars');

(function() {
  _results = [];
  for (_i = 1; _i <= 10000; _i++){ _results.push(_i); }
  return _results;
}).apply(this).map(function() {
  return Handlebars.templates['template.hbs'](data);
});

console.timeEnd('Handlebars');

console.time('jade');

(function() {
  _results1 = [];
  for (_j = 1; _j <= 10000; _j++){ _results1.push(_j); }
  return _results1;
}).apply(this).map(function() {
  return jade.attrs(data);
});

console.timeEnd('jade');

执行结果:

Handlebars: 301.678ms
jade: 32.990ms 

代码备份在 Github 上:

https://github.com/jiyinyiyong/jade-test

在线的版本在这里:

http://s.jiyinyiyong.info/jade-test/index.html

是不是我写的有错误的? 这个结果看起来好别扭…