一、模板引擎的前世今生

前端开发中，动态生成HTML内容是个永恒的话题。还记得十年前，我们还在用字符串拼接的方式硬编码HTML，那叫一个痛苦啊！后来出现了模板引擎，就像沙漠里遇到了绿洲，开发者们终于可以优雅地分离数据和展示了。

在jQuery时代，虽然它本身没有内置模板引擎，但社区涌现了不少优秀的解决方案。其中Handlebars和Mustache这对"兄弟"尤为突出。它们都遵循Mustache语法规范，但又有各自的特点。今天我们就来好好聊聊这两个家伙，看看在实际项目中该如何选择。

二、Mustache：极简主义的艺术

Mustache自称是"无逻辑的模板"，这名字起得真有意思。它的设计哲学是：模板就应该简单到连程序逻辑都不能写！这种极简主义风格让它在很多场景下大放异彩。

先看个简单的例子（技术栈：jQuery + Mustache）：

// 准备模板
var template = `
  <div class="user-profile">
    <h2>{{name}}</h2>
    <p>注册于：{{joinDate}}</p>
    {{#isAdmin}}
      <button class="admin-btn">管理面板</button>
    {{/isAdmin}}
  </div>
`;

// 准备数据
var userData = {
  name: "张三",
  joinDate: "2020-05-15",
  isAdmin: true
};

// 渲染
var rendered = Mustache.render(template, userData);
$('#user-container').html(rendered);

Mustache的语法确实简单到令人发指：

  • {{变量名}} 直接输出
  • {{#条件}}...{{/条件}} 条件区块
  • {{^条件}}...{{/条件}} 反向条件（相当于else）

但它的局限性也很明显：不能写任何逻辑判断，不能格式化数据，遇到复杂需求就得在JavaScript中预处理数据。

三、Handlebars：Mustache的增强版

Handlebars在Mustache基础上做了扩展，自称"Mustache的超集"。它保留了Mustache的核心语法，但加入了必要的逻辑处理能力，让模板更加灵活。

来看个Handlebars的实战例子（技术栈：jQuery + Handlebars）：

// 注册一个helper（Mustache做不到这点）
Handlebars.registerHelper('formatDate', function(date) {
  return new Date(date).toLocaleDateString();
});

// 编译模板
var source = `
  <div class="order-card {{#if express}}express{{/if}}">
    <h3>订单号：{{id}}</h3>
    <p>金额：¥{{amount}}</p>
    <p>下单时间：{{formatDate createTime}}</p>
    {{#each products}}
      <div class="product">
        <span>{{@index}}. {{name}}</span>
        <span>×{{quantity}}</span>
      </div>
    {{/each}}
  </div>
`;

var template = Handlebars.compile(source);

// 准备数据
var orderData = {
  id: "ORD20230515001",
  amount: 158.00,
  createTime: "2023-05-15T14:30:00Z",
  express: true,
  products: [
    {name: "无线鼠标", quantity: 1},
    {name: "机械键盘", quantity: 2}
  ]
};

// 渲染
var html = template(orderData);
$('#order-container').html(html);

Handlebars的几个杀手锏：

  1. 支持自定义Helper（像上面的formatDate）
  2. 内置了if/else、each等逻辑控制
  3. 支持模板继承和局部模板
  4. 预编译模板提升性能

四、深度对比与选型建议

1. 语法能力

Mustache坚持"无逻辑"原则，语法极其简单。Handlebars则提供了必要的逻辑控制，比如：

{{#if active}}
  <span class="active">活跃用户</span>
{{else}}
  <span class="inactive">休眠用户</span>
{{/if}}

这种能力在业务复杂的场景中非常实用。

2. 性能表现

Mustache因为功能简单，初始渲染速度略快。但Handlebars支持预编译：

// 预编译模板（生产环境推荐做法）
var precompiled = Handlebars.precompile(source);
// 然后可以缓存编译后的函数

预编译后，Handlebars的性能反而会超过Mustache。

3. 学习曲线

Mustache的API只有7个方法，半小时就能掌握。Handlebars要学的东西就多多了，Helpers、Partials、Decorators等概念需要时间消化。

4. 使用场景建议

  • 选择Mustache当：

    • 项目简单，只需要基本的数据插值
    • 需要强制分离逻辑和视图
    • 与其他语言共享模板（Mustache有多语言实现）

  • 选择Handlebars当：

    • 需要条件判断、循环等逻辑
    • 需要自定义数据处理（如日期格式化）
    • 项目复杂，需要模板继承等高级功能

五、实战中的注意事项

1. XSS防护

两个引擎默认都不做HTML转义，记得手动处理：

// Handlebars中自动转义
var template = Handlebars.compile("<div>{{{safeHtml}}}</div>");
// 三个大括号不转义，两个大括号会转义

// Mustache需要预先转义
var escapedData = {
  content: escapeHtml(userInput)
};

2. 模板组织

大型项目中，建议这样组织模板：

templates/
  ├── partials/
  │   ├── header.hbs
  │   └── footer.hbs
  ├── helpers.js
  └── main-template.hbs

3. 调试技巧

Handlebars报错更友好，可以这样调试：

try {
  var result = template(data);
} catch (e) {
  console.error("渲染错误:", e.message);
  console.log("问题可能出现在:", e.stack);
}

六、总结与个人建议

经过这么详细的对比，我的建议是：

  1. 小型项目或原型开发用Mustache，快速上手
  2. 企业级应用选Handlebars，功能更全面
  3. 考虑团队熟悉度，如果都不熟，从Mustache开始
  4. 性能敏感场景，两个都支持预编译，差别不大

最后分享一个我最近项目中的真实案例：我们需要在管理后台渲染复杂的报表，有动态列、条件样式、数据格式化等需求。最初尝试用Mustache，结果JavaScript端要做太多数据预处理，最后改用Handlebars，模板可读性大幅提升，维护起来也轻松多了。

模板引擎没有绝对的好坏，关键是要理解它们的哲学差异。Mustache像把瑞士军刀，够简单但功能有限；Handlebars像个工具箱，更重但能应对复杂场景。选择哪个，取决于你的具体需求。