🚆Начинающий фронтенд не паникуйте, я дам вам ✊10 спасительных соломинок🍃

JavaScript ECMAScript 6

😊В этой статье всегда будут обновляться полезные плагины, можете зайти посмотреть 😊

Самая большая проблема, с которой сталкивается фронтенд на этапе новичка:😥 Как это сделать?«В интерфейсе этого этапа практически невозможно реализовать интерактивную функцию самостоятельно,Так как же это отражает стоимость?

У меня есть предложение: "Не можете написать или использовать его?«На самом деле js разрабатывался столько лет, и общие функции можно найти на github. Сейчас я покажу вам то, что я собирал за многие годы»Плагин справки"!

[16.03.2020 Добавлено] 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 Новое] подсветка (подсветка кода) 

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

GitHub.com/highlight ждет…

[2019-10-11 Новое] blueimp-md5 (шифрование md5) 

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

GitHub.com/blueimp/Jav…

[2019-10-10 Новое] vconsole (артефакт отладки мобильного терминала, вы можете увидеть консоль на мобильном телефоне) 

new VConsole(); // 就这么简单

GitHub.com/Tencent/VC о…

скопировать в буфер обмена 

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

GitHub.com/Как О Роча/От…

FileSaver (Файл Сохранить как)

GitHub.com/Eli GRE собирается/FI…

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'));

GitHub.com/sheet JS/ просто…

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){

}

GitHub.com/куплено как/файл…

листать (карусель) 

<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');

GitHub.com/no limit4 высокая…

qrcodejs (генератор QR-кода) 

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

GitHub.com/David MJ мертв…

авторазмер (текстара с адаптивной высотой текста) 

autosize(document.querySelectorAll('textarea'));

GitHub.com/Джек Мур/Ах…

Shake.js (слушать вибрацию телефона) 

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

window.addEventListener('shake', ()=>{
	// 摇晃触发
}, false);

GitHub.com/Алекс Гибсон/… намекать: Подходит для живых игр на странице активности "Shake and Shake".

dayjs (преобразование формата времени) 

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

GitHub.com/iamankiw/printers…

axios ($ajax вместо jq, чистая реализация js, никаких зависимостей) 

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

github.com/axios/axios

индикатор 

var bar = new ProgressBar.Circle(container, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});

bar.animate(1.0);

GitHub.com/Kim запускает шаблон Fe…

наконец

😃 Спасибо за прочтение, и наконец-то запилил свой гаджет. Как старый новичок-плагин, проработавший 8 или 9 лет, сам собрал несколько гаджетов. Посмотрим, не понадобится ли что-нибудь.

any-rule

🚀 Все правила, которые вы хотите, здесь!

🔥 Поддержите версию vscode, проверьте, не используете ли вы «Baidu». 😃

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

🍭 Гаджет размером менее 1 КБ, превратите компонент vue в команду, подобную этой $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

🍔 Виджеты размером менее 1кб, полноэкранный режим в один клик для любого элемента.

beFull(document.body);

🚀 Дополнительные инструкции: https://github.com/any86/be-full

Группа WeChat

Спасибо за чтение, если у вас есть какие-либо вопросы, вы можете добавить меня в WeChat, я приглашу васГруппа WeChat(Из-за ограничения Tencent на 100 человек в группах WeChat я должен зайти после более чем 100 человек)

Категории