年度技术盘点:50个最佳轻量级JavaScript框架和库

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

回顾今年已发布的JS框架和库,我们针对地筛选了一些能够提供直接和具体功能的免费JavaScript插件和库,与大家分享。它们可不是臃肿的一站式框架,而是一些轻量级,并能够帮助你更快、更容易地进行网页设计与开发的实用型框架。

JavaScript 是一个在全球范围内都非常受欢迎的脚本语言,由 Netscape 的
LiveScript 发展而来,可用于 Web
开发、移动应用开发、服务器端开发等。它因简单、安全、动态和跨平台等特点而受到新老开发者的追捧。本文整理了一些基于
Javascript 的开源功能插件和框架,希望能给你的开发带来帮助。

HTML5已经成为当今世界的一个必然组成部分。由于World Wide
Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之一。随着网络的不断扩张,Web开发人员非常有必要拥有最新的HTML5工具,用于创建动态和交互式的Web应用程序和网页。下面这些就是你不应该错过的新的HTML5工具。

正如你期望的,文中的一些插件可用来创建滑块、图片库、响应式菜单、弹出式窗口以及许多其他常见的组件。同时,你也可以发现一些能够提供独特功能的插件,像旁注工具、GIF预览、动画图标等。

一、MV* 框架和库

1、Angular JS

Angular JS (Angular.JS) 是一组用来开发 Web
页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 web
应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有
60K,兼容主流浏览器,与 jQuery 配合良好。

图片 1

DEMO

2、React.js

React.js(React)是 Facebook 推出的一个用来构建用户界面的 JavaScript
库。已经应用于构建 Instagram 网站及 Facebook 部分网站。

图片 2

DEMO

3、Vue.js

Vue.js 是构建 Web 界面的 JavaScript
库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。

图片 3

DEMO

4、Ember.js

Ember 是一个雄心勃勃的 Web
应用程序,消除了样板,并提供了一个标准的应用程序架构的 JavaScript 框架。

图片 4

DEMO

5、Backbone.js

Backbone.js 是一种重量级 javascript  MVC 应用框架,通过 Models 进行
key-value 绑定及 custom 事件处理,通过 Collections 提供一套丰富的 API
用于枚举功能,通过 Views 来进行事件处理及与现有的 Application 通过
RESTful JSON 接口进行交互。

图片 5

DEMO:

6、Meteor

Meteor 是一组新的技术用于构建高质量的 Web
应用,提供很多现成的包,可直接在浏览器或者云平台中运行。

图片 6

DEMO

7、regularJS

看到 regular 的名字就能感受到扑面而来的山寨味,但 regularjs
的出现绝不仅仅是作者造轮子情绪泛滥的结果。在 angular
大行其道的时期也激励产生了很多优秀框架,如 vue.js、avalon.js、reactive 等,而
regular
正是在这种百花齐放的时候产生,最终在实现上采取了angular的数据更新策略,提倡极致的声明式和裸数据操作,
依赖于基于字符串的模板描述结构结合更规范性的类式继承的组件体系来定义数据层的业务逻辑。

图片 7

DEMO

8、T3.js

T3js(t3.js)与 MVC 框架不同,T3 是建立在可伸缩 JavaScript
应用体系结构的概念之上来创建松耦合、少模型的系统,以此来创建大型
JavaScript 应用。

图片 8

DEMO

9、Knockout.js

Knockout 是个JavaScript library,帮助创建丰富的显示和编辑器
UI,通过干净的底层数据模型。你可以在任何时候动态更新 UI 的选择部分。

图片 9

DEMO

10、Spine.js

Spine.js 是一个用于构建 JavaScript Web 应用的轻量级框架Spine
可让你使用 MVC 的框架思路来开发Web应用。

DEMO

1.Timesheet.js

Timesheet.js是一款用于创建使用JavaScript库的HTML工作流的简单工具。你可以添加可视化和转换到使用CSS的事件。Timesheet.js特别好使,因为它只需要几行JavaScript,就能生成漂亮的HTML布局。

图片 10

官方网站:

或许,你可能还想了解下 2015年50个最佳的JavaScript集合,以及 50个最佳的免费jQuery插件。

二、UI 库

1、Bootstrap

Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS
的集合,使用了最新的浏览器技术,给你的 Web
开发提供了时尚的版式,表单,buttons,表格,网格系统等等。

图片 11

DEMO

2、Semantic UI

Semantic UI —
完全语义化的前端界面开发框架,跟 Bootstrap 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。

图片 12

DEMO

3、ZUI

ZUI
是禅道项目管理软件团队在完善自己产品过程中形成的一个开源前端实践方案,它具有简单美观,易于使用,轻快独立稳定等特点,比较适合中文环境。

图片 13

DEMO

4、Layui 

Layui 是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。

图片 14

DEMO

5、Amaze UI

Amaze UI 是中国首个开源 HTML5
跨屏前端框架,旨在帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的前端开发者不再受前端复杂代码困扰。

图片 15

DEMO

6、Flat UI

Flat UI 是一套精美的扁平风格 UI 工具包,基于 Twitter
Bootstrap 实现。这套界面工具包含许多基本的和复杂的
UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等。

图片 16

DEMO

7、Masonry

Masonry 是一 个用来布局的 jQuery
插件,看了下面这张对比图你就知道它的用途:

图片 17

DEMO

8、qooxdoo

qooxdoo 是一个用于开发 Ajax 应用程序的 GUI 框架,使用它可以开发出类似于
Window 桌面风格的 Web 应用程序。

DEMO

2.Zebra

Zebra是一个基于HTML5的工具,可用于创建基于Web的用户界面应用程序。只有你想不到,没有它做不到。Zebra还是那些需要客户端插件才能工作的flash和小程序技术的替代品。Zebra纯粹基于网络。

图片 18

官方网站:

1. Choreographer-js

三、编辑器

1、Editor.md

Editor.md 是一个可嵌入的开源 Markdown
在线编辑器组件,你可以很方便用在浏览器、NW.js(Node-webkit)等地方,基于CodeMirror、jQuery
和 Marked 构建。

图片 19

DEMO

2、CodeMirror

CodeMirror 是一款“Online Source
Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。

图片 20

DEMO

3、TinyMCE

TinyMCE
是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由
JavaScript
写成。功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持
AJAX。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是
PHP,那还可以进一步优化。

DEMO

4、Summernote 

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和
Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。

图片 21

DEMO

5、CKEditor

CKEditor
是新一代的 FCKeditor,是一个重新开发的版本。CKEditor
是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。

DEMO

6、ContentTools

ContentTools 是一个用于构建 HTML 内容的 WYSIWYG 编辑器的 JS 库。

图片 22

DEMO

3.Google Web Designer

此新工具由互联网巨头谷歌发布,旨在帮助那些没有HTML5语言背景知识的人创建互动的HTML5网站。该工具能为你提供所有的编码服务。所有你需要做的就是发挥你的想象力。如果你仍然想自己动手编写一些代码,那么也可以编辑生成的HTML5用于不同的输出。

图片 23

官方网站:

图片 24

四、测试工具

1、Mocha

Mocha 是一个简单、灵活有趣的 JavaScript
测试框架,用于 Node.js 和浏览器上的
JavaScript 应用测试。Mocha 是具有丰富特性的 JavaScript
测试框架,可以运行在 Node.js 和浏览器中,使得异步测试更简单更有趣。Mocha
可以持续运行测试,支持灵活又准确的报告,当映射到未捕获异常时转到正确的测试示例。

图片 25

DEMO

2、Karma

Karma 是一个简单的 javascript 测试工具,它允许在多个真正的浏览器执行
JavaScript 代码。

DEMO

3、CasperJS

CasperJS 是一个开源的导航脚本和测试工具,使用 JavaScript
基于 PhantomJS 编写,用于测试 Web
应用功能,Phantom JS是一个服务器端的 JavaScript API 的
WebKit。其支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。

DEMO

4、Jasmine

Jasmine 是一个简易的JS单元测试框架。Jasmine
不依赖于任何浏览器、DOM、或者是任何 JavaScript
而存在。它适用于所有网站、Node.js 项目,或者是任何能够在 JavaScript
上面运行的程序。 

图片 26

DEMO

5、Selenium

Selenium (SeleniumHQ) 是 thoughtworks
公司的一个集成测试的强大工具,现在存在2个版本,一个叫  selenium-core,
一个叫 selenium-rc 。

图片 27

DEMO

6、Chai

Chai 是一个针对 Node.js 和浏览器的行为驱动测试和测试驱动测试的诊断库,可与任何
JavaScript 测试框架集成。

DEMO

7、SlimerJS

SlimerJS
是一个提供给 Web 开发人员,可通过脚本编程控制的浏览器。它可以让你使用 Javascript
脚本操纵一个网页:打开一个网页,点击链接,修改的内容等,这对于做功能测试,页面自动机,网络监控,屏幕捕获等是非常有用的。

图片 28

DEMO

8、Phantom JS

Phantom JS 是一个服务器端的 JavaScript API 的 WebKit。其支持各种 Web
标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。

图片 29

DEMO

4.Brunch

Brunch是强大的汇编程序,它能让你用一种简单而强大的方式构建精致外观的HTML5应用程序。Brunch能快速产出最稳定的应用程序。

图片 30

官方网站:

Choreographer.js是一个用于处理复杂动画的简单库。

五、CMS 

1、DoraCMS

DoraCMS 是基于 Nodejs+express+mongodb
编写的一套内容管理系统,其结构清晰、模块简单,上手很容易。

图片 31

DEMO

2、Cody

Cody 结合了 Nodejs 和 CMS,是基于 JavaScript
的内容管理系统。作者有超过15年的CMS开发经验,在用户体验和性能上都做得很好,有很大的潜力。

图片 32

DEMO

3、Apostrophe

Apostrophe 是一个基于 Node.js
开发的内容管理系统,核心模块提供了丰富的内容编辑功能,提供一个必须的服务用来跟你的
Express 应用绑定。

图片 33

DEMO

4、Ghost

Ghost 是一个开源的博客平台, 可以把他看作 WordPress 的一个挑战者。Ghost
基于 JavasSript
的 Node.js 进行开发,在可预见的未来里,JS
无疑比 PHP 有着更多的优势。

DEMO

5、KeystoneJS

KeystoneJS 是以 Express 和 MongoDB 为基础搭建的 Node.js CMS 和 Web
应用程序平台。

DEMO

5.NoMe

NoMe是用于访问地理位置和使用HTML5的相关数据的JavaScript库。因为它无需下载大量的数据库到本地计算机,所以能为你进入位置和天气信息时跳过不少麻烦。

图片 34

官方网站:

2. Leaflet.js

六、表格/网格

1、DataTables

DataTables 是一个 jQuery
的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何
HTML 表格。

DEMO

2、jqGrid

jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。

DEMO

3、jTable 

jTable 是一个 jQuery 插件用来创建基于 Ajax 的 CRUD
表格,无需进行 HTML 和 JavaScript 编码。

DEMO

4、ParamQuery

ParamQuery 是一种轻量级的 jQuery
网格插件,基于用于用户界面控制、具有一致 API 的优秀设计模式 jQueryUI
Widget
factory 创建,能够在网页上展示各种类似于
Excel 和 Google Spreadsheet 效果的网格。

DEMO

 

作者:开源中国-达尔文

6.Snap Tomato

这款新HTML工具允许你在任何设备上测试你的HTML5代码。Snap
Tomato简单易用,由一个编辑器和一个单独的标签组成,标签可以让你实时预览正处于编辑器窗口下的网页。

图片 35

官方网站:

图片 36

7. Gauge.js

Gauge.js是用于创建使用JavaScript自定义动画的仪表盘和滑动杆的脚本。你可以创建你所选择的任何仪表盘。此工具完全基于JavaScript,不使用任何其他的代码,如CSS和XML。

图片 37

官方网站:

Leaflet.js是一个开源的移动友好交互式地图JavaScript库。体积仅有33 KB.

8. CoverVid

CoverVid是一个超棒的工具,可用于将HTML视频作为网站的背景,让页面有一种动态的感觉。它是一个小型的jquery扩展,既容易又便于使用。

图片 38

官方网站:

3. Lory

9. JSCapture

JSCapture是目前互联网上最酷的工具之一。它能让你从浏览器对桌面进行截图。它甚至可以只使用JavaScript和HTML5记录你的屏幕。

图片 39

官方网站:

图片 40

10.Quintus

如果你想开发酷炫的游戏,那么选择Quintus吧。Quintus是一款简单的JavaScript
HTML5游戏引擎,易学又易于使用。

图片 41

官方网站:

以上这10个HTML5工具希望能给你带来帮助,你有哪些优秀的HTML5工具框架,欢迎和我们分享。

Lory是一个由Vanilla JavaScript编写的拥有触摸功能的简约滑块。

4. CurrencyFormatter.js

图片 42

CurrencyFormatter.js是一款简单实用的纯JS格式化货币库。它支持155种不同国家的货币格式,并且gzip压缩后仅有7KB
.

5. Arc

图片 43

Arc(Atomic React)是一个基于原子设计模式的React应用程序入门套件。

6. Egjs

图片 44

Egjs是一个基于jQuery的具备UI交互,效果和实用程序的小型组件库。

7. Shave.js

图片 45

Shave是一个用于截断Html元素中文本的现代JavaScript插件。

8. Next.js

图片 46

Next.js是一个用于服务器渲染React应用程序的简约框架。

9. jQuery Linechart

图片 47

jQuery Linechart是一个用于构建简单图表的新型jQuery插件。

10. Blueprint

图片 48

Blueprint是React
UI组件的集合,它涵盖了Web上的常见界面元素、模式以及交互。

11. Tabulator

图片 49

Tabulator是一个易用的交互式jQuery表单生成插件。

12. baguetteBox.js

图片 50

baguetteBox.js是一个简单、易用的响应式Lightbox图片库。它支持移动端上触滑动手势操作。同时,它还是用纯JavaScript编写的。

13. ScrollReveal

图片 51

无论是为桌面,或是移动浏览器,ScrollReveal插件都可以轻松、快速的帮助你为其创建页面滚动显示动画。

14. Marginotes

图片 52

Marginotes是一款使用jQuery实现的添加旁注插件。它能够使用HTML属性中提供的文本向边距添加相应的注释。如果jQuery不是你的“菜”,它还有个不含jQuery的版本。

15. Loud Links

图片 53

Loud
Links是一个轻量级JavaScript库,用于向您的网站添加交互音频。它通过创建HTML5音频元素,来播放MP3或OGG格式的音频文件。

16. Bricks.js

图片 54

Bricks.js是一个用于固定宽度元素的快速堆砌布局生成器。

17. MediumEditor

图片 55

MediumEditor是一个用Vanilla
JavaScript编写的,轻量级用于模仿Medium的开源编辑器。同时,它还有一些可选的Mediaditor扩展与主题。

18. Philter

图片 56

无论是作为一款jQuery插件或是Vanilla
JS框架,Philter均提供了通过HTML属性来控制CSS滤镜的方法。

19. SuperEmbed.js

SuperEmbed.js是一个JavaScript库,它可检测出网页上的内嵌视频(涉及YouTube、Vimeo、Vine、VideoPress、DailyMotion等)并使他们变成响应式元素。

20. Substance

图片 57

Substance是一个基于Web内容编辑的JavaScript库。它为你提供了创建自定义文本编辑器,以及基于Web发布系统所需的所有工具。

21. List.js

图片 58

List.js是一个轻量级、快速的Vanilla
JavaScript脚本。它能为列表、表或任何HTML生成具备搜索、排序、过滤以及灵活性的列表。

22. jqGifPreview

图片 59

jqGifPreview是一个简单的jQuery插件,用于创建GIF预览。类似你在Facebook上看到的那样。

23. Datedropper.js

图片 60

Datedropper.js是一个jQuery插件,它提供了一个简便的方法来管理输入区域的日期。

24. jfMagnify

图片 61

jfMagnify是一个jQuery插件,它可以为任何HTML元素创建放大镜效果,而不仅仅是图像。

25. jQuery formBuilder

图片 62

jQuery
formBuilder是一个可视化的jQuery插件。你可以用快速拖放的方式来创建表单。

26. Popper.js

图片 63

Popper.js是一个轻量级(压缩后4kb)库,用于管理poppers,tooltips和popovers
.只需要一行代码,你就可以快速、简单的对tooltips进行定位。

27. Image Blur Plugin

图片 64

Image Blur Plugin是一个轻量级用于图像模糊的跨浏览器jQuery插件。

28. InlineTweet.jsInlineTweet.js能帮助你轻松地从网页的任何文本上,创建推特表格的分享。而你只需要在带有data-inline-tweet的容器中填好推特的分享文本即可。

29. iMissYou.js

图片 65

iMissYou.js是一个轻便小巧的jQuery插件。它用于当用户离开你的网页时,更改网页的标题和图标。

30. SweetAlert2

图片 66

SweetAlert2是一个漂亮、可定制的JS弹窗插件,它用于替代浏览器默认的弹窗效果。

31. Turntable.js

图片 67

Turntable.js是一个响应的jQuery滑块插件。当你的鼠标(或手指)扫过容器时会产生翻转效果。

32. Force.js

图片 68

Force.js是一个JavaScript库,它可以轻松地让HTML元素在网页上产生动画、页面滚动的效果。

33. Push.jsPush.js是一个用于启动和运行Javascript桌面通知的跨浏览器解决方案。

34. Bideo.js

图片 69

Bideo.js是一个可轻松为网页添加全屏背景视频的JS库。

35. Microlight.js

图片 70

Microlight.js是一个适用于任何编程语言的轻量级代码高亮库,使用它后可大大提高代码的可读性。

36. Algolia Places

图片 71

Algolia
Places是一个易用的JavaScript库。当你在网站上使用地址搜索时,它可以提供一种快速自动填充地址的功能。

37. Flatpickr

图片 72

Flatpickr是一款轻量级的日期选择控件。它由Vanilla JavaScript所编写。

38. Slidebars

图片 73

Slidebars是一个轻量级jQuery框架,它用于创建具有移动端应用样式的off-canvas菜单界面和侧边栏。

39. anime.js

图片 74

anime.js是一个轻量级、灵活的JavaScript动画库。它适用于CSS、SVG、DOM属性和JS对象。

40. Cleave.js

图片 75

Cleave.js是一款简单插件,用于输入框内容的格式化。

41. Skippr

图片 76

Skippr是一个超简单、轻量级的jQuery幻灯片插件。

42. iziModal.js

图片 77

iziModal.js是一个融合优雅、响应式、灵活、轻量级于一身的现代jQuery插件。

43. Lightgallery.js

图片 78

Lightgallery.js是一个功能齐全的JavaScript
Lightbox库,同时它没有任何依赖。

以上就是本文的分享,那么还少了7个框架,它们去哪里了?

鬼知道!!一脸懵逼(/□)….

那么,程小狮就将其补全吧!

44. Progressively

图片 79

Progressively是一个用于逐步加载图片的JavaScript库。由于它完全用JavaScript所编写,所以它不依赖于像jQuery这样的第三方库。同时,它的体积也超级小(gzip压缩后<1.2kB)当用户浏览到页面上加载的图片时,它能够有效的节省带宽和服务器请求。

45. Features.js

图片 80

Feature.js是一个快速、简单、轻量级的浏览器功能检测库。它没有任何的依赖,并且gzip压缩后仅有1kb.

46. UAParser.js

图片 81

UAParser.js是一个轻量级基于JavaScript的User-Agent字符串解析库。用于识别Web浏览器的详细类型、布局引擎、操作系统、CPU架构和设备类型/模型。它支持browser和node.js环境,也可作为jQuery
/ Zepto的插件,Bower / Meteor的包,以及RequireJS / AMD的模块。

47. Monkberry

图片 82

Monkberry是一个快速,小巧(1kb)的用于构建Web用户界面的JavaScript库。

48. viewScroller.js

图片 83

viewScroller.js是一个小巧易用的解决方案,它可以帮助你创建全页滚动网站。

49. Appmetrics.js

图片 84

Appmetrics.js是一个用来测量Web应用程序的小型JS库,并把结果报告发送到Google
Analytics上。

50. Senna.js

图片 85

Senna.js是一个轻量级、快速的单页面应用程序引擎,它提供了几个低级的API,你可以借助它来构建现代的Web应用程序。同时,它压缩后的大小只有15
KB,没有任何依赖。

发表评论

电子邮件地址不会被公开。 必填项已用*标注