thymeleaf在js中取后台放在model中值的各種方式及區別

本文參考中 thymeleaf文檔中文版 

內聯腳本(JavaScript inlining)

內聯腳本為HTML模板模式下的的JavaScript的<script>塊提供更好的集成。

和 內聯文本 一樣

這個模式需要使用th:inline="javascript"顯式開啟，即必須在<script></scipt>標簽上加上：

<script th:inline="javascript">
    ...
    
    ...
</script>

 

1、雙中括號 [[ ]] 輸出所需文本，結果會使用引號將其括起來並且對其文本內容中進行JS轉義

 

<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>

　　輸出結果：　

<script th:inline="javascript">
    ...
    var username = "諸葛\"孔明\"";
    ...
</script>

　　首先， 內聯腳本不僅會輸出所需文本，還會使用引號將其括起來並且對其內容進行JS轉義，因此表達式的結果將會被輸出為 格式正確的JS文本

　　例：用戶在輸入框中輸入  >  今天真是一個"好"天氣，這樣存入數據庫，再取出來放在js中時，因為會轉義成一整句字符串："今天真是一個\"好\"天氣"

 

2、中括號小括號 [( )] 輸出所需文本，不會轉義字符串中的內容，也不會在字符串兩頭加上引號

 

<script th:inline="javascript">
    ...
    var arr = [(${session.user.name})];
    ...
</script>

輸出結果：

<script th:inline="javascript">
    ...
    var arr = 諸葛孔明;
    ...
</script>

　　兩端沒了引號，js會報錯，這種可直接使用后台傳過來的轉成json字符串后的對象或數組等，當然這只是舉個例子，如果想使用數組或對象，后面有更好的方法

 

3、用多行注釋 /* */ 輸出文本，Thymeleaf會忽視一切注釋之后和分號之前的內容，即可以看成用注釋中的內容替換了后面的內容 （個人最推薦寫法）

 

<script th:inline="javascript">
    ...
    var username = /*[[${session.user.name}]]*/ "用戶的名稱";
    ...
</script>

輸出結果：

<script th:inline="javascript">
    ...
    var username = "諸葛孔明";
    ...
</script>

　　這里thymeleaf解析時，直接用注釋里的內容把從注釋到此句結束，即分號之前的所有內容替換成要取出的文本內容

　　個人比較推薦這種寫法，因為這樣，html即可以做為靜態文件打開，也可以解析后由后台插入數據

例如：前端寫出的頁面里跳轉為：

url: "./user_edit.html";

而我們替換成我們后台獲取頁面的絕對路徑，這樣寫 當你靜態的打開模板文件時（不通過服務器執行）它也會完美運行, 即不影響直接用瀏覽器打開頁面跳轉，也不影響后台thymeleaf解析使用

url: /* [[@{/userEdit/getPage}]] */ "./user_edit.html" ;

 

高級內聯計算和JavaScript序列化

表達式的計算是智能且不局限於字符串的。Thymeleaf會將下列類型的對象用JavaScript語法正確輸出：

• Strings
• Numbers
• Booleans
• Arrays
• Collections
• Maps
• Beans (必須有getter和setter方法) 

<script th:inline="javascript">
  ...
  var user = /*[[${session.user}]]*/ null;
  ...
</script>

${session.user}確定為一個User對象，那么Thymeleaf會正確的將其轉化為Javascript語法，輸出結果：

<script th:inline="javascript">
  ...
  var user = {"age":null,"firstName":"John","lastName":"Apricot",
              "name":"John Apricot","nationality":"Antarctica"};
  ...
</script>

JavaScript的序列化是通過實現org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer接口完成，可以在模板引擎使用的StandardDialect實例中配置。

JS序列化的默認實現是在classpath下尋找Jackson庫，如果該庫存在，則調用其方法實現。如果不存在，則會調用內置的序列化方法。這個方法覆蓋了絕大多數場景的需求，並且提供相似的結果（但是靈活性較差）。