js素材网站—vjs素材网站 收藏 0

10个最佳开源JavaScript模板引擎

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

2、DOT

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

Hi {{=it.name}}!{{=it.age || \’\’}}3. JavaScript-Templates

快速且强大的JavaScript模板引擎，零依赖。与node.js之类的服务器端环境，RequireJS之类的模块加载器以及所有Web浏览器兼容。

4. Template.js

JavaScript模板引擎，简单易用，支持webpack和fis。提供了一组模板语法，用户可以编写一个模板块。每次传入数据时，生成由相应数据生成的HTML片段，呈现不同的效果。

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

<%}%>

5. Tempo

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

6. ECT

声称具有嵌入式CoffeeScript语法的最快的JavaScript模板引擎。具有出色的性能，模板缓存，自动重新加载已更改的模板和模板中的CoffeeScript代码

7.Dot Dom

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

8.Template7

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

{{#each items}}
• {{title}}

{{/each}}

9. Bunny

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

10. Squirrelly

Squirrelly是使用JavaScript实现的现代，可配置且功能强大的快速模板引擎。它在ExpressJS开箱即用，完整版压缩后仅约2.2KB。

My favorite kind of cake is: {{favoriteCake}}

My favorite kind of cake is: Chocolate!

总结

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

网页设计灵感不枯竭！10个免费设计素材网站收藏

当网页设计师使用网页设计材料时，他们会优先考虑那些免费和高质量的网页设计材料网站。找到一个免费和高质量的网页设计材料网站并不容易，有些网站要么需要打开材料网站成员，要么设计材料质量很差。即时设计总结了10个免费的网页设计材料网站，对“材料短缺”说不！充满干货，来看看吧！

即时设计资源广场是在线协作设计软件即时设计的设计社区。它提供了网页UI设计中经常使用的各种网页设计材料和模板。网页设计材料模板不仅质量高，而且完全免费~

材料：矢量图标、插图材料、emoji表情、3D图标、样机材料

https://js.design/community?category=explore&source=tt&plan=btt0731

模板:多个移动UI模板、网页UI模板、国内外众多大厂商的UI设计规范和设计系统

对于即时设计资源广场的模板或材料，可以点击右上角「使用」，保存到自己的账号中，方便以后需要使用时随时找回。

模板复制到个人账户后，点击「打开文件」您可以直接调用即时设计自己的编辑器，打开刚刚复制的模板，即时设计支持在线编辑模板，所有编辑操作将自动保存到云中。

每个UI模板包含多个不同的页面——开屏页面、注册页面、主页、用户页面、搜索页面等，页面中的所有元素都可以自由编辑

多个模板的不同页面设计不仅可以为我们的设计提供灵感，还可以将一些组件复制到我们自己的项目中，稍加修改就可以直接使用，减少不必要的重复劳动。

新一代协作设计工具即时设计目前对所有个人用户免费开放，现在到即时设计网站注册账户，可以使用所有内置功能和材料资源的即时设计，可以享受许多独家权益：无限文件数量、无合作者数量限制、无限云存储空间等，来尝试～

unDraw，开源免费矢量免费网页设计材料网站提供了许多简单统一的矢量设计材料，非常适合设计项目。下载设计材料时，unDraw 有 svg 和 png 两种格式可供选择。

manypixels，同样是一个免版权的矢量免费网页设计素材素材网站，目前已有的设计素材数量超过 2500，网站提供的素材格式为 svg 和 png，下载时可根据需要选择相应的格式。

在寻找设计材料时，manypixels 它提供了两个筛选条件——设计材料目录和类型。目录与设计材料的使用场景和行业有关，类型体现在设计材料的风格上（单色、等距立体、双色、扁平等）。搜索时使用这两种筛选条件，返回的设计材料可以更有针对性。

除了上面介绍的两个网站，在设计过程中，有时还会使用一些品牌 logo，例如，登录页面的微 X 登录或苹果账号登录，需要使用微微账号 X 和苹果的 logo。

许多人使用其他品牌 logo时，经常从搜索引擎下载 PNG 格式设计材料，这样得到的设计材料要么清晰度不高，要么在使用前需要进行抠图处理。

WorldVectorLogo，一个专门提供各种品牌的品牌标志网站，就像网站的名字一样，这里的网站 logo设计材料均为矢量格式，可无限放大不失真。一般来说，大品牌可以在这里找到矢量格式 logo。

freepik，一个拥有大量高质量免费设计材料的网站，这里的设计材料分为免费和收费两类，免费设计材料可用于个人和商业项目。

在搜索设计材料之前，可以设置多个筛选条件：搜索单个设计材料或设计材料收集、免费或付费、设计材料格式（矢量、位图、psd、图标)，这样搜索返回的结果就能更好地满足我们的需求。

ls.graphics，一个提供高质量样机模板的网站，这里的样机模板可以分为免费和付费，免费样机的质量也很高，既有平面又有平面 3D 模板的风格。

网站提供的样机模板一般为 psd 或 sketch 格式，使用前需要下载到本地。因为这是一个国外的网站，遇到大模板需要更多的时间才能下载。

Device Shots，在线网站可以定制样机模型，提供的样机模型包括手机、平板电脑、电脑、显示器、手表。

MockRocket

MockRocket，一个在线的 3D 样机工具，可将设计作品放入内置设备中，如下图所示 Macbook Pro，让作品瞬间变得更加立体。

使用 MockRocket 顶部工具栏中的移动和旋转工具可以改变原型的位置和旋转角度。这种交互式设计比普通原型模板具有更高的自由度，可以从不同角度获得原型图片。

Unsplash，国外著名的免版权图片网站，这里的图片是基于这里的图片 CC0 授权方式，下载的图片可用于商业目的，无需支付任何费用，最大限度地降低了图片侵权的风险。

Unsplash 图片种类繁多，包括：当前热点、电脑壁纸、3D 作品、材质与纹理、艺术、自然、商业、时尚、电影、食品、健康等。

Pexels，一个和 Unsplash 非常相似的网站，这里的图片设计素材同样可以免费使用。区别在于，Pexels 额外提供了视频素材，而且网站支持中文搜索，英文不太好的朋友，可以优先来 Pexels 下载图片设计素材。

以上是10个易于使用的免费网页设计材料网站，希望对您有所帮助。告别重复的基础工作，从找到有用的免费网页设计材料网站开始。

一般来说，即时设计资源广场是免费网页设计材料网站的最佳解决方案。即时设计资源广场作为新一代在线协同设计工具，为国内优秀UI/UX设计师提供了良好的分享、交流、学习、共同创造的开源平台。

内置3000多个UI组件库，每月更新数百个精品模板，涵盖移动设计、网页设计、插图、线框图、矢量图标等丰富的设计资源，被称为UX福利场和UI加油站。

https://js.design/community?category=explore&source=tt&plan=btt0731

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com