Blaze 是一个功能强大的库，它通过编写响应式 HTML 模板来创建用户界面。与使用传统模板和 jQuery 的组合相比，Blaze 消除了应用程序中用于监听数据更改和操作 DOM 的所有“更新逻辑”。相反，熟悉的模板指令（如 {{#if}} 和 {{#each}}）与 Tracker 的“透明响应式”和 Minimongo 的数据库游标集成在一起，以便 DOM 自动更新。

快速入门

Blaze 目前仅是 Meteor 专用软件包。很快我们将在 npm 上发布 Blaze，以便您可以在您的技术栈中使用它。

您创建的每个新的 Meteor 项目都包含 Blaze（blaze-html-templates 软件包）。

先决条件

以前，jQuery 与 Blaze 捆绑在一起。在更高版本中，Blaze 不再直接依赖 jQuery。在某些遗留的 Blaze 软件包中，您可能会遇到以下错误。

1

Uncaught Error: jQuery not found

为了缓解此错误，建议将 jQuery 安装为 npm 或 atmospherejs 软件包。

使用 npm 安装 jquery

进入项目根目录。

1

meteor npm install jquery@latest --save

在 client/main.js 中导入 jQuery。

1

import $ from 'jquery';

使用 atmospherejs 安装 jquery

进入项目根目录。

1

meteor add [email protected]

在 client/main.js 中导入 jQuery。

1

import {$} from 'meteor/jquery';

详情

Blaze 包含两个主要部分

• 一个模板编译器，它将模板文件编译成针对 Blaze 运行时库运行的 JavaScript 代码。此外，Blaze 提供了一个编译器工具链（类似于 LLVM），它可用于支持任意模板语法。旗舰模板语法是 Spacebars，它是 Handlebars 的变体，但许多应用程序已经使用基于 Jade 的社区替代方案。

• 一个响应式 DOM 引擎，它在运行时构建和管理 DOM，通过模板或直接从应用程序调用，该引擎具有响应式更新区域、列表和属性；事件委托；以及许多回调和钩子，以帮助应用程序开发人员。

Blaze 有时因其高级模板系统而被比作 React、Angular、Ember、Polymer、Knockout 等框架。Blaze 的与众不同之处在于它对开发者体验的执着追求，它使用模板、透明响应式和与现有库的互操作性来创造一个平缓的学习曲线，同时让您能够构建世界一流的应用程序。

示例

以下是一个名为“排行榜”的示例应用程序中的两个 Spacebars 模板，该应用程序显示了排名前列的玩家及其分数的排序列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<template name="leaderboard">
  <ol class="leaderboard">
    {{#each players}}
      {{> player}}
    {{else}}
      {{> no_players}}
    {{/each}}
  </ol>
</template>

<template name="player">
  <li class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </li>
</template>

<template name="no_players">
  <li class="no-players">
    No players available
  </li>
</template>

模板标签 和 指的是数据上下文（当前玩家）的属性，而 players 和 selected 指的是助手函数。助手函数和事件处理程序是在 JavaScript 中定义的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Template.leaderboard.helpers({
  players: function () {
    // Perform a reactive database query against minimongo
    return Players.find({}, { sort: { score: -1, name: 1 } });
  }
});

Template.player.events({
  'click': function () {
    // click on a player to select it
    Session.set("selectedPlayer", this._id);
  }
});

Template.player.helpers({
  selected: function () {
    return Session.equals("selectedPlayer", this._id) ? "selected" : '';
  }
});

无需额外的 UI 代码来确保玩家列表保持最新，或者当用户点击玩家时，“selected” 类按需添加到 LI 元素或从 LI 元素中删除。

得益于强大的模板语言，编写循环、包含其他模板或绑定属性（或属性的一部分）并不需要太多仪式。并且由于 Tracker 的透明响应式，在依赖数据库或 Session 等响应式数据源时，也不需要任何仪式；当您读取值时，它会自动发生，并且当值发生变化时，DOM 将以细粒度的方式更新。

原则

平缓的学习曲线

要开始使用 Blaze，您不必学习很多概念或术语。作为 Web 开发人员，我们已经是 HTML、CSS 和 JavaScript 的学生，这些都是用厚厚的书籍描述的复杂技术。Blaze 让您能够以激动人心的新方式运用您现有的知识，而无需先阅读另一本书。

许多因素促成了 Blaze 易于学习和使用，包括以下其他原则。总的来说，我们更喜欢导致简单且明显的应用程序代码的 API，并且我们认识到开发人员学习新的和不熟悉的术语和语法的時間和精力有限。

在为响应式 HTML 创建系统时，“保持简单”和优先考虑开发者体验可能听起来显而易见，但它也是一个挑战，我们认为它做得还不够！我们使用来自 Meteor 社区的反馈来确保 Blaze 的功能保持简单、易懂和有用。

透明响应式

在幕后，Blaze 使用 Tracker 库自动跟踪何时重新计算每个模板助手。例如，如果助手从客户端数据库中读取值，则当值发生变化时，助手将自动重新计算。

这对开发人员来说意味着什么？很简单。您不必显式声明何时更新 DOM，甚至不必执行任何显式的“数据绑定”。您不必了解 Tracker 的工作原理，甚至不必完全了解“响应式”的含义，就能从中获益。与其他方法相比，这将减少思考和输入。

干净的模板

Blaze 采用 Handlebars 和 Jade 等流行的模板语法，这些语法干净、易读，并且对来自其他框架的开发人员来说很熟悉。

一个好的模板语言应该清楚地区分特殊的“模板指令”（通常用花括号括起来）和 HTML，并且它不应掩盖生成的 HTML 的结构。这些属性使得模板成为一个易于在静态 HTML 之后（或与之并存）学习的概念，并且使得模板易于阅读、易于使用 CSS 进行样式设置，以及易于与 DOM 相关联。

相比之下，一些较新的框架试图将模板重新定义为只包含 HTML（Angular、Polymer）或用 JavaScript 替换它们（React）。这些方法往往会模糊模板的结构，或者模糊什么是真正的 DOM 元素以及什么是假的，或者两者兼而有之。此外，由于模板通常作为最佳实践进行预编译，因此浏览器是否能够解析原始模板源代码并不重要。同时，阅读、编写和维护模板的开发人员体验非常重要。

插件互操作性

Web 开发人员经常共享 HTML、JavaScript 和 CSS 代码段，或者将它们发布为库、小部件或 jQuery 插件。他们希望嵌入视频、地图和其他第三方内容。

Blaze 不假定它拥有整个 DOM，并且它尽量少地对 DOM 进行假设，除了它的更新之外。它与 jQuery 的清理例程挂钩，以防止内存泄漏，并且它保留了由 jQuery 或任何第三方库添加到元素的类、属性和样式。

虽然 Blaze 和 jQuery 肯定会互相踩踏，但如果您不小心，但也有一些已知的模式可以保持和平，并且 Blaze 开发人员有权期望能够在他们的应用程序中使用更广泛的 Web 社区提供的各种小部件和增强功能。

与其他库的比较

与 Backbone 和其他仅重新渲染模板的库相比，Blaze 重新渲染的次数要少得多，并且不会遇到令人讨厌的“嵌套视图”问题，即当两个模板无法彼此独立更新时，因为其中一个嵌套在另一个模板中。此外，Blaze 使用 Tracker 自动确定何时必须发生重新渲染。

与 Ember 相比，Blaze 提供了更细粒度的自动 DOM 更新。由于 Blaze 使用了 Tracker 的透明响应式，因此您不必执行显式的“数据绑定”来将数据放入您的模板，或者声明每个模板助手的依赖关系。

与 Angular 和 Polymer 相比，Blaze 的学习曲线更平缓，概念更简单，模板语法更美观，可以清楚地将模板指令和 HTML 分开。此外，Blaze 的目标是当今的浏览器，而不是围绕假设的“未来浏览器”设计。

与 React 相比，Blaze 更强调 HTML 模板而不是 JavaScript 组件类。模板比 JavaScript 代码更易于理解，并且更容易阅读、编写和使用 CSS 进行样式设置。React 并没有使用 Tracker，而是依赖于显式的“setState”调用和数据模型差异来实现高效的渲染。

未来工作

组件

Blaze 将获得更好的模式来创建可重用的 UI 组件。模板已经作为可重用组件，在一定程度上已经实现了。改进将重点关注

• 参数处理
• 本地响应式状态
• “方法”，这些方法可以从其他组件调用，并具有副作用，与当前的“助手”相比，这些助手是从模板语言调用的，并且是“纯净”的
• 范围和查找链
• 继承和配置

表单

大多数应用程序都有很多表单，其中使用输入字段和其他小部件来输入数据，然后必须验证这些数据并将其转换为数据库更改。Rails 和 Django 等服务器端框架在这方面有完善的模式，但客户端框架通常比较缺乏，这可能是因为它们与数据库的联系更疏远。

Meteor 开发人员已经找到了处理表单和验证的方法，并构建了相应的软件包，但我们认为，将此功能纳入 Meteor 的核心功能，作为开箱即用的体验，是一个巨大的机遇。

移动设备和动画

Blaze 将满足移动 Web 的需求，包括增强的性能和触摸和其他移动交互模式。

我们还将改进开发人员将动画过渡集成到他们的应用程序中的便利性。

模板中的 JavaScript 表达式

我们计划支持模板中的 JavaScript 表达式。这将使模板更具表现力，并且通过消除对特定类别的单行助手的需求，它将进一步缩短应用程序代码。

反对在模板语言中允许 JavaScript 表达式的常见论点是“关注点分离”——将业务逻辑与表示分离，以便业务逻辑可以更好地组织、维护和独立测试。同时，即使是“无逻辑”的模板语言也经常会包含一些让步，例如用于在使用数据之前过滤、查询和转换数据的微语法。然后，必须学习这种特殊语法（及其扩展机制）。

虽然将业务逻辑从模板中分离出来确实是一个好策略，但还有一大类“表示逻辑”不能真正与模板和 HTML 的关注点分离，例如用于计算样式和应用于 HTML 元素的类的代码，或者将数据记录整理成更适合模板化目的的形式。在许多情况下，如果此代码很短，将其嵌入模板中可能更方便或更易读，而且肯定比将模板语法向偏离 JavaScript 的方向发展要好。

由于模板已预编译为 JavaScript 代码，因此允许在模板中使用 JavaScript 的很大一部分并没有什么本质上的困难或不优雅之处（例如，请参见 Ractive.js 项目）。

其他模板增强功能

用于调试模板的源映射。想象一下在浏览器调试器中看到您的模板代码！非常灵活。

真正的词法作用域。

更好地支持可插拔模板语法（例如 Jade 风格的模板）。现在已经可以使用 Jade 包，但我们应该从中吸取教训，并澄清模板语法作者正在针对的抽象边界。

可插拔后端（不需要 jQuery）

虽然 Blaze 目前需要 jQuery，但它的架构使其能够通过通用适配器接口运行在其他“DOM 后端”。您可以使用 Zepto，或者如果出于某种原因浏览器兼容性对您的应用程序不是什么大问题，则可以使用一些非常小的垫片。目前，除了 jQuery 之外，还没有编写过此类适配器。

Blaze 团队尝试过放弃 jQuery 并直接与“现代浏览器”对话，但事实证明，jQuery 的核心代码大约有 5-10K 代码，即使你不关心旧浏览器或支持 jQuery 面向应用程序的 API（仅为了将浏览器提升到网络开发人员的适度期望，就需要使用此 API），你也无法删除这些代码。

更好的独立支持

Blaze 将获得更好的支持，以便在 Meteor 之外使用它，例如常规的独立构建。

资源

• 模板 API
• Blaze API
• Spacebars 语法

包

• blaze
• blaze-tools
• html-tools
• htmljs
• spacebars
• spacebars-compiler