13.3 文本型仅原型注释块：代码追加

JAVASCRIPT 和 CSS 模板模式（TEXT 模式不支持）允许通过特殊注释语法 /*[+...+]*/ 包裹代码——Thymeleaf 处理模板时会自动移除该注释标记，将包裹的代码「解封」并纳入执行逻辑：

var x = 23;

/*[+

var msg  = "This is a working application";

+]*/

var f = function() {
    // ... 业务逻辑
};

Thymeleaf 处理后输出：

var x = 23;

var msg  = "This is a working application";

var f = function() {
    // ... 业务逻辑
};

注释块内可包含 Thymeleaf 表达式，处理时会先解析表达式，再解封代码：

var x = 23;

/*[+

var msg  = "Hello, " + [[${session.user.name}]];

+]*/

var f = function() {
    // ... 业务逻辑
};

核心解析

1. 语法与核心规则

• 专属模式：仅适用于 JAVASCRIPT/CSS 模板模式（独立的 .js/.css 文件），TEXT 模式不支持；
• 注释格式：必须严格遵循 /*[+ 代码 +]*/，开头的 /*[+ 和结尾的 +]*/ 不可拆分；
• 处理逻辑：Thymeleaf 仅移除注释标记，保留内部所有代码/表达式，且表达式会正常解析执行；
• 静态原型特性：静态预览时（直接打开 .js/.css 文件），/*[+...+]*/ 是合法的 JS/CSS 注释，内部代码不会执行；动态处理时，代码被解封并生效——完美契合「原生模板」的设计理念。

2. 典型使用场景

• 环境区分代码：静态原型时隐藏后端依赖的动态代码，动态渲染时激活：

  /* CSS 模式示例 */
  .container {
    padding: 16px;
  }
  /*[+
  :root {
    --theme-color: [[${theme.primary}]]; /* 动态主题色，静态时注释隐藏 */
  }
  +]*/

• 动态逻辑追加：在独立 JS 文件中嵌入后端传递的动态变量/逻辑，避免静态预览时报错：

  // 静态预览时仅执行基础逻辑
  var app = {
    version: "1.0.0"
  };
  /*[+
  // 动态渲染时追加用户相关逻辑
  app.user = /*[[${session.user}]]*/ null;
  +]*/

3. 与 HTML 中仅原型注释块的区别

类型	语法格式	适用场景	核心作用
文本型仅原型注释块	/*[+...+]*/	独立 .js/.css 文件	解封代码（追加执行）
HTML 仅原型注释块	<!--/*/.../*/-->	HTML 模板内的 script/style	激活内联表达式

总结

1. /*[+...+]*/ 是 JAVASCRIPT/CSS 模板模式专属的仅原型注释块，静态时为注释（代码隐藏），动态时解封代码（执行逻辑）；
2. 块内可嵌入 Thymeleaf 表达式，处理时先解析表达式再解封代码；
3. 核心价值：在独立的 .js/.css 文件中实现「静态原型友好、动态渲染正确」的动态逻辑追加，无需修改静态代码结构。