介绍

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

特性

  1. 拥有接近 JavaScript 渲染极限的的性能
  2. 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
  3. 支持 Express、Koa、Webpack
  4. 支持模板继承与子模板
  5. 浏览器版本仅 6KB 大小

安装

服务端安装

  1. npm install art-template --save

客户端安装
下载工具包引用（6KB）

配置

  1. // 模板名
  2. filename: null,
  4. // 模板语法规则列表
  5. rules: [nativeRule, artRule],
  7. // 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
  8. // escape 可以防范 XSS 攻击
  9. escape: true,
  11. // 启动模板引擎调试模式。如果为 true: {cache:false, minimize:false, compileDebug:true}
  12. debug: detectNode ? process.env.NODE_ENV !== 'production' : false,
  14. // bail 如果为 true，编译错误与运行时错误都会抛出异常
  15. bail: true,
  17. // 是否开启缓存
  18. cache: true,
  20. // 是否开启压缩。它会运行 htmlMinifier，将页面 HTML、CSS、CSS 进行压缩输出
  21. // 如果模板包含没有闭合的 HTML 标签，请不要打开 minimize，否则可能被 htmlMinifier 修复或过滤
  22. minimize: true,
  24. // 是否编译调试版
  25. compileDebug: false,
  27. // 模板路径转换器
  28. resolveFilename: resolveFilename,
  30. // 子模板编译适配器
  31. include: include,
  33. // HTML 压缩器。仅在 NodeJS 环境下有效
  34. htmlMinifier: htmlMinifier,
  36. // HTML 压缩器配置。参见 https://github.com/kangax/html-minifier
  37. htmlMinifierOptions: {
  38.     collapseWhitespace: true,
  39.     minifyCSS: true,
  40.     minifyJS: true,
  41.     // 运行时自动合并：rules.map(rule => rule.test)
  42.     ignoreCustomFragments: []
  43. },
  45. // 错误事件。仅在 bail 为 false 时生效
  46. onerror: onerror,
  48. // 模板文件加载器
  49. loader: loader,
  51. // 缓存中心适配器（依赖 filename 字段）
  52. caches: caches,
  54. // 模板根目录。如果 filename 字段不是本地路径，则在 root 查找模板
  55. root: '/',
  57. // 默认后缀名。如果没有后缀名，则会自动添加 extname
  58. extname: '.art',
  60. // 忽略的变量。被模板编译器忽略的模板变量列表
  61. ignore: [],
  63. // 导入的模板变量
  64. imports: runtime

使用

目录结构
image.png
具体配置

  1. // view engine setup
  2. app.engine('art', require('express-art-template'));
  3. app.set('view options', {
  4.     debug: process.env.NODE_ENV !== 'production',
  5.     escape: false // 转化HTML5代码 
  6. });
  7. app.set('views', path.join(__dirname, './view'));
  8. app.set('view engine', 'art')

渲染方式

  1. import template from "art-template/lib/template-web.js"
  2. let templateForIndex = "<h1>{{ content }}</h1>"
  4. // 以下两种方式，二选一即可。
  6. // 使用 render
  7. document.getElementById("container").innerHTML = template.render(templateForIndex, {
  8.   content: "哈哈哈"
  9. });
  11. // 使用 compile
  12. let renderFunction = template.compile(templateForIndex);
  13. document.getElementById("container").innerHTML = renderFunction({
  14.     content: "哈哈哈"
  15. })