preface

In development, we often encapsulate some commonly used code blocks and functional blocks for better reuse. A plug-in is then pulled out to do functionality independently, interacting with other parts via apis or configuration items.

The following are some common front-end open source plug-ins that I have accumulated in my work. These are just listed here, and detailed usage of each plug-in can be described on the official website or Gayhub. Note: often a solution will have more than one plug-in, readers need to select according to their own actual business needs, welcome to leave messages to communicate and supplement. ^_^

You can add a bookmark (Ctrl + D) and see the specific plug-in and its usage when you encounter similar situations.

Also, don’t reinvent the wheel, focus on the business logic!

Function library

Lodash (recommended) : github.com/lodash/loda…

Underscore：underscorejs.org/

Ramda：github.com/ramda/ramda

Outils:github.com/proYang/out…

30- seconds-of-code:github.com/chalarangel…

The animation library

Animate.css

  • CSS3 animation library, is also the most general animation library.
  • Daneden. Making. IO/animate. CSS…

Anime. Js:

  • A powerful, lightweight javascript library for animation
  • animejs.com/

Hover. CSS:

  • CSS hover effect can be applied to links, buttons, images and so on.
  • Github.com/IanLunn/Hov…

wow.js:

  • Scroll show animation
  • Wow. js relies on animate. CSS, so it supports over 60 animations.
  • Github.com/matthieua/W…

ScrollReveal. Js:

  • Similar to wow. Js
  • Github.com/jlmakes/scr…

Magic. CSS:

  • Css3 Animation library
  • Github.com/miniMAC/mag…

Waves:

  • Click ripple effect
  • github.com/fians/Waves

Move. Js:

  • A small JavaScript library that controls a series of CSS animation sequences through JS, making CSS3 animation very simple and elegant.
  • Github.com/visionmedia…

Velocity. Js:

  • A full-featured JavaScript animation suite, including animation effects such as fade in and out, scroll, scroll, stop, end, flip, and more.
  • Github.com/julianshapi…

Scroll to the library

Iscroll – Smooth scrolling plugin: github.com/cubiq/iscro…

BetterScroll:

  • Github.com/ustbhuangyi…
  • An optimized version of Iscroll, which makes the mobile slide experience much smoother

Mescroll:

  • Pull up on the mobile terminal to refresh the pull down load
  • www.mescroll.com/api.html

Animatescroll:

  • JQuery scrolls to the specified location
  • Plugins.compzets.com/animatescro…

Crossfade. Js:

  • JQuery image blur plugin Crossfade
  • www.dowebok.com/104.html

JQuery Scrollbox:

  • Image text scrolling plugin
  • www.jq22.com/jquery-info…

LiMarquee:

  • JQuery seamless scrolling plugin
  • www.dowebok.com/188.html

Shuffling figure

Swiper:

  • Often used on mobile websites to touch and slide content
  • www.swiper.com.cn/

ISlider:

  • Sliding components for mobile terminals
  • Eux.baidu.com/iSlider/dem…

Slip. Js:

  • The mobile end follows the finger slide component, zero dependency.
  • Github.com/binnng/slip…

OwlCarousel2: OwlCarousel2. Making. IO/OwlCarousel…

Slick:www.jq22.com/jquery-info…

MyFocus:www.cosmissy.com/myfocus/tut…

WebSlides:github.com/webslides/w…

Slider: www.jq22.com/jquery-info…

scrolling

Fullpage:www.jq22.com/jquery-info…

pop-up

Layer:

  • layer.layui.com/
  • One of the three independently maintained components of LayUI (layDate, Layer, layim)
  • Although layui contains these components, because they are widely used or used, a copy of layui is extracted and can be referenced independently. We also maintain them synchronously.

Bootbox.js：bootboxjs.com/

DialogBox:

  • Based on the jQuery
  • www.jq22.com/jquery-info…

EasyDialog:www.h-ui.net/easydialog-…

alerts

Notyf:

  • Simple responsive pure JS message notification plug-in
  • www.htmleaf.com/jQuery/Ligh…

PNotify:

  • Information displayed in the upper right corner of the page (not in a pop-up box)
  • sciactive.com/pnotify/
  • sciactive.github.io/pnotify/
  • Github.com/sciactive/p…

Overhang. Js:

  • www.jq22.com/jquery-info…
  • Overhang.js is a JQuery plug-in that displays instant notifications, confirmations, or hints within a given element.

A drop-down box

select2：select2.org/

Cascading selector

ustbhuangyi/picker

  • Github.com/ustbhuangyi…
  • The best filter component for mobile, linkage filtering

JQueryDistpicker:

  • fengyuanchen.github.io/distpicker/
  • www.jq22.com/demo/jQuery…

Color selector

Bootstrap Colorpicker 2: github.com/farbelous/b…

Time selector

layDate：www.layui.com/laydate/

wdatepicker

Time and date processing

My Moment. Js:

  • Moment.js is a JavaScript library that parses, validates, manipulates, and displays dates and times.
  • momentjs.com
  • Github.com/moment/mome…

Timeago. Js:

  • Lightweight time conversion Javascript library
  • Github.com/hustcc/time…

Form validation

Validator.js:github.com/chriso/vali…

jQuery Validation

  • JQuery Form validation
  • Github.com/jquery-vali…

The Validation Plugin:

  • JQuery plugin
  • www.imooc.com/learn/385

Validform:

  • One line of code to get the whole site form validation! – Jquery form validation plug-in
  • validform.rjboy.cn/

Paging plug-in

Pagination:github.com/superRaytin…

Rich text editor

wangEditor：www.wangeditor.com/

Baidu UEditor:ueditor.baidu.com/website/

CKEditor：ckeditor.com/

KindEditor：kindeditor.net/demo.php

MediumEditor: yabwe. Making. IO/medium – edit…

Simditor: Simditor. Tower. Im /

Summernote：summernote.org/

Quill：quilljs.com/

Slate:github.com/ianstormtay…

Markdown editor

Editor. Md: pandao. Making. IO/Editor/md

Tree plugin

www.treejs.cn

Lazy image loading

Lazyload:github.com/tuupola/jqu…

The waterfall flow

Masonry:www.cnblogs.com/cjc917/p/74…

http://www.lanrenzhijia.com/jquery/1985.html Metro wind and waterfalls flow distribution effect

Photo album (picture sliding and switching display effect)

PC: Viewer. Js: fengyuanchen. Making. IO/viewerjs /

PC端：photoviewer

The mobile end: PhotoSwipe:www.helloweba.net/javascript/…

Navigation plug-in

okayNav：www.dowebok.com/204.html

Video player

Chimee

  • Componentized H5 player framework
  • chimee.org/
  • Juejin. Im/entry / 68449…

flv.js

  • Bilibili open source pure JavaScript written FLV player
  • Flash Video (FLV) player
  • Github.com/Bilibili/fl…
  • www.toutiao.com/a6478550535…

ckplayer：www.ckplayer.com/

Jplayer: www.jplayer.cn/

Html5player: juejin. Im/post / 684490…

Video.js

  • Open source, free HTML5 and Flash video player
  • Video.js – Open source, free HTML5 and Flash Video player

More green: dogeek.net/

Bullet screen video player

DanmuPlayer – Html5 bullet screen video player plugin: github.com/chiruom/Dan…

Jquery. Danmu. Js – jquery barrage plug-in: github.com/chiruom/jqu…

Scroxt – Subtitle font scroll plugin: github.com/chenjianfan…

Copy and paste plug-ins

Clipboard.js:github.com/zenorocha/c…

ZeroClipboard:github.com/zeroclipboa…

Bar code plug-in

barcode

Qr code plug-in

Jquery.qrcode.js:github.com/jeromeetien…

Drag and drop

Draggabilly:www.jq22.com/jquery-info…

Dragula:www.toutiao.com/a6491847196…

Mobile Event

touch.js

File upload

uploader

WebUploader:

  • Github.com/fex-team/we…
  • HTML5 & FLASH file upload

Code highlighting

hightlight：highlightjs.org/

Front-end internationalization I18N

I18next:github.com/i18next/i18…

Vue-i18n:github.com/kazupon/vue…

Front-end series for jquery. I18n. Properties front-end internationalization solution “filling pit diary” : www.cnblogs.com/landeanfen/…

Based on jQuery. I18n. The properties to achieve the front page of international resources: m.blog.csdn.net/aixiaoyang1…

The map

Baidu Map: lbsyun.baidu.com/

Google maps: www.runoob.com/googleapi/g…

Amap: lbs.amap.com/

Tencent map: lbs.qq.com/

Web instant messaging

LayIM：layim.layui.com/

Small talk: www.xianliao.me/

Data visualization

ECharts ：echarts.baidu.com/index.html

Ali cloud DataV

PDF reader

Github.com/mozilla/pdf…

Theme color extraction

RGBaster:github.com/briangonzal…

Color Thief

vibrant.js

The front store

Ustbhuangyi/storage:

  • SessionStorage and localStorage are encapsulated
  • Github.com/ustbhuangyi…

store.js

  • Encapsulation of localstorage
  • Github.com/jaywcjlove/…

LocalForage:github.com/localForage…

The Mock data

Easy Mock:github.com/easy-mock/e…

Mockjs:

  • mockjs.com
  • Generate any random data and intercept Ajax requests

Json-server + fakerjs: github.com/typicode/js…

share

bShare

JiaThis (closed!!)

QQ sharing component

Baidu’s share

comments

Gitalk

gitment

News soufangwang

Will force

Friend speech (closed!!)

Netease Cloud post (closed!!)

other

IE browser version is too low tip plug-in IEalert.js:www.jqueryfuns.com/resource/45…

Lyric-parser-qq: github.com/ustbhuangyi…

Holder.js – Image placeholder plug-in: github.com/imsky/holde…

Jqzoom.js: www.jq22.com/jquery-info…

Zooming — JavaScript image Zooming library: www.dowebok.com/223.html

Fastclick – Eliminate click mobile browser 300ms latency: github.com/ftlabs/fast…

Jsonp – a simple implementation of JSONP: github.com/webmodules/…

Js-base64-base64 encoding and decoding: github.com/dankogai/js…

Novice guide: github.com/easelinc/to…