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库，如果该库存在，则调用其方法实现。如果不存在，则会调用内置的序列化方法。这个方法覆盖了绝大多数场景的需求，并且提供相似的结果（但是灵活性较差）。