Github上开源的10大Javascript模板引擎，助力前端开拓

配景

今朝前端主流的开拓框架有Vue、React以及Angular等，可是依然有一部门开拓职员并不会去行使这些框架，出格是一些方向后端的开拓者，也许依然在行使相同于jquery+Bootstrap的方法在开拓一些项目，并且有些项目也许传统的方法越发吻合，因此JavaScript前端模板引擎就可以或许发会很大浸染了，那么本日就先容10大开源模板引擎，依据差异的场景可能成果特征，可以选择差异的模板引擎应用到项目中去：

• 1. Art-template
• 2. DOT
• 3. JavaScript-Templates
• 4. Template.js
• 5. Tempo
• 6. ECT
• 7. Dot Dom
• 8. Template7
• 9. Bunny
• 10. Squirrelly

Art-template是一个简朴且超快速的模板引擎，可通过范畴预先声明的技能优化模板渲染速率。它实现了靠近JavaScript极限的运行机遇能。同时，它支持NodeJS和赏识器。

• 拥有靠近 JavaScript 渲染极限的的机能
• 调试友爱：语法、运行时错误日记准确到模板地址行；支持在模板文件上打断点（Webpack Loader）
• 支持 Express、Koa、Webpack
• 支持模板担任与子模板
• 赏识器版本仅 6KB 巨细

https://github.com/aui/art-template 
 
var template = require('art-template'); 
var html = template(__dirname + '/tpl-user.art', { 
 user: { 
 name: 'aui' 
 } 
}); 

为了最快，最简捷的JavaScript模板成果，重点是在V8和Nodejs下的机能。它对Node.js和赏识器均表现出精彩的机能。doT.js快速，小巧且没有依靠性。

https://github.com/olado/doT

Hi {{=it.name}}! 
{{=it.age || ''}} 

快速且强盛的JavaScript模板引擎，零依靠。与node.js之类的处事器端情形，RequireJS之类的模块加载器以及全部Web赏识器兼容。

https://github.com/blueimp/JavaScript-Templates

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%> 
<%}%> 

Tempo是一个简朴，直观的JavaScript渲染引擎，可以或许以纯HTML名目建造数据模板。存眷点疏散：JavaScript文件中没有HTML，HTML中也没有JavaScript；轻松处理赏罚AJAX / JSON内容，可在Safari，Chrome，FireFox，Opera和Internet Explorer 6+中运行

https://github.com/twigkit/tempo

声称具有嵌入式CoffeeScript语法的最快的JavaScript模板引擎。具有精彩的机能，模板缓存，自动从头加载已变动的模板和模板中的CoffeeScript代码

https://github.com/baryshev/ect 
 
var 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); 
}); 

.dom从React.js借用了一些观念（譬喻可重用的组件和假造DOM），并实行操作ES6 javascript成果以最小的占用空间复制它们。该库的巨细不高出512个字节。正在大力大举操作ES6类型。

https://github.com/wavesoft/dot-dom

function Clickable(props, state, setState) { 
 const {clicks=0} = state; 
 
 return H('button', 
 { 
 onclick() { 
 setState({clicks: clicks+1}) 
 } 
 }, 
 `Clicked ${clicks} times` 
 ); 
} 
 
R( 
 H('div', 
 H(Clickable), 
 H(Clickable) 
 ), 
 document.body 
) 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!