JavaScript中有哪些模板引擎

這篇文章將為大家詳細講解有關(guān)JavaScript中有哪些模板引擎，文章內容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

1. Art-template

Art-template是一個(gè)簡(jiǎn)單且超快速的模板引擎，可通過(guò)范圍預先聲明的技術(shù)優(yōu)化模板渲染速度。它實(shí)現了接近JavaScript極限的運行時(shí)性能。同時(shí)，它支持NodeJS和瀏覽器。

• 擁有接近 JavaScript 渲染極限的的性能

• 調試友好：語(yǔ)法、運行時(shí)錯誤日志精確到模板所在行;支持在模板文件上打斷點(diǎn)(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'  } });

2. DOT

為了最快，最簡(jiǎn)潔的JavaScript模板功能，重點(diǎn)是在V8和Nodejs下的性能。它對Node.js和瀏覽器均顯示出出色的性能。doT.js快速，小巧且沒(méi)有依賴(lài)性。

https://github.com/olado/doT Hi {{=it.name}}! {{=it.age || ''}}

3. JavaScript-Templates

快速且強大的JavaScript模板引擎，零依賴(lài)。與node.js之類(lèi)的端環(huán)境，RequireJS之類(lèi)的模塊加載器以及所有Web瀏覽器兼容。

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

4. Template.js

JavaScript模板引擎，簡(jiǎn)單易用，支持webpack和fis。提供了一組模板語(yǔ)法，用戶(hù)可以編寫(xiě)一個(gè)模板塊。每次傳入數據時(shí)，生成由相應數據生成的HTML片段，呈現不同的效果。

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

5. Tempo

Tempo是一個(gè)簡(jiǎn)單，直觀(guān)的JavaScript渲染引擎，能夠以純HTML格式制作數據模板。關(guān)注點(diǎn)分離：JavaScript文件中沒(méi)有HTML，HTML中也沒(méi)有JavaScript;輕松處理AJAX  / JSON內容，可在Safari，Chrome，FireFox，Opera和Internet Explorer 6+中運行

https://github.com/twigkit/tempo

6. ECT

聲稱(chēng)具有嵌入式CoffeeScript語(yǔ)法的最快的JavaScript模板引擎。具有出色的性能，模板緩存，自動(dòng)重新加載已更改的模板和模板中的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); });

7. Dot Dom

.dom從React.js借用了一些概念(例如可重用的組件和虛擬DOM)，并嘗試利用ES6  javascript功能以最小的占用空間復制它們。該庫的大小不超過(guò)512個(gè)字節。正在大力利用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 )

8. Template7

Template7是第一個(gè)具有類(lèi)似Handlebars語(yǔ)法的移動(dòng)優(yōu)先JavaScript模板引擎。它在Framework7中用作默認模板引擎。它是超輕量級的(縮小并壓縮成1KB左右)并且運行迅速(比mobile  Safari中的Handlebars快2-3倍)。

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

9. Bunny

BunnyJS是現代的原生JS和ES6庫以及下一代前端框架，無(wú)依賴(lài)性的小型獨立組件的軟件包。它沒(méi)有依賴(lài)性-可以隨時(shí)隨地在任何項目中使用

https://github.com/Mevrael/bunny  import { Component as BunnyComponent } from 'bunnyjs/src/...';  export const Component = Object.assign({}, BunnyComponent, {   init(arg) {  // do whatever you want  console.log(arg);   // call default (parent)  return BunnyComponent.init(arg);  }  });

10. Squirrelly

Squirrelly是使用JavaScript實(shí)現的現代，可配置且功能強大的快速模板引擎。它在ExpressJS開(kāi)箱即用，完整版壓縮后僅約2.2KB。

https://github.com/squirrellyjs/squirrellyvar myTemplate = " My favorite kind of cake is: {{favoriteCake}} "Sqrl.Render(myTemplate, {favoriteCake: 'Chocolate!'})// Returns: ' My favorite kind of cake is: Chocolate!    {{if(options.somevalue === 1)}} Display this {{#else}} Display this {{/if}}   {{each(options.somearray)}} Display this The current array element is {{@this}} The current index is {{@index}} {{/each}}