🚆 novice front end do not panic! Here you go ✊10 straws 🍃

This article will be updated with useful plugins at 😊, but you can check out 😊

The biggest question facing the front end of the novice phase is: “😥 how do I do this?” It is almost impossible for the front end of this stage to implement the interaction function itself, so how can the value be embodied?

I give a suggestion: “Can’t write, can’t use?” In fact, js development for so many years, common functions can be found on Github, below I will give you my favorite “save the life” plugin!

[2020-03-16 new] QS (construct/parse address bar parameters)

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'}
Copy the code

github.com/ljharb/qs

[2019-10-25新] 2019-10-25 下载

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

Github.com/highlightjs…

[2019-10-11新] BlueIMP – MD5 encryption

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

Github.com/blueimp/Jav…

[2019-10-10] Vconsole (mobile terminal debugging)

new VConsole(); // It's that simple
Copy the code

Github.com/Tencent/vCo…

Copy-to-clipboard

var clipboard = new ClipboardJS('.btn');
Copy the code

Github.com/zenorocha/c…

Save files as FileSaver

Github.com/eligrey/Fil…

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

Excel-js (XLSX conversion)

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

Github.com/SheetJS/js-…

JsPDF (generate PDF)

var doc = new jsPDF();
doc.text('Hello world! '.10.10);
doc.save('a4.pdf');
Copy the code

github.com/MrRio/jsPDF

FileApi (upload, progress/segmentation support)

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

Github.com/mailru/File…

Swipe (by)

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">The first page</div>
        <div class="swiper-slide">The second page</div>
        <div class="swiper-slide">The third page</div>
    </div>
</div>
Copy the code

new Swiper ('#my-swiper');
Copy the code

Github.com/nolimits4we…

Qrcodejs (QR code generator)

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

Github.com/davidshimjs…

Autosize (Textara highly Adaptive text)

autosize(document.querySelectorAll('textarea'));
Copy the code

Github.com/jackmoore/a…

Shake. Js (Listen to your phone vibrate)

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

window.addEventListener('shake', () = > {// Shake trigger
}, false);
Copy the code

Github.com/alexgibson/… Tip: Good for making “shake it up” activity pages live games

Dayjs (Time format conversion)

dayjs('2018').fromNow(); / / 1 years ago
Copy the code

Github.com/iamkun/dayj…

Axios ($Ajax instead of JQ, pure JS implementation, no dependencies)

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  });
Copy the code

github.com/axios/axios

Progressbar (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);  
Copy the code

Github.com/kimmobrunfe…

The last

😃 thank you for reading, finally push down their own small tools, as the work of 8 or 9 years old novice plug-in with more than their own also built a few small tools, everyone to see if there is need.

any-rule

🚀 all the regexes you need are here!

🔥 support vscode version, search re no longer “baidu” 😃

Search for “any-rule” in VSCode to install.

🚀 more details: https://github.com/any86/any-rule

any-touch

👋 a gesture library that supports tap/press/pan/swipe/pinch/rotate, and supports both mouse and touch screen gestures.

The online demo

import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);

at.on("pan", ev => {
  // Drag triggers.
});
Copy the code

🚀 more details: https://github.com/any86/any-touch

vue-create-root

🍭 for gadgets less than 1KB, turn vue components into commands like this.$XXX.

// main.js
Vue.use(createRoot);

// xxx.vue
import UCom from '.. /UCom.vue';
{
    mounted(){
        // The default component is inserted at the end of 
        this.$createRoot(UCom, {props: {value:'hello vue! '}});
        // Or abbreviated:
        this.$createRoot(UCom, {value:'hello vue! '}); }}Copy the code

🚀 more details: https://github.com/any86/vue-create-root

be-full

🍔 Less than 1KB of the gadget, any element one-click full screen.

beFull(document.body);
Copy the code

🚀 more details: https://github.com/any86/be-full

WeChat group

Thank you for reading, if you have any questions, you can add my wechat, I will pull you into the wechat group (because Tencent limits the number of wechat groups to 100, I must pull you into the group after the number exceeds 100)