十几个救命插件，普渡芸芸众生

最新推荐文章于 2022-12-16 17:27:32 发布

程序员黑叔

最新推荐文章于 2022-12-16 17:27:32 发布

阅读量134

点赞数

原文链接：https://juejin.im/post/5d904712e51d45781e0f5dd0

版权

点击上方“前端进阶周刊”，选择“置顶或者星标”

期待你的关注！

前言

新手阶段的前端面临的最大问题就是: "这个咋做?", 这个阶段的前端自己实现交互功能基本是不可能的, 那怎么体现价值呢?

我给个建议: "不会写还不会用吗?", 其实js发展这么多年,常见的功能在github上都是可以找到的, 下面我就给大家拿出我收藏多年的"救命插件"!

highlight (代码高亮)

GitHub地址

https://github.com/highlightjs/highlight.js

使用示例

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

blueimp-md5 (md5加密)

GitHub地址

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

使用示例

var hash = md5('value') // "2063c1608d6e0baf80249c42e2be5804"

vconsole(移动端调试神器)

GitHub地址

https://github.com/Tencent/vConsole

使用示例

new VConsole(); // 就这么简单

copy-to-clipboard (剪贴板)

GitHub地址

https://github.com/zenorocha/clipboard.js

使用示例

var clipboard = new ClipboardJS('.btn');

FileSaver (文件另存为)

GitHub地址

https://github.com/eligrey/FileSaver.js

使用示例

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

excel-js (xlsx转换)

GitHub地址

https://github.com/SheetJS/sheetjs

使用示例

var workbook = XLSX.utils.table_to_book(document.getElementById('table'));

jsPDF (生成pdf)

GitHub地址

https://github.com/MrRio/jsPDF

使用示例

var doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('a4.pdf');

fileApi (上传, 支持进度/分段)

GitHub地址

https://github.com/mailru/FileAPI

使用示例

var uploadButton = document.getElementById('uploadButton');
FileAPI.event.on(uploadButton, 'change', function (evt){
}

swipe(轮播)

GitHub地址

https://github.com/nolimits4web/swiper

qrcodejs(二维码生成器)

GitHub地址

https://github.com/davidshimjs/qrcodejs

使用示例

var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "你好js!",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});

autosize (textara高度自适应文字)

GitHub地址

https://github.com/jackmoore/autosize

使用示例

autosize(document.querySelectorAll('textarea'));

shake.js (监听手机震动)

GitHub地址

https://github.com/alexgibson/shake.js

使用示例

var myShakeEvent = new Shake({
    threshold: 15,
    timeout: 1000
});


window.addEventListener('shake', ()=>{
	// 摇晃触发
}, false);

dayjs (时间格式转换)

GitHub地址

https://github.com/iamkun/dayjs

使用示例

dayjs('2018').fromNow(); // 1年前

axios( 纯js实现, 无依赖)

GitHub地址

https://github.com/axios/axios

progressbar (进度条)

GitHub地址

https://github.com/kimmobrunfeldt/progressbar.js

使用示例

var bar = new ProgressBar.Circle(container, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});
bar.animate(1.0);