高性能 JavaScript 模板引擎 Art-template 使用方法 - 文章教程

高性能 JavaScript 模板引擎 Art-template 使用方法

发布于 2019-06-15 字数 3440 浏览 1599 评论 0

Art-template 是一个款性能卓越的 JavaScript 模板引擎,它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。

特点

快速

在编译阶段优化,带来近乎极限的运行速度。

高性能 JavaScript 模板引擎 Art-template 使用方法

调试

无论语法还是运行时错误,都能定位到模板所在行。

高性能 JavaScript 模板引擎 Art-template 使用方法

Browser Debug:

高性能 JavaScript 模板引擎 Art-template 使用方法

语法

使用简单的模板语法,同时支持原始 JavaScript 语句、兼容 EJS 模板。

高性能 JavaScript 模板引擎 Art-template 使用方法

  • 拥有接近 JavaScript 渲染极限的的性能
  • 调试友好:语法、运行时错误日志精确到模板所在行;支持支持在模板文件上打断点(Webpack Loader)
  • 支持压缩输出页面中的 HTML、CSS、JS 代码
  • 支持 Express、Koa、Webpack
  • 支持模板继承与子模板
  • 兼容 EJSUnderscoreLoDash 模板语法
  • 模板编译后的代码支持在严格模式下运行
  • 支持 JavaScript 语句与模板语法混合书写
  • 支持自定义模板的语法解析规则
  • 浏览器版本仅 6KB 大小

用法

1、使用

引用简洁语法的引擎版本,例如下面:

<script src="dist/template.js"></script>

2、表达式

{{}} 符号包裹起来的语句则为模板的逻辑表达式。

3、输出表达式

对内容编码输出:{{content}}
不编码输出:{{#content}}

编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。

4、条件表达式

{{if admin}}
 <p>admin</p>
{{else if code > 0}}
 <p>master</p>
{{else}}
 <p>error!</p>
{{/if}}

5、遍历表达式

{{each list as value index}}
 <li>{{index}} - {{value.user}}</li>
{{/each}}

6、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

子模板默认共享当前数据,亦可以指定数据:

{{include 'template_name' news_list}}

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0