Aurelia模板语言工作原理、语法特性及自定义语法可行性问询

嘿，这个问题问到点子上了！作为长期和Aurelia打交道的开发者，我来一步步拆解这些疑问：

一、Aurelia模板语言的核心工作机制 #

Aurelia走的是HTML优先的路线，它的模板本质是增强版的HTML，而非JS模板字面量。核心流程分两大阶段：

1. 编译阶段：Aurelia的模板编译器会扫描你的HTML模板，识别出插值表达式、自定义元素、属性绑定、事件绑定等语法，把它们转换成抽象语法树（AST）。接着，编译器会基于AST生成对应的渲染逻辑——这些逻辑负责把ViewModel的数据和DOM节点关联起来。
2. 运行时阶段：当ViewModel里的数据发生变化时，Aurelia的响应式系统会立刻感知到，然后触发绑定更新，精准地修改对应的DOM节点内容或属性，全程不需要重新渲染整个模板。

二、为什么语法和Template Literals这么相似？ #

这完全是Aurelia团队的设计考量：

• 模板字面量（${}）是JS里已经被广泛接受的优雅插值语法，开发者一看就懂，学习成本极低。Aurelia借鉴这种写法，能让开发者快速上手，不用重新适应一套全新的标记。
• 虽然看起来像，但两者的本质天差地别：模板字面量是JS引擎直接解析求值，属于静态/一次性的字符串拼接（除非用标签函数做扩展，但那也是JS层面的逻辑）；而Aurelia的${}是响应式绑定的入口，背后关联着数据监听、DOM更新的整套机制。

三、底层并非真正的Template Literals，具体如何运作？ #

举个具体的例子，假设你有这样的模板：

<p>Hello, ${name}!</p>

它的运作流程是：

1. 编译器扫描到${name}，会生成一个绑定表达式，关联到ViewModel的name属性。
2. 运行时，Aurelia会给name属性添加响应式监听——当name的值改变时，监听回调会触发。
3. 回调执行时，Aurelia会找到对应的<p>标签里的文本节点，把旧内容替换成新的name值，而不是像模板字面量那样重新拼接整个字符串再替换DOM。

简单说，Aurelia的${}是数据绑定的标记，而模板字面量是字符串插值的语法，底层逻辑完全不同。

四、能否使用{{ message }}这类不同的语法？怎么实现？ #

当然可以！Aurelia允许你自定义插值的起始和结束标记，步骤很简单：

如果你用的是Aurelia 2.x： #

在应用启动的配置代码里，自定义TemplateCompiler的插值配置：

import { Aurelia, TemplateCompiler } from 'aurelia';

Aurelia
  .register(TemplateCompiler.customize({
    interpolationConfig: { start: '{{', end: '}}' }
  }))
  .app(MyApp) // 替换成你的根组件
  .start();

如果你用的是Aurelia 1.x： #

在main.js的配置阶段添加插值设置：

import { Aurelia } from 'aurelia-framework';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .interpolation('{{', '}}'); // 在这里指定自定义标记

  aurelia.start().then(() => aurelia.setRoot());
}

配置完成后，你就可以在模板里用{{ message }}代替${message}了，完全不影响响应式绑定的功能。

内容的提问来源于stack exchange，提问作者isar