1、[[...]] 在 Thymeleaf 中认为是内联表达式
2、th:inline="text/javascript/css/none"
3、注释 /*<![CDATA[*/ ... /*]]>*/
1、[[...]] 在 Thymeleaf 中认为是内联表达式
<p>[[${session.user.name}]]!</p>
等同于: <p><span th:text="${session.user.name}"></span>!</p>
注意: 使用内联样式之前,我们需要必须先用 th:inline="text/javascript/none" 明确启用此模式。
<body/>中不激活默认以字符串形式输出,而javascript必须激活才能使用[ [...] ]。
关于 [[...]] --> /*[[...]] */
<script th:inline="javascript">
...
var username = [[${session.user.name}]];
...
</script>
输出结果:
<script th:inline="javascript">
...
var username = "Sebastian \"Fruity\" Applejuice";
...
</script>
JavaScript内联不仅会输出所需的文本,而且还会用引号和JavaScript来包含它 - 转义其内容,以便将表达式结果输出为格式良好的JavaScript文字。
发生这种情况是因为我们将${session.user.name}
表达式输出为转义,如果相反,我们使用非转义
<script th:inline="javascript">
...
var username = [(${session.user.name})];
...
</script>
输出结果:
<script th:inline="javascript">
...
var username = Sebastian "Fruity" Applejuice;
...
</script>
...这是一个格式错误的JavaScript代码。但是,如果我们通过附加内联表达式来构建脚本的一部分,那么输出未转义的内容可能就是我们所需要的,因此最好有这个工具。
JavaScript自然模板:在JavaScript注释中包装我们的(转义的)内联表达式
<script th:inline="javascript">
...
var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
...
</script>
输出结果:
<script th:inline="javascript">
...
var username = "Sebastian \"Fruity\" Applejuice";
...
</script>
Thymeleaf 将忽略我们在注释之后和分号之前(在这种情况下'Gertrud Kiwifruit')编写的所有内容。
请注意这是有效的JavaScript代码。当您以静态方式打开模板文件时(无需在服务器上执行),它将完美执行。所以我们这里有一个做自然模板的方法!
2、th:inline="text/javascript/css/none"
2.1、th:inline="css"
css内联,明确启用此模式
假如我们定义俩个变量:
classname = 'main elems'
align = 'center
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>
具体来说,通过转义表达式输出的表达式[[${classname}]]
将作为CSS标识符进行转义。
2.2、th:inline="text"
文字内联,明确启用此模式
2.3、th:inline="/javascript"
JavaScript内联,明确启用此模式
2.4、th:inline="none"
禁用内联,明确启用此模式
3、注释 /*<![CDATA[*/ ... /*]]>*/
/*<![CDATA[*/ ... /*]]>*/ 为了兼容支持xml文档和不支持xml(即只支持html文档)文档的浏览器而设计的。
在支持xml文档中虽然用' /* */' 注释掉代码但xml文档中仍可识别出属于xml的代码<![CDATA[ 和 ]]>,所以代码中有大于'>'小于'<'之类的特殊字符不会发生错误,因为在xml文档中这些都是特殊字符。
而不支持xml文档中,这些大于小于号就不是特殊字符了,由于<![CDATA[ 和 ]]>是xml代码所以不注释掉就会发生错误。
所以上述设计达到了兼容支持xml文档和不支持xml文档的要求。
通常 CDATA 里面放一些‘一字不改的数据’,比如源代码,比如Javascript源码。
参考文献:Thymeleaf 官方文档