工作中经常用到github上优秀、实用、轻量级、无依赖的插件和库

标签: javascript html5 github html | 发表时间:2017-04-09 11:09 | 作者:微醺岁月
出处:https://segmentfault.com/blogs

原文收录在我的 GitHub博客 ( https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴。

按照格式推荐好用的插件有福利哦,说不定会送1024论坛邀请码,好自为之,你懂的,嘿嘿嘿。

由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐。 点击我呀,进入商店,自备梯子,如果不会翻墙,赶紧转行。。。

效果预览,是不是很方便,图片较多,建议等待一会或者多刷新几下:

Echo.js – 简单易用的图片延迟加载插件

github: https://github.com/toddmotto/...

官方网站: https://toddmotto.com/echo-js...

star:3k+

Install:

  npm:npm install echo-js
bower:bower install echojs

大小:2KB

功能介绍:
  Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库,压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视区域的时候,它就会改变图像的 src 属性,从服务端加载所需的图片,这也是一个异步的过程。
  
Demo:
效果预览地址: https://jawil.github.io/demo/...
Demo源码: https://github.com/jawil/jawi...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






Lazyr.js – 延迟加载图片(Lazy Loading)

github: https://github.com/callmecavs...

官方网站: http://callmecavs.com/layzr.j...

star:5k+

Install:

  npm:npm install layzr.js --save

大小:2.75 KB

功能介绍:
  Lazyr.js 是一个小的、快速的、现代的、相互间无依赖的图片延迟加载库。通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度。这个库通过保持最少选项并最大化速度。

Demo:
跟上面的Echo.js用法类似,喜欢的可以自行去尝试,这里就不再演示了,我一般用Echo.js。






better-scroll.js – 小巧,灵活的 JavaScript 模拟滚动条的插件

github: https://github.com/ustbhuangy...

官方网站: https://ustbhuangyi.github.io...

star:300+

Install:

  npm install better-scroll --save-dev
import BScroll from 'better-scroll';

大小:24 KB

功能介绍:
  better-scroll 是一个只有24.8KB的 JavaScript 模拟浏览器自带滚动条的插件,是在 iscroll开源的基础上进行优化的一款插件,简单好用,轻巧高性能,功能强大,API通俗易懂,是一款优秀的scroll插件,抛弃原生滚动条,从现在做起。

Demo:
效果预览地址: https://jawil.github.io/demo/... (PC端切换到移动模式)
Demo源码: https://github.com/jawil/webp...
注:在ustbhuangyi的源码下改进了一下,做成多页面,技术栈:webpack2+vue.js2+sass+axios

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






better-picker – 一款轻量级IOS风格的JavaScript选择器

github: https://github.com/ustbhuangy...

官方网站: http://ustbhuangyi.github.io/...

star:200+

Install:

  npm: npm install better-picker --save-dev
import Picker from 'better-picker'

大小:46.5 KB

功能介绍:
  移动端最好用的的筛选器组件,高仿 ios 的 UIPickerView ,非常流畅的体验,原生 JS 实现,不依赖任何插件和第三方库。
Demo:
效果预览地址: http://ustbhuangyi.github.io/...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






Sortable – 一款用于实现元素拖拽排序的功能的插件

github: https://github.com/RubaXa/Sor...

官方网站: http://rubaxa.github.io/Sorta...

star:9k+

Install:

  Bower: bower install sortablejs --save
npm: npm install sortablejs 

大小:5 KB

功能介绍:
 Sortable:现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery这玩意。

Demo:
效果预览地址: http://rubaxa.github.io/Sorta...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。







slick – 功能异常强大的一个图片滑动切换效果库

github: https://github.com/kenwheeler...

官方网站: http://kenwheeler.github.io/s...

star:17k+

Install:

  Bower: bower install slick-carousel --save
npm: npm install slick-carousel
CDNs:
https://cdnjs.com/libraries/slick-carousel
https://www.jsdelivr.com/projects/jquery.slick

大小:40 KB

功能介绍:
 slick 是一个功能异常强大的一个图片滑动切换效果库,接口丰富,支持各种动画和各种样式的切换滑动,唯一的缺点就是 基于jQuery,基本废了,现在没人喜欢用jQuery,该淘汰了。。。支持 RequireJS 以及 Bower 安装。

Demo:
效果预览地址: http://kenwheeler.github.io/s...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。







swipe – 非常轻量级的一个图片滑动切换效果库

github: https://github.com/lyfeyaj/Sw...

官方网站: http://lyfeyaj.github.io/swip...

star:200+

Install:

  Bower: bower install swipe-js  --save
npm: npm install swipe-js 

大小:5 KB

功能介绍:
 swipe:非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb。可以结合 jQuery、RequireJS 使用。

Demo:
效果预览地址: http://lyfeyaj.github.io/swipe/

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






Slideout.js – 触摸滑出式 Web App 导航菜单

github: https://github.com/mango/slid...

官方网站: https://slideout.js.org/https://github.com/t4t5/sweet...

官方网站: http://t4t5.github.io/sweetal...

star:15k+

Install:

  bower:bower install sweetalert
npm:npm install sweetalert
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

大小:16 KB

功能介绍:
  Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择,可以灵活控制。

Demo:
效果预览地址: http://t4t5.github.io/sweetal...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。

类似插件:limonte/sweetalert2,好像这个最近还在更新,这个感觉更漂亮,大同小异,这里不多做介绍。

github: https://github.com/limonte/sw...

官方网站: https://limonte.github.io/swe...






Awesomplete.js - 比datalist更强大更实用,零依赖的简单自动补全插件

github: https://github.com/leaverou/a...

官方网站: http://leaverou.github.io/awe...

star:5k+

Install:
`npm: npm install awesomplete
`

大小:5 KB

功能介绍:
 Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建。你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置更多选项),您可以用几行 JS 代码,提供更多的自定义。

Demo:
效果预览地址: http://leaverou.github.io/awe...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。

Cleave.js – 自动格式化表单输入框的文本内容

github: https://github.com/nosir/clea...

官方网站: http://nosir.github.io/cleave...

star:6k+

Install:

  npm:npm install --save cleave.js
bower:bower install --save cleave.js

大小:11.1 KB

功能介绍:
  Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容。 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性。通过使用这个库,您不需要编写任何正则表达式来控制输入文本的格式。然而,这并不意味着取代任何验证或掩码库,你仍应在后端验证数据。它支持信用卡号码、电话号码格式(支持各个国家)、日期格式、数字格式、自定义分隔符,前缀和块模式等,提供 CommonJS/AMD 模式以及ReactJS 组件端口。

Demo:
效果预览地址: http://nosir.github.io/cleave...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。
输入201748自动格式化成2017-04-08,是不是很方便





Immutable.js – JavaScript 不可变数据集合(Facebook出品)

github: https://github.com/facebook/i...

官方网站: http://facebook.github.io/imm...

star:18k+

Install:

  npm install immutable --S-D

大小:60 KB

功能介绍:
  不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估。Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表。Immutable.js 提供持久化的列表、堆栈、Map, 以及 OrderedMap 等,最大限度地减少需要复制或缓存数据。

Demo:

  <script src="immutable.min.js"></script>
<script>
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set('b', 50);
map1.get('b'); // 2
map2.get('b'); // 50
</script>

更多信息和探讨请移步,这里不多做介绍: facebook immutable.js 意义何在,使用场景?






Popmotion.js – 小巧,灵活的 JavaScript 运动引擎

github: https://github.com/Popmotion/...

官方网站: https://popmotion.io/

star:3k+

Install:

  npm install --save popmotion
import { tween } from 'popmotion';

大小:12 KB

功能介绍:
  Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmotion 网站上有很多很赞的效果,赶紧去体验一下。

Demo:
效果预览地址: http://codepen.io/popmotion/p...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。







Dynamics.js - 创建逼真的物理动画的 JS 库

github: https://github.com/michaelvil...

官方网站: http://dynamicsjs.com/

star:6k+

Install:

  npm: npm install dynamics.js
bower: bower install dynamics.js

大小:20 KB

功能介绍:
  Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmotion 网站上有很多很赞的效果,赶紧去体验一下。

Demo:
效果预览地址: http://dynamicsjs.com/

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






Rainyday.js – 使用 JavaScript 实现雨滴效果

github: https://github.com/maroslaw/r...

官方网站: http://maroslaw.github.io/rai...

star:5k+

Install:

在github的dist目录下载rainyday.min.js

大小:10 KB

功能介绍:
 Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画。Rainyday.js 有功能可扩展的 API,例如碰撞检测和易于扩展自己的不同的动画组件的实现。它是一个使用 HTML5 特性纯 JavaScript 库,支持大部分现代浏览器。

Demo:
效果预览地址: http://maroslaw.github.io/rai...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。

Swiper – 经典的移动触摸滑块轮播插件

github: https://github.com/nolimits4w...

官方网站: http://idangero.us/swiper/https://github.com/daniel-lun...

官方网站: http://daniel-lundin.github.i...

star:5k+

Install:

  bower:bower install snabbt.js
npm:npm install snabbt.js
CDNs:
https://cdnjs.com/libraries/snabbt.js
http://www.jsdelivr.com/#!snabbt

大小:16 KB

功能介绍:
 Snabbt.js 是一个简约的 JavaScript 动画库。它会平移,旋转,缩放,倾斜和调整你的元素。通过矩阵乘法运算,变换等可以任何你想要的方式进行组合。最终的结果通过 CSS3 变换矩阵设置。

Demo:
效果预览地址: http://daniel-lundin.github.i...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






imagesLoaded – 检测网页中的图片是否加载完成

github: https://github.com/desandro/i...

官方网站: http://imagesloaded.desandro....

star:6k+

Install:

  Bower: bower install imagesloaded --save
npm: npm install imagesloaded
CDNs:
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.js"></script>

大小:5 KB

功能介绍:
 imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库。支持回调的获取图片加载的进度,还可以绑定自定义事件。可以结合 jQuery、RequireJS 使用。

Demo:
效果预览地址: http://codepen.io/desandro/fu...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






Fort.js – 时尚、现代的表单填写进度提示效果

github: https://github.com/idriskhenc...

官方网站: https://github.com/idriskhenc...

star:800+

Install:

  CDN:
css:
https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.css
js:
https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.js

大小:6 KB

功能介绍:
  Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果,满足开发的各种场合需要。

Demo:
效果预览地址: http://idriskhenchil.github.i...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






MagicSuggest – Bootstrap 主题的多选组合框

github: https://github.com/nicolasbiz...

官方网站: http://nicolasbize.com/magics...

star:1k+

Install:

  github自行进行下载

大小:21.8 KB

功能介绍:
  MagicSuggest 是专为 Bootstrap 主题开发的多选组合框。它支持自定义呈现,数据通过 Ajax 异步获取,使用组件自动过滤。它允许空间免费项目,也有动态加载固定的建议。

Demo:
效果预览地址: http://nicolasbize.com/magics...

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






Numeral.js – 格式化和操作数字的 JavaScript 库

github: https://github.com/adamwdrape...

官方网站: http://numeraljs.com/

star:4k+

Install:

  npm: npm install numeral
CDNs:
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

大小:10 KB

功能介绍:
   Numeral.js 是一个用于格式化和操作数字的 JavaScript 库。数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大。支持包括中文在内的17种语言。

Demo:

  var myNumeral = numeral(1000);

var value = myNumeral.value();
// 1000

var myNumeral2 = numeral('1,000');

var value2 = myNumeral2.value();
// 1000






Draggabilly – 轻松实现拖放功能(Drag & Drop)

github: https://github.com/desandro/d...

官方网站: http://draggabilly.desandro.c...

star:2k+

Install:

  Bower: bower install draggabilly --save
npm: npm install draggabilly
CDNs:
<script src="https://npmcdn.com/[email protected]/dist/draggabilly.pkgd.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/draggabilly.pkgd.js"></script>

大小:5 KB

功能介绍:
 Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能。只需要简单的设置参数就可以在你的网站用添加拖放功能。兼容 IE8+ 浏览器,支持多点触摸。可以灵活绑定事件,支持 RequireJS 以及 Bower 安装。

Demo:
效果预览地址: http://draggabilly.desandro.com/

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






Quill – 可以灵活自定义的开源的富文本编辑器

github: https://github.com/quilljs/qu...

官方网站: https://quilljs.com

star:12k+

Install:

  npm: npm install quill
CDNs:
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.0.0/quill.js" type="text/javascript"></script>
<script src="//cdn.quilljs.com/1.0.0/quill.min.js" type="text/javascript"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet">

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.0.0/quill.core.js" type="text/javascript"></script>

大小:需求不同,大小不同

功能介绍:
  Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题。如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求。

  Quill 旨在通过把自身组织成模块,并提供了强大的 API 来构建额外的模块来解决这个问题。它也并没有规定你用样式来定义编辑器皮肤。Quill 还提供了所有你希望富文本编辑器说用于的功能,包括轻量级封装,众多的格式化选项,以及广泛的跨平台支持。

Demo:
效果预览地址: https://quilljs.com/

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






basket.js – 基于 LocalStorage 的资源加载器

github: https://github.com/addyosmani...

官方网站: https://addyosmani.com/basket...

star:2k+

Install:

  Bower: bower install basket.js --save
npm: npm install basket.js

大小:4 KB

功能介绍:
 basket.js是一款基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存。
 
Demo:
效果预览地址: https://addyosmani.com/basket...
更多示例请查看官方文档






scrollReveal.js – 使元素以非常酷帅的方式进入画布 (Viewpoint)

github: https://github.com/jlmakes/sc...

官方网站: https://scrollrevealjs.org/https://github.com/moment/mom...

官方网站: http://momentjs.com/

star:30k+

Install:

  bower install moment --save # bower
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor

大小:16.6 KB

功能介绍:
  moment.js是一个轻量级的JavaScript库日期解析、验证操作,格式化日期的库。

Demo:
效果预览地址: http://momentjs.com/

Demo效果预览:
这是一个GIF动图,不信,你看第一行的日期,时间在走。






infinite-scroll – 一款滚动加载按需加载的轻量级插件

github: https://github.com/infinite-s...

官方网站: http://www.infinite-scroll.co...

star:4k+

Install:

  github自行下载

大小:20 KB

功能介绍:
 infinite-scroll是一款滚动加载,滚动到最下到自动加载的轻量级JavaScript插件,简单实用,按需加载提高用户体验,非常适合移动端使用,配合上面的图片懒加载如虎添翼。

Demo:
效果预览地址: http://www.dazeddigital.com/

Demo效果预览:
图片有点大,稍等片刻。建议上面Demo效果预览地址进行预览。






欢迎大家按照格式补充,持续更新,有什么好用的轮子赶紧滚起来吧!

推荐有福利,送1024论坛邀请码,嘿嘿嘿。


相关 [工作 github 轻量级] 推荐:

工作中经常用到github上优秀、实用、轻量级、无依赖的插件和库

- - SegmentFault 最新的文章
原文收录在我的 GitHub博客 ( https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 按照格式推荐好用的插件有福利哦,说不定会送1024论坛邀请码,好自为之,你懂的,嘿嘿嘿. 由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐.

索引的工作原理及其种类.md at master · 0voice/interview_internal_reference · GitHub

- -
数据库索引,是数据库管理系统中一个排序的数据结构,以协助快速查询、更新数据库表中数据. 索引的实现通常使用B树及其变种B+树. 在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数据结构上实现高级查找算法. 为表设置索引要付出代价的:一是增加了数据库的存储空间,二是在插入和修改数据时要花费较多的时间(因为索引也要随之变动).

GitHub - cnlh/nps: 一款轻量级、功能强大的内网穿透代理服务器。支持tcp、udp流量转发,支持内网http代理、内网socks5代理,同时支持snappy压缩、站点保护、加密传输、多路复用、header修改等。支持web图形化管理,集成多用户模式。

- -
nps是一款轻量级、高性能、功能强大的. tcp、udp流量转发,可支持任何. tcp、udp上层协议(访问内网网站、本地支付接口调试、ssh访问、远程桌面,内网dns解析等等……),此外还. 支持内网http代理、内网socks5代理、. p2p等,并带有功能强大的web管理端. 做微信公众号开发、小程序开发等----> 域名代理模式.

Home · JohnLangford/vowpal_wabbit Wiki · GitHub

- -
There are two ways to have a fast learning algorithm: (a) start with a slow algorithm and speed it up, or (b) build an intrinsically fast learning algorithm.

GitHub - jgraph/drawio: Source to www.draw.io

- -
draw.io supports IE 11, Chrome 32+, Firefox 38+, Safari 9.1.x, 10.1.x and 11.0.x, Opera 20+, Native Android browser 5.1.x+, the default browser in the current and previous major iOS versions (e.g.

Workor(蜗壳)推出轻量级在线视频沟通工具,想为远程工作团队模拟真实办公环境并提高沟通效率

- - 36氪 | 关注互联网创业
对远程办公团队而言,沟通和协作不像是直接走到桌边开聊那样方便,对于沟通和协作工具的要求可能是越快唤起越好. 最近上线的 Workor(蜗壳)就是一款轻量级的在线视频沟通协作工具,想为远程工作团队模拟真实办公环境并提高沟通效率. Workor是免安装的在线视频工具,目前视频通话仅支持Chrome浏览器.

轻量级Kubernetes k3s初探

- - InfoQ推荐
1 k3s简介–5 less than K8s. k3s [1] 是rancher®开源的一个Kubernetes发行版,从名字上就可以看出k3s相对k8s做了很多裁剪和优化,二进制程序不足50MB,占用资源更少,只需要512MB内存即可运行. 而之所以称为k3s是因为相对k8s裁剪了如下5个部分:.

git和github简介(上)

- linyehui - 没做完,没准备好
在此贴上本人在Web标准化交流会6月25日北京站的主题分享. 在线PPT:http://jinjiang.github.com/slides/learning-git/. PPT源码:https://github.com/Jinjiang/slides/tree/gh-pages/learning-git.

Github使用指南(转)

- - CSDN博客推荐文章
来自:https://github.com/neuola/neuola-legacy/wiki/github%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97. 如果你只是想了解 github 的使用,请跳到 Github 简介一节. 作为程序员大军之一,想必大家有这样的经历吧.

github 上的好东西

- - 收集分享互联网资源
基于HTML5的专业级图像处理开源引擎.