Github上開源的10大Javascript模板引擎，助力前端開發(fā)
背景
目前前端主流的開發(fā)框架有Vue、React以及Angular等，但是依然有一部分開發(fā)人員并不會(huì)去使用這些框架，特別是一些偏向后端的開發(fā)者，可能依然在使用類似于jquery+Bootstrap的方式在開發(fā)一些項(xiàng)目，而且有些項(xiàng)目可能傳統(tǒng)的方式更加合適，因此JavaScript前端模板引擎就能夠發(fā)會(huì)很大作用了，那么今天就介紹10大開源模板引擎，依據(jù)不同的場(chǎng)景或者功能特性，可以選擇不同的模板引擎應(yīng)用到項(xiàng)目中去：
- 1. Art-template
- 2. DOT
- 3. JavaScript-Templates
- 4. Template.js
- 5. Tempo
- 6. ECT
- 7. Dot Dom
- 8. Template7
- 9. Bunny
- 10. Squirrelly
1、Art-template
Art-template是一個(gè)簡(jiǎn)單且超快速的模板引擎，可通過(guò)范圍預(yù)先聲明的技術(shù)優(yōu)化模板渲染速度。它實(shí)現(xiàn)了接近JavaScript極限的運(yùn)行時(shí)性能。同時(shí)，它支持NodeJS和瀏覽器。
- 擁有接近 JavaScript 渲染極限的的性能
- 調(diào)試友好：語(yǔ)法、運(yùn)行時(shí)錯(cuò)誤日志精確到模板所在行；支持在模板文件上打斷點(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下的性能。它對(duì)Node.js和瀏覽器均顯示出出色的性能。doT.js快速，小巧且沒(méi)有依賴性。
https://github.com/olado/doT
- Hi {{=it.name}}!
- {{=it.age || ''}}
3. JavaScript-Templates
快速且強(qiáng)大的JavaScript模板引擎，零依賴。與node.js之類的服務(wù)器端環(huán)境，RequireJS之類的模塊加載器以及所有Web瀏覽器兼容。
https://github.com/blueimp/JavaScript-Templates
4. Template.js
JavaScript模板引擎，簡(jiǎn)單易用，支持webpack和fis。提供了一組模板語(yǔ)法，用戶可以編寫一個(gè)模板塊。每次傳入數(shù)據(jù)時(shí)，生成由相應(yīng)數(shù)據(jù)生成的HTML片段，呈現(xiàn)不同的效果。
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)單，直觀的JavaScript渲染引擎，能夠以純HTML格式制作數(shù)據(jù)模板。關(guān)注點(diǎn)分離：JavaScript文件中沒(méi)有HTML，HTML中也沒(méi)有JavaScript；輕松處理AJAX / JSON內(nèi)容，可在Safari，Chrome，F(xiàn)ireFox，Opera和Internet Explorer 6+中運(yùn)行
https://github.com/twigkit/tempo
6. ECT
聲稱具有嵌入式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），并嘗試?yán)肊S6 javascript功能以最小的占用空間復(fù)制它們。該庫(kù)的大小不超過(guò)512個(gè)字節(jié)。正在大力利用ES6規(guī)范。
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è)具有類似Handlebars語(yǔ)法的移動(dòng)優(yōu)先JavaScript模板引擎。它在Framework7中用作默認(rèn)模板引擎。它是超輕量級(jí)的（縮小并壓縮成1KB左右）并且運(yùn)行迅速（比mobile Safari中的Handlebars快2-3倍）。
https://github.com/nolimits4web/template7
- {{#each items}}
- {{title}}
- {{/each}}
9. Bunny
BunnyJS是現(xiàn)代的原生JS和ES6庫(kù)以及下一代前端框架，無(wú)依賴性的小型獨(dú)立組件的軟件包。它沒(méi)有依賴性-可以隨時(shí)隨地在任何項(xiàng)目中使用
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í)現(xiàn)的現(xiàn)代，可配置且功能強(qiáng)大的快速模板引擎。它在ExpressJS開箱即用，完整版壓縮后僅約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}}
總結(jié)
Javascript的模板引擎相對(duì)較多，從性能、簡(jiǎn)單性、易用性等方面會(huì)有所不同，開發(fā)者們可以根據(jù)不同的角度去選擇一個(gè)合適的模板引擎用于項(xiàng)目研發(fā)或者重構(gòu)，Enjoy it！
