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

目前前端主流的開發框架有Vue、React以及Angular等，可是依然有一部分開發人員並不會去使用這些框架，特別是一些偏向後端的開發者，可能依然在使用相似於jquery+Bootstrap的方式在開發一些項目，並且有些項目可能傳統的方式更加合適。

做者：最美分享來源：今日頭條|2019-11-13 08:50

 收藏

  分享

【線上直播】11月21日晚8點貝殼技術總監侯聖文《數據安全之數據庫安全黃金法則》

 

背景

目前前端主流的開發框架有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

Art-template是一個簡單且超快速的模板引擎，可經過範圍預先聲明的技術優化模板渲染速度。它實現了接近JavaScript極限的運行時性能。同時，它支持NodeJS和瀏覽器。

• 擁有接近 JavaScript 渲染極限的的性能
• 調試友好：語法、運行時錯誤日誌精確到模板所在行；支持在模板文件上打斷點（Webpack Loader）
• 支持 Express、Koa、Webpack
• 支持模板繼承與子模板
• 瀏覽器版本僅 6KB 大小

1. https://github.com/aui/art-template 
2.  
3. var template = require('art-template'); 
4. var html = template(__dirname + '/tpl-user.art', { 
5.  user: { 
6.  name: 'aui' 
7.  } 
8. }); 

二、DOT

爲了最快，最簡潔的JavaScript模板功能，重點是在V8和Nodejs下的性能。它對Node.js和瀏覽器均顯示出出色的性能。doT.js快速，小巧且沒有依賴性。

https://github.com/olado/doT

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

3. JavaScript-Templates

快速且強大的JavaScript模板引擎，零依賴。與node.js之類的服務器端環境，RequireJS之類的模塊加載器以及全部Web瀏覽器兼容。

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

4. Template.js

JavaScript模板引擎，簡單易用，支持webpack和fis。提供了一組模板語法，用戶能夠編寫一個模板塊。每次傳入數據時，生成由相應數據生成的HTML片斷，呈現不一樣的效果。

https://github.com/yanhaijing/template.jsconst data = { list: [ {name: "yan"}, {name: "haijing"} ]};

1. <%for(var i = 0; i < list.length; i++) {%> 
2. <%:=list[i].name%> 
3. <%}%> 

5. Tempo

Tempo是一個簡單，直觀的JavaScript渲染引擎，可以以純HTML格式製做數據模板。關注點分離：JavaScript文件中沒有HTML，HTML中也沒有JavaScript；輕鬆處理AJAX / JSON內容，可在Safari，Chrome，FireFox，Opera和Internet Explorer 6+中運行

https://github.com/twigkit/tempo

6. ECT

聲稱具備嵌入式CoffeeScript語法的最快的JavaScript模板引擎。具備出色的性能，模板緩存，自動從新加載已更改的模板和模板中的CoffeeScript代碼

1. https://github.com/baryshev/ect 
2.  
3. var ECT = require('ect'); 
4.  
5. var renderer = ECT({ root : __dirname + '/views', ext : '.ect' }); 
6.  
7. renderer.render('page', { title: 'Hello, World!' }, function (error, html) { 
8.     console.log(error); 
9.     console.log(html); 
10. }); 

7.Dot Dom

.dom從React.js借用了一些概念（例如可重用的組件和虛擬DOM），並嘗試利用ES6 javascript功能以最小的佔用空間複製它們。該庫的大小不超過512個字節。正在大力利用ES6規範。

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

1. function Clickable(props, state, setState) { 
2.  const {clicks=0} = state; 
3.  
4.  return H('button', 
5.  { 
6.  onclick() { 
7.  setState({clicks: clicks+1}) 
8.  } 
9.  }, 
10.  `Clicked ${clicks} times` 
11.  ); 
12. } 
13.  
14. R( 
15.  H('div', 
16.  H(Clickable), 
17.  H(Clickable) 
18.  ), 
19.  document.body 
20. ) 

8.Template7

Template7是第一個具備相似Handlebars語法的移動優先JavaScript模板引擎。它在Framework7中用做默認模板引擎。它是超輕量級的（縮小並壓縮成1KB左右）而且運行迅速（比mobile Safari中的Handlebars快2-3倍）。

https://github.com/nolimits4web/template7

1. {{#each items}} 
2. {{title}} 
3. {{/each}} 

 

 

9. Bunny

BunnyJS是現代的原生JS和ES6庫以及下一代前端框架，無依賴性的小型獨立組件的軟件包。它沒有依賴性-能夠隨時隨地在任何項目中使用

https://github.com/Mevrael/bunny

1. import { Component as BunnyComponent } from 'bunnyjs/src/...'; 
2.  
3. export const Component = Object.assign({}, BunnyComponent, { 
4.  
5.  init(arg) { 
6.  // do whatever you want 
7.  console.log(arg); 
8.  
9.  // call default (parent) 
10.  return BunnyComponent.init(arg); 
11.  } 
12.  
13. }); 

10. Squirrelly

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

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

1. My favorite kind of cake is: {{favoriteCake}} 
2.  
3. "Sqrl.Render(myTemplate, {favoriteCake: 'Chocolate!'})// Returns: ' 
4. My favorite kind of cake is: Chocolate! 
5.  
6.  
7.  
8.  
9. {{if(options.somevalue === 1)}} 
10. Display this 
11. {{#else}} 
12. Display this 
13. {{/if}} 
14.   
15. {{each(options.somearray)}} 
16. Display this 
17. The current array element is {{@this}} 
18. The current index is {{@index}} 
19. {{/each}} 

總結

Javascript的模板引擎相對較多，從性能、簡單性、易用性等方面會有所不一樣，開發者們能夠根據不一樣的角度去選擇一個合適的模板引擎用於項目研發或者重構，Enjoy it！