养生
componentart(10个最佳开源JavaScript模板引擎)

背景

Art-template是一个简单且超快速的模板引擎,可通过范围预先声明的技术优化模板渲染速度。它实现了接近Javascript极限的运行时性能。同时,它支持NodeJS和浏览器。

  • 拥有接近 Javascript 渲染极限的的性能
  • 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
  • 支持 Express、Koa、Webpack
  • 支持模板继承与子模板
  • 浏览器版本仅 6KB 大小
https://github.com/aui/art-templatevar template = require('art-template');var html = template(__dirname + '/tpl-user.art', { user: { name: 'aui' }});

10个最佳开源Javas<em></em>cript模板引擎nerror="javascript:errorimg.call(this);">


2、DOT

快速且强大的Javascript模板引擎,零依赖。与node.js之类的服务器端环境,RequireJS之类的模块加载器以及所有Web浏览器兼容。

https://github.com/blueimp/Javascript-Templatescript type="text/x-tmpl" id="tmpl-demo"> 

{%=o.title%}

Javascript模板引擎,简单易用,支持webpack和fis。提供了一组模板语法,用户可以编写一个模板块。每次传入数据时,生成由相应数据生成的HTML片段,呈现不同的效果。

https://github.com/yanhaijing/template.jsconst data = { list: [ {name: "yan"}, {name: "haijing"} ]};
    <%for(var i = 0; i < list.length; i++) {%>
  • <%:=list[i].name%>
  • <%}%>

10个最佳开源Javas<em></em>cript模板引擎nerror="javascript:errorimg.call(this);">


5. Tempo

声称具有嵌入式Coffeescript语法的最快的Javascript模板引擎。具有出色的性能,模板缓存,自动重新加载已更改的模板和模板中的Coffeescript代码

https://github.com/baryshev/ectvar ECT = require('ect');var renderer = ECT({ root : __dirname + '/views', ext : '.ect' });renderer.render('page', { title: 'Hello, World!' }, function (error, html) {	console.log(error);	console.log(html);});

10个最佳开源Javas<em></em>cript模板引擎nerror="javascript:errorimg.call(this);">


7.Dot Dom

Template7是第一个具有类似Handlebars语法的移动优先Javascript模板引擎。它在framework7中用作默认模板引擎。它是超轻量级的(缩小并压缩成1KB左右)并且运行迅速(比mobile Safari中的Handlebars快2-3倍)。

https://github.com/nolimits4web/template7
    {{#each items}}
  • {{title}}
  • {{/each}}

10个最佳开源Javas<em></em>cript模板引擎nerror="javascript:errorimg.call(this);">


9. Bunny

Squirrelly是使用Javascript实现的现代,可配置且功能强大的快速模板引擎。它在ExpressJS开箱即用,完整版压缩后仅约2.2KB。

https://github.com/squirrellyjs/squirrellyvar myTemplate = "

My favorite kind of cake is: Chocolate!

{{if(options.somevalue === 1)}}Display this{{#else}}Display this{{/if}} {{each(options.somearray)}}Display thisThe current array element is {{@this}}The current index is {{@index}}{{/each}}

10个最佳开源Javas<em></em>cript模板引擎nerror="javascript:errorimg.call(this);">


总结

Javascript的模板引擎相对较多,从性能、简单性、易用性等方面会有所不同,开发者们可以根据不同的角度去选择一个合适的模板引擎用于项目研发或者重构,Enjoy it!


顶一下()     踩一下()

热门推荐

发表评论
0评