新手阶段的前端面临的最大问题就是: "😥这个咋做?", 这个阶段的前端自己实现交互功能基本是不可能的, 那怎么体现价值呢?
我给个建议: "不会写还不会用吗?", 其实js发展这么多年,常见的功能在github上都是可以找到的, 下面我就给大家拿出我收藏多年的"救命插件"!
var clipboard = new ClipboardJS('.btn');
https://github.com/zenorocha/clipboard.js
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
https://github.com/eligrey/FileSaver.js
var workbook = XLSX.utils.table_to_book(document.getElementById('table'));
https://github.com/SheetJS/js-xlsx
var doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('a4.pdf');
https://github.com/MrRio/jsPDF
var uploadButton = document.getElementById('uploadButton');
FileAPI.event.on(uploadButton, 'change', function (evt){
}
https://github.com/mailru/FileAPI
<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
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(document.querySelectorAll('textarea'));
https://github.com/jackmoore/autosize
var myShakeEvent = new Shake({
threshold: 15,
timeout: 1000
});
window.addEventListener('shake', ()=>{
// 摇晃触发
}, false);
https://github.com/alexgibson/shake.js提示: 适合用来做"摇一摇"的活动页面活游戏
dayjs('2018').fromNow(); // 1年前
https://github.com/iamkun/dayjs
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