设为首页 - 加入收藏 应用计算网_滁州站长网 (http://www.0550zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 2015 技术 系统 手机
当前位置: 首页 > 综合聚焦 > 移动互联 > 评测 > 正文

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

发布时间:2019-11-13 17:36 所属栏目:[评测] 来源:最美分享
导读:副标题#e# 【线上直播】11月21日晚8点贝壳技术总监侯圣文《数据安全之数据库安全黄金法则》 背景 目前前端主流的开发框架有Vue、React以及Angular等,但是依然有一部分开发人员并不会去使用这些框架,特别是一些偏向后端的开发者,可能依然在使用类似于jque
【线上直播】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
1、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. });?
Github上开源的10大Javascript模板引擎,助力前端开发 2、DOT

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

https://github.com/olado/doT

  1. Hi?{{=it.name}}!?
  2. {{=it.age?||?''}}?
Github上开源的10大Javascript模板引擎,助力前端开发 3. JavaScript-Templates

快速且强大的JavaScript模板引擎,零依赖。与node.js之类的365体育投注真实吗_365体育投注 安卓主题_365体育投注平台端环境,RequireJS之类的模块加载器以及所有Web浏览器兼容。

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

Github上开源的10大Javascript模板引擎,助力前端开发 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??
  2. <%:=list[i].name%>?
  3. <%}%>?
Github上开源的10大Javascript模板引擎,助力前端开发 5. Tempo

Tempo是一个简单,直观的JavaScript渲染引擎,能够以纯HTML格式制作数据模板。关注点分离:JavaScript文件中没有HTML,HTML中也没有JavaScript;轻松处理AJAX / JSON内容,可在Safari,Chrome,FireFox,Opera和Internet Explorer 6+中运行

https://github.com/twigkit/tempo

Github上开源的10大Javascript模板引擎,助力前端开发 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. });?
Github上开源的10大Javascript模板引擎,助力前端开发 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. )?
Github上开源的10大Javascript模板引擎,助力前端开发 8.Template7

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章