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