目前主流的前端开发框架包括Vue、React、Angular等，但仍然有一些开发者不会使用这些框架，尤其是那些偏向于后端，可能还是在用类似jquery+Bootstrap的方式开发一些项目，有些项目可能更适合用传统的方式，所以JavaScript前端模板引擎可以发挥很大的作用，所以今天我将介绍Top10的开源模板引擎，根据不同的场景或功能特点，你可以选择不同的模板引擎应用到项目中：Art-templateDOTJavaScript-TemplatesTemplate.jsTempoECTDotDomTemplate7BunnySquirrelly1。Art-templateArt-template是一个简单且超快速的模板引擎，可以通过范围预声明技术优化模板渲染速度。它实现了接近JavaScript极限的运行时性能。同时支持NodeJS和浏览器。接近JavaScript渲染极限的调试友好性能：语法和运行时错误日志准确到模板所在的行；支持模板文件断点(WebpackLoader)支持Express,Koa,Webpack支持模板继承和子模板浏览器版本只有6KB大小https://github.com/aui/art-templatevartemplate=require('art-template');varhtml=template(__dirname+'/tpl-user.art',{user:{name:'aui'}});2.DOT最快最简洁的JavaScript模板功能，重点是V8和Nodejs下的性能。它显示了Node.js和浏览器的出色性能。doT.js速度快、体积小且没有依赖性。https://github.com/olado/doTHi{{=it.name}}!{{=it.age||''}}3.JavaScript-Templates零依赖的快速而强大的JavaScript模板引擎。与服务器端环境（如node.js）、模块加载器（如RequireJS）以及所有Web浏览器兼容。https://github.com/blueimp/JavaScript-Templates4。Template.jsJavaScript模板引擎，简单易用，支持webpack和fis。提供了一套模板语法，用户可以编写模板块。每次传入数据时，都会生成一个由相应数据生成的HTML片段，呈现不同的效果。https://github.com/yanhaijing/template.jsconstdata={list:[{name:"yan"},{name:"haijing"}]};<%for(vari=0;i<%:=list[i].name%><%}%>5.TempoTempo是一个简单、直观的JavaScript渲染引擎，可以制作纯HTML格式的数据模板。关注点分离：JavaScript文件中没有HTML，HTML中没有JavaScript；轻松处理AJAX/JSON内容，适用于Safari、Chrome、FireFox、Opera和InternetExplorer6+https://github.com/twigkit/tempo6.ECT声称是最快的JavaScript模板引擎，带有嵌入式CoffeeScript语法。具有出色的性能、模板缓存、自动重新加载已更改的模板和模板中的CoffeeScript代码https://github.com/baryshev/ectvarECT=require('ect');varrenderer=ECT({root:__dirname+'/views',ext:'.ect'});renderer.render('page',{title:'Hello,World!'},function(error,html){console.log(error);console.log(html);});7.DotDom.dom借鉴了React.js的一些概念（例如可重用组件和虚拟DOM），并尝试利用ES6javascript功能以最小的占用空间复制它们。库的大小不超过512字节。ES6规范被大量利用。https://github.com/wavesoft/dot-domfunctionClickable(props,state,setState){const{clicks=0}=state;returnH('button',{onclick(){setState({clicks:clicks+1})}},`Clicked${clicks}times`);}R(H('div',H(Clickable),H(Clickable)),document.body)8.Template7Template7是第一个有类似Handlebars的语法移动优先的JavaScript模板引擎。它被用作Framework7中的默认模板引擎。它超轻量级（缩小并压缩到大约1KB）并且速度快（比移动版Safari中的Handlebars快2-3倍）。https://github.com/nolimits4web/template7{{#eachitems}}{{title}}{{/each}}9.BunnyBunnyJS是现代原生JS和ES6库和下一代前端框架，小巧而没有独立组件的依赖包。它没有依赖关系——可以在任何项目的任何地方使用https://github.com/Mevrael/bunnyimport{ComponentasBunnyComponent}from'bunnyjs/src/...';exportconstComponent=Object.assign({},BunnyComponent,{init(arg){//dowhateveryouwantconsole.log(arg);//calldefault(parent)returnBunnyComponent.init(arg);}});10.SquirrellySquirrelly是一个用JavaScript实现的现代的、可配置的、强大的快速模板引擎。它带有开箱即用的ExpressJS，完整版缩小后只有2.2KB左右。https://github.com/squirrellyjs/squirrellyvarmyTemplate="Myfavoritekindofcakeis:{{favoriteCake}}"Sqrl.Render(myTemplate,{favoriteCake:'Chocolate!'})//Returns:'Myfavoritekindofcakeis:Chocolate!{{if(options).somevalue===1)}}Displaythis{{#else}}Displaythis{{/if}}{{each(options.somearray)}}DisplaythisThecurrentarrayelementis{{@this}}Thecurrentindexis{{@index}}{{/各}}总结Javascript的模板引擎比较多，在性能、简洁性、易用性等方面会有所不同。开发者可以从不同的角度选择合适的模板引擎进行项目开发或重构，好好享受！
