十几个救命插件,普渡芸芸众生
原创: 铁皮饭盒 前端进阶周刊 今天
前言
新手阶段的前端面临的最大问题就是: “这个咋做?”, 这个阶段的前端自己实现交互功能基本是不可能的, 那怎么体现价值呢?
我给个建议: “不会写还不会用吗?”, 其实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);
数据滚动
numberAnimate 是一款数据滚动组件,我是站在巨人的肩膀上进行制作,提高页面美观性 ,使页面更加绚丽。
GitHub地址
https://github.com/zoeblow/numberAnimate
调用方式
在html中引入jquery之后引入numberAnimate.js 完成之后即可直接使用
<div class="number_run_box"></div> <br><br>
<script type="text/javascript" src="../dest/script/jquery.min.js"></script>
<script type="text/javascript" src="../dest/script/numberAnimate.js"></script>
<script>
$(".number_run_box").numberAnimate({num:'15342.10', pst:"%", dot:2, speed:2000, symbol:","});
</script>
参数
numberAnimate({num:'15342.10', pst:"%", dot:2, speed:2000, symbol:","})
另一个
https://github.com/inorganik/CountUp.js