好久没发新东西了,嘿嘿嘿~
发布于 2 个月前 作者 weivea 954 次浏览 来自 分享

ts-template

ts-template 嘿嘿嘿,一个基于模板字符串的模板引擎的最简实现~, 只适用于node环境,

usage 使用

模板字符串的语法,发挥想象吧,嘿嘿嘿~


test.js

const RenderClass = require('ts-template');

const renderVm = new RenderClass({
  rootName: 'root', // 数据跟字段 defaut: 'root'
  baseDir: '' // 模板根目录 defaut: path.join(process.cwd(), 'view');
  cache: true, // 是否缓存 defaut: true
})

renderVm.render('test.html', data)
renderVm.renderString('<div>${root.a} + ${root.b} = ${root.a + root.b}</div>', {
  a:1,
  b:2
})

test.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>ts-template</title>
  <style type="text/css">
    body {
      background: rebeccapurple;
    }
  </style>
  <script>
    var a = ${root.a};
  </script>
</head>

<body>
  include模板:
  ${await this.include('aa.html')}
  <div>嘿嘿嘿</div>
  1341<br>

  转意:
  ${e(root.b)}

  自运行函数:
  ${(() => { return 'adadfadfasdf' })()}
</body>

</html>

extension 扩展

const RenderClass = require('ts-template');
class SubRenderClass extends RenderClass {
  constructor(opt) {
    super(opt)
  }
  // format函数
  dateFormat(data, 'yyyy-MM-dd') {
    // ...
  }
  // async 函数
  async getFileData(fileName) {
    return new Promise((resolve, reject) => {
      fs.readFile(file, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(data.toString('utf-8'));
        }
      });
    });
  }
} 
const renderVm = new SubRenderClass({
  rootName: 'root', // 数据跟字段 defaut: 'root'
  baseDir: '' // 模板根目录 defaut: path.join(process.cwd(), 'view');
  cache: true, // 是否缓存 defaut: true
})

renderVm.renderString('<div>${_.dateFormat(root.time)}</div> <div>${await _.getFileData(root.file)}</div>', {
  time: 1518344445732,
  file: '/path/to/file.txt'
})
// 或者
renderVm.renderString('<div>${this.dateFormat(root.time)}</div> <div>${await this.getFileData(root.file)}</div>', {
  time: 1518344445732,
  file: '/path/to/file.txt'
})
3 回复

噗,难兄难弟,zero star惨案。 我之前也发布了一个HTML模板引擎,leopard-template,发布了几天了也是零回复零star。 不过你的实现思路似乎我的简洁很多,学习一下。

emmm…看完了,哈,你这。。。模板里直接写了ES6模板字面量,而且连this都带上了。怪不得模板都不用解析就直接丢进渲染函数里了。。。

@stop2stare 哈哈哈,完全只是利用es6的特性做的,木有什么高级的东西

回到顶部