Front-end efficient development of essential JS library comb

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

First of all, I think it is necessary to have a clear learning goal before learning any knowledge, to know why you want to learn it, rather than reading the Internet to instill all kinds of knowledge and let you learn various libraries, so as to constantly create people’s anxiety.

Due to the low threshold of entry and rapid updating of front end, a large number of new frameworks and libraries will appear every year, while a large number of libraries will be eliminated (such as JQuery, but it is necessary to learn its design ideas). So we don’t have to worry about it, just keep up the pace 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 is also in accordance with the needs of different front-end business, to sort out a CAN be quickly applied to the work of JS library, in order to improve everyone’s development efficiency.

Js common utility class

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

The dom library

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

File processing

  1. File-saver a solution that saves files on the client side and is ideal for Web applications that generate files on the client side
  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. It supports all modern browsers, even IE8+
  2. Superagent is ajax-based optimization and can be used in conjunction 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 applet, browser, React Native

The animation library

  1. Anime. Js is a JavaScript animation library that can handle CSS properties, individual CSS transforms, SVG or any DOM properties as well as JavaScript objects
  2. Velocity is an efficient Javascript animation engine that uses the same API as jQuery’s $.Animate () and also supports color animation, transformations, loops, easels, SVG support, and scrolling effects
  3. Vivus is a zero-dependency JavaScript animation library that allows us to animate in SVG and give it the appearance of being drawn
  4. GreenSock JS is a JavaScript animation library for creating high-performance, zero-dependency, cross-browser animations. It has been used on more than 4 million websites and can be used in React, Vue, and Angular projects
  5. Scroll Reveal is zero-dependent and provides simple Scroll animation for web and mobile browsers to animate the scrolling content
  6. Kute. Js is a powerful, high-performance and extensible native JavaScript animation engine with basic cross-browser animation functions
  7. Typed. Js is a js plug-in for easy typing
  8. A js scroll animation library that makes it easy to create full screen scrolling websites. There is no substitute for compatibility
  9. Iscroll is a lightweight rolling plugin for mobile

Mouse/keyboard related

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

Graphics/image processing library

  1. Html2canvas is a powerful javascript browser screenshot tool
  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 allows you to resize images in your browser without pixel distortion
  4. Lena. Js is a lightweight JS library that can add various filters to your images
  5. Compressor. Js A JS 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 plugin for merging multiple images into a single image
  8. Cropperjs is a powerful image cutting library, support flexible image cutting way
  9. Grade a library that generates complementary gradient backgrounds based on the first two major colors in an image

The author will continue to iterate the document according to business or project requirements in the future. If you feel that you need to add additional documents, you can submit additional documents on Github: github.com/MrXujiang/f…