Thymeleaf——使用模板动态生成JavaScript脚本文件

官方文档

JavaScript和CSS模板：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#natural-javascript-and-css-templates

解决方案

Thymeleaf 3.0允许以一般模板的形式开发复杂的JavaScript脚本和CSS样式表，这些模板既可以作为原型也可以作为工作模板使用。 

JAVASCRIPT模板模式下的另一个示例（greeter.js文件）将作为文本模板进行处理，然后从HTML页面调用该结果。请注意，这不是<script> HTML模板中的块，而是.js单独作为模板处理的文件：

var greeter = function() {

    var username = [[${session.user.name}]];

    [# th:each="salut : ${salutations}"]    
      alert([[${salut}]] + " " + username);
    [/]

};

执行后，其结果可能类似于：

var greeter = function() {

    var username = "Bertrand \"Crunchy\" Pear";

      alert("Hello" + " " + username);
      alert("Ol\u00E1" + " " + username);
      alert("Hola" + " " + username);

};

 JavaScript和CSS内联提供了将内联表达式包含在JavaScript / CSS注释中的可能性，例如：

<span style="color:#333333"><code class="language-javascript">...
var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";
...</code></span>

这是有效的JavaScript，执行后的外观如下：

<span style="color:#333333"><code class="language-html">...
var username = "John Apricot";
...</code></span>

实际上，可以将这种将内联表达式包含在注释中的相同技巧可用于整个文本模式语法：

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

如果模板是静态打开的（因为它是100％有效的JavaScript），并且如果用户是管理员运行模板，则将在上面的代码中显示该警报。它等效于：

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

实际上是模板解析期间将初始版本转换为的代码。

但是请注意，在注释中包装元素并不会;像内联输出表达式那样清除它们所在的行（直到找到a为止，一直在右边）。该行为仅保留给内联输出表达式。

参考文章

https://www.oschina.net/question/221134_2278846