Thymeleaf中文网

深色模式

13.5 原生JavaScript和CSS模板 ​

正如上一章所述，JavaScript 和 CSS 内联功能支持在 JavaScript/CSS 注释中嵌入内联表达式，示例如下：

javascript
...
var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";
...

这是一段合法的 JavaScript 代码，模板执行后最终可能呈现为：

javascript
...
var username = "John Apricot";
...

事实上，这种将内联表达式包裹在注释中的技巧，可适用于所有文本模式语法：

javascript
/*[# th:if="${user.admin}"]*/
   alert('Welcome admin');
/*[/]*/

上述代码中的弹窗有两种触发场景：

  1. 静态打开模板时（因为这是 100% 合法的 JavaScript 代码）会显示；
  2. 模板运行时，若当前用户是管理员也会显示。

这段代码等价于：

javascript
[# th:if="${user.admin}"]
   alert('Welcome admin');
[/]

而这正是模板解析过程中，最初的注释包裹版本被转换后的最终代码形式。

需要注意的是：与内联输出表达式不同，将代码块包裹在注释中不会清理其所在行的多余内容（即从表达式右侧直到遇到分号 ; 为止的内容）。这种“清理行内容”的行为仅适用于内联输出表达式。

因此，Thymeleaf 3.0 支持以原生模板的形式开发复杂的 JavaScript 脚本和 CSS 样式表——这类模板既可以作为原型直接运行，也能作为实际业务中的可执行模板使用。

总结 ​

  1. Thymeleaf 支持在 JS/CSS 注释中嵌入内联表达式，既保证静态原型的合法性，又能在模板运行时动态渲染；
  2. 注释包裹的语法最终会被解析为标准的 Thymeleaf 文本模式语法，但不会清理行内多余内容（内联输出表达式则会）；
  3. Thymeleaf 3.0 实现了 JS/CSS 原生模板的开发模式，兼顾原型展示和实际业务运行的双重需求。