前端必备插件大全（手把手教你前端救命稻草）
前端必备插件大全（手把手教你前端救命稻草）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转换)var workbook = XLSX.utils.table_to_book(document.getElementById('table')); 复制代码https://github.com/SheetJS/sheetjshttps://github.com/eligrey/FileSaver.jsvar hash = md5('value'
新手阶段的前端面临的最大问题就是: "这个咋做?" 这个阶段的前端自己实现交互功能基本是不可能的 那怎么体现价值呢?
我给个建议: "不会写还不会用吗?" 其实js发展这么多年 常见的功能在github上都是可以找到的 下面我就给大家拿出我收藏多年的"救命插件"!
[2020-03-16新增] qs (构造/解析地址栏参数)qs.stringify({ a: ['b' 'c' 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'
});
qs.parse('a=b&c=d');
// {a:'b' c:'d'}
复制代码
github.com/ljharb/qs
[2019-10-25新增] highlight (代码高亮)document.addEventListener('DOMContentLoaded' (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
复制代码
https://github.com/highlightjs/highlight.js
[2019-10-11新增] blueimp-md5 (md5加密)var hash = md5('value') // "2063c1608d6e0baf80249c42e2be5804"
复制代码
https://github.com/blueimp/JavaScript-MD5
[2019-10-10新增] vconsole(移动端调试神器 在手机上可看到控制台)new VConsole(); // 就这么简单
复制代码
https://github.com/Tencent/vConsole
copy-to-clipboard (剪贴板)var clipboard = new ClipboardJS('.btn');
复制代码
https://github.com/zenorocha/clipboard.js
FileSaver (文件另存为)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转换)
var workbook = XLSX.utils.table_to_book(document.getElementById('table'));
复制代码
https://github.com/SheetJS/sheetjs
jsPDF (生成pdf)var doc = new jsPDF();
doc.text('Hello world!' 10 10);
doc.save('a4.pdf');
复制代码
github.com/MrRio/jsPDF
fileApi (上传 支持进度/分段)var uploadButton = document.getElementById('uploadButton');
FileAPI.event.on(uploadButton 'change' function (evt){
}
复制代码
https://github.com/mailru/FileAPI
swipe(轮播)<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">第一页</div>
<div class="swiper-slide">第二页</div>
<div class="swiper-slide">第三页</div>
</div>
</div>
复制代码
new Swiper ('#my-swiper');
复制代码
https://github.com/nolimits4web/swiper
qrcodejs(二维码生成器)var qrcode = new QRCode(document.getElementById("qrcode") {
text: "你好js!"
width: 128
height: 128
colorDark : "#000000"
colorLight : "#ffffff"
correctLevel : QRCode.CorrectLevel.H
});
复制代码
https://github.com/davidshimjs/qrcodejs
autosize (textara高度自适应文字)autosize(document.querySelectorAll('textarea'));
复制代码
https://github.com/jackmoore/autosize
shake.js (监听手机震动)var myShakeEvent = new Shake({
threshold: 15
timeout: 1000
});
window.addEventListener('shake' ()=>{
// 摇晃触发
} false);
复制代码
https://github.com/alexgibson/shake.js 提示: 适合用来做"摇一摇"的活动页面活游戏
dayjs (时间格式转换)dayjs('2018').fromNow(); // 1年前
复制代码
https://github.com/iamkun/dayjs
axios (代替jq的$ajax 纯js实现 无依赖)axios.get('/user' {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
});
复制代码
github.com/axios/axios
progressbar (进度条)var bar = new ProgressBar.Circle(container {
strokeWidth: 6
easing: 'easeInOut'
duration: 1400
color: '#FFEA82'
trailColor: '#eee'
trailWidth: 1
svgStyle: null
});
bar.animate(1.0);
复制代码
https://github.com/kimmobrunfeldt/progressbar.js
最后感谢大家阅读 最后推下自己的小工具 作为工作了8 9年的老菜鸟插件用多了自己也造了几个小工具 大家看看有没有需要的.
any-rule你要的正则都在这!
支持vscode版本 查正则再也不用"百度"了.
vscode中搜索"any-rule"进行安装.
更多说明: https://github.com/any86/any-rule
any-touch一个手势库 支持tap(点击) / press(按) / pan(拖拽) / swipe(划) / pinch(捏合) / rotate(旋转) 6大类手势 同时支持鼠标和触屏.
在线演示
import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);
at.on("pan" ev => {
// 拖拽触发.
});
复制代码
更多说明: https://github.com/any86/any-touch
vue-create-root不到1kb的小工具 把vue组件变成this.$xxx这样的命令.
// main.js
Vue.use(createRoot);
// xxx.vue
import UCom from '../UCom.vue';
{
mounted(){
// 默认组件被插入到<body>尾部
this.$createRoot(UCom {props: {value:'hello vue!'}});
// 或者简写为:
this.$createRoot(UCom {value:'hello vue!'});
}
}
复制代码
更多说明: https://github.com/any86/vue-create-root
be-full不到1kb的小工具 任意元素一键全屏.
beFull(document.body);
复制代码
更多说明: https://github.com/any86/be-full
原链接：https://juejin.im/post/5d904712e51d45781e0f5dd0
