Front-end efficient development of the necessary JS library comb

Before, many people asked which JS library to learn to learn the front-end, and the mainstream framework should learn Vue or React? In view of these problems, the author said his views and learning summary.

First of all, I think before learning any knowledge, we must have a clear learning goal and know why we want to learn it, rather than looking at the Internet to give you all kinds of knowledge, let you learn all kinds of libraries, so as to constantly create a sense of anxiety.

Because of the low threshold of entry, the front-end is updated very quickly. Every year, there are a lot of new frameworks and libraries, and a lot of libraries are eliminated (such as JQuery, but it is necessary to learn its design ideas). So we don’t have to worry, just keep learning and learn as needed. , for example: are you interested in mobile terminal is also happened in work which involves a number of technical application, so I can specializes in mobile technology and framework, or are you interested in enterprise background/middle products, prefer to develop PC projects, then we can specializes in this type of js library or framework, Next, the author also according to the needs of different front-end business, to sort out a JS library that can be quickly applied to work, in order to improve the development efficiency of everyone.

Js Common tool classes

  1. Lodash is a consistent, modular, high-performance JavaScript utility library.
  2. Ramda is an important library that provides many useful methods that every JavaScript programmer should master
  3. Day. js is a lightweight JavaScript library that handles times and dates, keeping exactly the same API design as moment. js, and is only 2KB in size
  4. Big.js is a small, fast JavaScript library for arbitrary precision decimal arithmetic operations
  5. Qs is a lightweight JS library for URL parameter conversion (parse and Stringify)

The dom library

  1. JQuery encapsulates various DOM/event operations, and the design idea is worth studying
  2. Zepto is a lightweight version of jquery for mobile applications
  3. Fastclick is an easy-to-use library that eliminates the 300ms delay between a physical click on a mobile browser and the trigger of a click event. The goal is to make your application feel less lag and more responsive without interfering with your current logic.

File processing

  1. File-saver, a solution that saves files on the client, is perfect for Web applications that generate files on the client
  2. Js-xlsx is a powerful library for parsing and writing Excel files

Network request

  1. Axios is a Promise based HTTP library that can be used to make HTTP requests on Node.js and browsers, supporting all modern browsers, even IE8+
  2. Superagent is an Ajax-based optimization that can be used with the Node.js HTTP client
  3. Fly.js is a promise-based HTTP request library that can be used in Node. js, Weex, wechat applets, browsers, React Native, etc

The animation library

  1. Animo.js is a JavaScript animation library that can handle CSS properties, single CSS transformations, SVG or any DOM properties as well as JavaScript objects
  2. Velocity is an efficient Javascript animation engine that has the same API as jQuery’s $.animate(), while also supporting color animations, transformations, loops, easels, SVG support, and scrolling effects
  3. Vivus is a zero-dependent JavaScript animation library that allows you to animate in SVG and make it look like it’s being drawn
  4. GreenSock JS is a JavaScript animation library for creating high performance, zero-dependency, cross-browser animations. It is used on over 4 million websites and can be used in React, Vue, Angular projects
  5. Scroll Reveal zero-dependency provides simple scrolling animations for Web and mobile browsers to animate scrolling content
  6. Kute.js is a powerful, high-performance and extensible native JavaScript animation engine with basic capabilities for cross-browser animation
  7. Typed. Js is an easy js plug-in to achieve typing effects
  8. Fullpage.js is a javascript scrolling animation library that can easily create a full screen scrolling website
  9. Iscroll mobile terminal use a lightweight scrolling plug-in

Mouse/keyboard related

  1. KeyboardJS a library used in browsers (compatible with Node.js). It makes it easy for developers to set up key bindings and use key combinations to set up complex bindings.
  2. SortableJS is a powerful JavaScript drag library

Graphics/image processing library

  1. Html2canvas is a powerful browser web screenshot tool using JS development
  2. Dom-to-image A library that converts any DOM node into a vector (SVG) or raster (PNG or JPEG) image written in JavaScript
  3. Pica is a very fast image processing library that resizes images in the browser without pixel distortion
  4. Lena.js is a lightweight JS library that can add various filters to your images
  5. Compresse.js A JAVASCRIPT library that uses the native Canvas. toBlob API for lossy image compression
  6. Fabric.js is an easy-to-use image editor based on the HTML5 Canvas element
  7. Merge-images is a JS plug-in that combines multiple images into one image
  8. Cropperjs is a powerful image cutting library that supports flexible image cutting methods
  9. Grade A library that generates complementary gradient backgrounds based on the first 2 main colors in an image