🚆新手前端不要慌! 给你✊10根救命稻草🍃

铁皮饭盒

https://github.com/any86

快放假了特意给大家坐火车打发时间写了这篇工具收集类的小文, 让大家轻轻松松学知识, 祝大家十一快乐, 吃开心玩开心!

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

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

copy-to-clipboard (剪贴板)

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

https:// github.com/zenorocha/cl ipboard.js

FileSaver (文件另存为)

https:// github.com/eligrey/File Saver.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/js-x lsx

jsPDF (生成pdf)

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

https:// github.com/MrRio/jsPDF

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

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

https:// github.com/mailru/FileA PI

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/au tosize

shake.js (监听手机震动)

var myShakeEvent = new Shake({
    threshold: 15,
    timeout: 1000
window.addEventListener('shake', ()=>{
    // 摇晃触发
}, false);

https:// github.com/alexgibson/s hake.js 提示 : 适合用来做"摇一摇"的活动页面活游戏

dayjs (时间格式转换)

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

https:// github.com/iamkun/dayjs

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/kimmobrunfel dt/progressbar.js

最后

感谢大家阅读, 最后推下自己的小工具, 作为工作了8,9年的老菜鸟插件用多了自己也造了几个小工具, 大家看看有没有需要的.

any-rule

支持vscode版本, 查证则再也不用"百度"了.

vscode 中搜索" any-rule "进行安装.

https:// github.com/any86/any-ru le

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 => {
  // 拖拽触发.

tap(点击)

用来解决移动端"click的300ms延迟问题", 同时通过设置支持"双击"事件.

press(按)

用来触发自定义菜单.

pan(拖拽)

这应该是组件库中最常用的手势, carousel(轮播) / drawer(抽屉) / scroll(滑动) / tabs(标签页)等都需要"拖拽识别"

swipe(滑)

carousel/tabs的切换下一幅, scroll的快速滑动等.

pinch(捏合) / rotate(旋转)

pinch用来缩放商品图片, rotate一般用在高级定制化功能呢, 比如对图片(商品)刻字后旋转文字.

vue-create-root

不到1kb的小工具, 把vue组件变成this.$xxx这样的命令.

// main.js
Vue.use(createRoot);
// xxx.vue
import UCom from '../UCom.vue';
    mounted(){
        // 默认组件被插入到<body>尾部