preface

In development, we often encapsulate some commonly used code blocks and function blocks for better reuse. A plug-in, then, is a function that is isolated and interacts with other parts through an API or configuration item.

The following are some common front-end open source plug-ins that I have accumulated in my work. Here they are just listed, and the detailed usage of each plug-in is introduced on the official website or Github.

Function library

Lodash (recommended)

  • Lodash is a consistent, modular, high-performance JavaScript utility library.
  • www.lodashjs.com/

Math.js

  • Math.js is a mathematical formula library widely used in JavaScript and Node.js. It has a flexible expression parser, supports symbolic computation, comes with a large number of built-in functions and constants, and provides an integrated solution that can handle different data types.
  • mathjs.org/

Data visualization

  • ECharts: An open source visual chart library based on JavaScript

  • Ali AntV: Ant Group’s new generation of data visualization solutions

The CSS class library

Tailwind CSS

  • Tailwind CSS is a feature-first CSS framework that integrates classes such as Flex, PT-4, Text-center and rotate-90, which can be combined directly in scripting markup language to build any design.

  • www.tailwindcss.cn/

Normalize.css

  • Normalize.css makes browser rendering of all HTML elements more consistent and compliant with modern Web standards. Normalize.css only works with styles that need to be normalized.

  • Necolas. Making. IO/normalize. C…

Animate.css

  • Animate. CSS is a ready-to-use cross-browser animation library for your Web projects. Great for emphasis, home pages, sliders, and attention-leading prompts.
  • animate.style/

Hover.css

  • CSS Hover effects can be applied to links, buttons, images, and more.
  • ianlunn.github.io/Hover/

Icon font

  • Iconfont – Alibaba Vector Icon library www.iconfont.cn/
  • Open source icon library iconpark.oceanengine.com/home IconPark – headlines

The animation library

Anime.js

  • A JavaScript animation library that can handle CSS properties, single CSS transformations, SVG or any DOM properties and JavaScript objects
  • www.animejs.cn/

Video and audio

  • Watermelon (HTML 5) v2.h5player.bytedance.com/ video player
  • video.js videojs.com/

Shuffling figure

Swiper

  • Often used to touch and swipe content on mobile sites
  • www.swiper.com.cn/

Scroll event

Waypoints

  • Waypoints is a tool for capturing various scrolling events.
  • imakewebthings.com/waypoints/

Time and date processing

Moment.js

  • Moment.js is a JavaScript library that parses, validates, manipulates, and displays dates and times.
  • momentjs.com

Day.js

  • Moment.js’s 2kB lightweight solution has an equally powerful API
  • dayjs.gitee.io/zh-CN/

Currency formatting

currency.js

  • Currency.js is an open source, free library that deals with Currency values. It is very similar to Numeral. Js, but seems more specialized in handling monetary values. The flexible API is used to solve common floating point problems in JavaScript. The calculation of addition, subtraction, multiplication and division can be done. When dealing with currency, the score value can also be extracted separately, and the format conversion method is relatively neat.
  • currency.js.org/

The front store

localForage

  • LocalForage is a JavaScript library that is similar through simplicitylocalStorageAPI asynchronous storage to improve the offline experience of your Web applications. It can store many types of data, not just strings.
  • localforage.docschina.org/

Rich text editor

  • wangEditor：www.wangeditor.com/