专栏首页热爱ITGithub上开源的10大Javascript模板引擎,助力前端开发

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

目前前端主流的开发框架有Vue、React以及Angular等,但是依然有一部分开发人员并不会去使用这些框架,特别是一些偏向后端的开发者,可能依然在使用类似于jquery+Bootstrap的方式在开发一些项目,而且有些项目可能传统的方式更加合适。

作者:最美分享

来源:https://www.toutiao.com/a6758372469997830659/

背景

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

1、Art-template

Art-template是一个简单且超快速的模板引擎,可通过范围预先声明的技术优化模板渲染速度。它实现了接近JavaScript极限的运行时性能。同时,它支持NodeJS和浏览器。

  • 拥有接近 JavaScript 渲染极限的的性能
  • 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
  • 支持 Express、Koa、Webpack
  • 支持模板继承与子模板
  • 浏览器版本仅 6KB 大小
  1. https://github.com/aui/art-template
  2. var template = require('art-template');
  3. var html = template(__dirname + '/tpl-user.art', {
  4. user: {
  5. name: 'aui'
  6. }
  7. });

2、DOT

为了最快,最简洁的JavaScript模板功能,重点是在V8和Nodejs下的性能。它对Node.js和浏览器均显示出出色的性能。doT.js快速,小巧且没有依赖性。

https://github.com/olado/doT

Hi {{=it.name}}! 
{{=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"} ]};

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

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. var ECT = require('ect');
  3. var renderer = ECT({ root : __dirname + '/views', ext : '.ect' });
  4. renderer.render('page', { title: 'Hello, World!' }, function (error, html) {
  5. console.log(error);
  6. console.log(html);
  7. });

7.Dot Dom

.dom从React.js借用了一些概念(例如可重用的组件和虚拟DOM),并尝试利用ES6 javascript功能以最小的占用空间复制它们。该库的大小不超过512个字节。正在大力利用ES6规范。

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

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

8.Template7

Template7是第一个具有类似Handlebars语法的移动优先JavaScript模板引擎。它在Framework7中用作默认模板引擎。它是超轻量级的(缩小并压缩成1KB左右)并且运行迅速(比mobile Safari中的Handlebars快2-3倍)。

https://github.com/nolimits4web/template7

{{#each items}} 
{{title}} 
{{/each}} 

9. Bunny

BunnyJS是现代的原生JS和ES6库以及下一代前端框架,无依赖性的小型独立组件的软件包。它没有依赖性-可以随时随地在任何项目中使用

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实现的现代,可配置且功能强大的快速模板引擎。它在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}} 

总结

Javascript的模板引擎相对较多,从性能、简单性、易用性等方面会有所不同,开发者们可以根据不同的角度去选择一个合适的模板引擎用于项目研发或者重构,Enjoy it!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux连接投影仪(ubuntu)失败或显示不正常--未测试

    Linux连接投影仪,网上这方便的资料比较少,尤其是图文资料。最近有这方面的需求,查了很多的资料,最终实现的投影。直接插上VGA后,发现屏幕显示的不正确,或不显...

    双面人
  • 利用Apache的. htaccess完美解决301重定向.htaccess文件实现301重定向常用的七种方法

    使用.Htaccess文件实现301重定向常用的七种方法 301重定向对广大站长来说并不陌生,从网站建设到目录优化,避免不了对网站目录进行更改,在这种情况下用...

    双面人
  • 二维数组取最大最小值

    return max($temp);最大值//改成return min($temp)就是最小值 

    双面人
  • hduoj----(1033)Edge

    Edge                         Time Limit: 2000/1000 MS (Java/Others)    Memory Li...

    Gxjun
  • poj-1146 ID codes

    It is 2084 and the year of Big Brother has finally arrived, albeit a century lat...

    瑾诺学长
  • 射击气球

    LeetCode 452. Minimum Number of Arrows to Burst Balloons 已知在一个平面上有一定数量的气球,平面可以看...

    小飞侠xp
  • 新型算法可确定基因组突变位点

    大数据文摘
  • 回溯法:八皇后问题

    八皇后问题是一个以国际象棋为背景的问题:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都...

    卡尔曼和玻尔兹曼谁曼
  • 5种方式将机器学习带到Java、Python以及Go等编程语言

    用户1737318
  • DM 源码阅读系列文章(六)relay log 的实现

    本文为 DM 源码阅读系列文章的第六篇,在 上篇文章 中我们介绍了 binlog replication 处理单元的实现,对在增量复制过程中 binlog ev...

    PingCAP

扫码关注云+社区

领取腾讯云代金券