DustJS 模板引擎语法详解：从基础到高级用法-CSDN博客

DustJS 模板引擎语法详解：从基础到高级用法

什么是 DustJS

DustJS 是一款专为 JavaScript 设计的模板引擎，其核心理念是实现表现层与逻辑层的清晰分离，同时保持易用性。特别适合异步和流式应用场景。DustJS 通过简洁而强大的语法，让开发者能够高效地构建动态内容。

基础语法结构

DustJS 模板主要使用两种标签类型：键(Keys)和区块(Sections)。键用于引用视图上下文中的字段，相当于数据占位符；而区块则接受可以枚举、过滤或以各种方式转换的模板块。

键(Keys)的基本使用

在模板中引用视图上下文中的键时，只需用花括号包裹键名：

Hello {name}!

假设上下文数据为：

{ name: "Fred" }

输出结果为：

Hello Fred!

如果键不存在，DustJS 会输出空字符串：

Hello !

安全过滤机制

DustJS 默认会对所有键内容进行 HTML 转义。例如当 name 键包含恶意脚本时：

<script>alert('I am evil!')</script>

会被安全地转义为：

&lt;script&gt;alert('I am evil!')&lt;/script&gt;

如需禁用自动转义，可使用 |s 过滤器：

Hello {name|s}

DustJS 提供多种内置过滤器：

h: 强制 HTML 转义
j: JavaScript 字符串转义
u: 等同于 JavaScript 的 encodeURI
uc: 等同于 JavaScript 的 encodeURIComponent

过滤器可以链式使用，按从左到右的顺序应用：

Hello {name|s|h|u}

区块(Sections)的高级用法

当需要处理复杂数据结构时，区块就派上用场了。例如处理朋友列表：

{#friends}
  {name}, {age}{~n}
{/friends}

对应数据：

{
  friends: [
    { name: "Moe", age: 37 },
    { name: "Larry", age: 39 },
    { name: "Curly", age: 35 }
  ]
}

输出：

Moe, 37
Larry, 39
Curly, 35

条件渲染与默认内容

使用 {:else} 标签可以定义当区块键为空或不存在时的替代内容：

{#friends}
  {name}, {age}{~n}
{:else}
  You have no friends!
{/friends}

上下文路径解析

DustJS 支持多种路径引用方式：

当前上下文隐式引用：

{#names}{.} {/names}

嵌套上下文访问：

{foo.bar}

限定当前区块作用域：

{.foo}

参数传递技巧

内联参数

内联参数可以直接在区块开始标签中定义：

{#profile bar="baz" bing="bong"}
  {name}, {bar}, {bing}
{/profile}

参数别名

当父子上下文存在键名冲突时，可以使用参数别名：

{name}{~n}
{#profile root_name=name}
  {name}, {root_name}
{/profile}

特殊区块类型

DustJS 提供了几种特殊语义的区块标签：

存在性检查 (? 和 ^)

{?tags}
  <ul>
    {#tags}
      <li>{.}</li>
    {/tags}
  </ul>
{:else}
  No Tags!
{/tags}

上下文辅助 (@)

提供迭代辅助功能，如 sep 和 idx：

{#names}{.}{@idx}{.}{/idx}{@sep}, {/sep}{/names}

输出示例：

Moe0, Larry1, Curly2

模板组合与继承

局部模板(Partials)

{>profile/}

支持动态模板路径：

{>"posts/{type}.dust.html"/}

块(Blocks)与内联局部模板

基础模板定义可覆盖的块：

Start{~n}
{+title}
  Base Title
{/title}
{~n}
{+main}
  Base Content
{/main}
{~n}
End

子模板覆盖块内容：

{>base_template/}
{<title}
  Child Title
{/title}
{<main}
  Child Content
{/main}

实用技巧与注意事项

空白字符处理

使用特殊转义字符控制格式：

Hello World!{~n}

支持的转义序列：

~n: 换行
~r: 回车
~s: 空格
~lb: 左花括号
~rb: 右花括号

注释语法

注释不会出现在最终输出中：

{!
  这是多行注释
  {#不会}{执行}{/不会}
!}

最佳实践建议

对于复杂数据结构，优先使用区块而非多层嵌套键引用
始终考虑安全性，默认使用HTML转义，仅在必要时禁用
利用模板继承机制保持UI一致性
合理使用条件区块减少不必要的逻辑判断
对于频繁使用的UI组件，抽象为局部模板提高复用性

DustJS 通过这些简洁而强大的特性，使开发者能够构建既安全又灵活的模板系统，特别适合大型应用和需要高性能渲染的场景。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考