Preface

In development, we often encapsulate some commonly used code blocks and function blocks to make better reuse. Then, the plug-in is formed by pulling out the plug-in to complete the function independently and interacting with other parts through API or configuration items.

Here are some common front-end open-source plug-ins that I have accumulated in my work. They are just listed here. The detailed usage of each plug-in is introduced on the official website or Gayhub. Note: a solution often has multiple plug-ins, which need readers to select according to their actual business needs. Please leave a message for communication and supplement.

function library

Lodash https://github.com/lodash/lodash Underscore https://underscorejs.org/ Ramda https://github.com/ramda/ramda outils https://github.com/proYang/outils

Animation library

Animate.css: CSS3 Animation library is also the most general animation library at present. https://daneden.github.io/animate.css/ Anime.js: A powerful, lightweight animator javascript library http://animejs.com/ Hover.css: CSS hover Hover effect can be applied to links, buttons, pictures, etc. https://github.com/IanLunn/Hover wow.js: Scroll through the animation, WOW.js rely on animate.css，So it supports animate.css Up to 60 kinds of animation effects. https://github.com/matthieua/WOW Magic.css: css3 animation Animation library https://github.com/miniMAC/magic Waves: Click ripple effect https://github.com/fians/Waves move.js: A small JavaScript Library, through JS To control a series of CSS Animation sequence execution, so that CSS3 Animation becomes very simple and elegant. https://github.com/visionmedia/move.js

Rolling Library

iscroll - Smooth scrolling plug-in https://github.com/cubiq/iscroll BetterScroll: iscroll Optimized version of, making the mobile sliding experience more smooth https://github.com/ustbhuangyi/better-scroll mescroll: Pull up and refresh pull-down loading on mobile terminal http://www.mescroll.com/api.html jQuery Scrollbox: Picture and text scrolling plug-in http://www.jq22.com/jquery-info1890 liMarquee: jQuery Seamless scrolling plug-in http://www.dowebok.com/188.html

Rotation chart

Swiper: Content touch sliding commonly used in mobile websites https://www.swiper.com.cn/ iSlider: Moving end slide assembly http://eux.baidu.com/iSlider/demo/index_chinese.html slip.js: The moving end follows the finger sliding component, with zero dependency. https://github.com/binnng/slip.js OwlCarousel2: http://owlcarousel2.github.io/OwlCarousel2/ slick: http://www.jq22.com/jquery-info406 WebSlides: https://github.com/webslides/webslides/ jQuery Rotary plug in slider: http://www.jq22.com/jquery-info889

Rolling screen

fullpage: http://www.jq22.com/jquery-info1124

Popup

layer: One of the three major components of independent maintenance( layDate,layer,layim) http://layer.layui.com/ Bootbox.js: http://bootboxjs.com/ dialogBox: Be based on jQuery http://www.jq22.com/jquery-info4822 easyDialog: http://www.h-ui.net/easydialog-v2.0/index.html

Message notification

Notyf: Simple response pure js Message notification plug-in http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html PNotify: Prompt information in the upper right corner of the page (not pop-up prompt) https://github.com/sciactive/pnotify https://sciactive.com/pnotify/ overhang.js: It is a JQuery The plug-in displays instant notifications, acknowledgments, or prompts in a given element. http://www.jq22.com/jquery-info9193

Drop-down box

select2 https://select2.org/

Cascade selector

ustbhuangyi/picker: The best filter component and linkage filter for mobile terminal https://github.com/ustbhuangyi/picker jQueryDistpicker: The best filter component and linkage filter for mobile terminal http://fengyuanchen.github.io/distpicker/ http://www.jq22.com/demo/jQueryDistpicker20160621/

Color selector

Bootstrap Colorpicker 2 https://github.com/farbelous/bootstrap-colorpicker

Time selector

layDate: https://www.layui.com/laydate/

Time date processing

Moment.js: It is used to parse, verify, operate and display date and time JavaScript Class library. http://momentjs.com/ https://github.com/moment/moment timeago.js: Lightweight time conversion Javascript library https://github.com/hustcc/timeago.js

Form Validation

validator.js: https://github.com/chriso/validator.js jQuery Validation: jQuery Form validation https://github.com/jquery-validation/jquery-validation Validform: One line of code completes the form verification of the whole station!- Jquery Form validation plug-in http://validform.rjboy.cn/

Paging plugins

pagination: https://github.com/superRaytin/paginationjs

Is there anything you need above? If so, don't miss the next issue~~

The content of this article is not finished

Author: Bai Xiaoming

Source:

https://juejin.im/post/5ba7d5dd5188255c6140cc9d

Subscription ID: Miaovclass

Pay attention to Miaowei subscription number: "Miaowei front end", to bring you high-quality front-end technology dry goods;