The necessary JS library for efficient front end development

Time:2021-3-14

The necessary JS library for efficient front end development

Before, many people asked which JS libraries to learn well in front-end, and which mainstream framework should learn Vue or react? In view of these problems, the author will talk about his own views and learning summary

First of all, I think that before learning any knowledge, we must have a clear learning goal and know why we want to learn it. Instead of reading what is said on the Internet, we should instill all kinds of knowledge into you and let you learn all kinds of databases, so as to constantly create everyone’s anxiety

front endDue to the low entry threshold and rapid upgrading, a large number of new frameworks and libraries appear every year, and a large number of libraries are eliminated (such asJQueryFor example, if you are interested in the mobile terminal, and some technology applications are involved in your work, then I can specialize in the technology and framework related to the mobile terminal, or you are interested in the enterprise background / middle stage products, I prefer to develop PC end projects, so we can focus on this type of JS library or framework. Next, according to the needs of different front-end business, I will sort out a JS library that can be quickly applied to work, so as to improve the development efficiency of everyone

JS common tool class

The necessary JS library for efficient front end development

  1. lodashA consistent, modular, high-performance JavaScript utility library.
  2. ramdaIt is a very important library and provides many useful methods. Every JavaScript programmer should master this tool
  3. day.jsA lightweight JavaScript library for processing time and date, and Moment.js The API design of is exactly the same, only 2KB in size
  4. big.jsA small, fast JavaScript library for arbitrary precision decimal arithmetic
  5. qsA lightweight JS library for URL parameter transformation (parse and stringify)

DOM Library

The necessary JS library for efficient front end development

  1. JQueryIt encapsulates all kinds of DOM / event operations, and the design idea is worth studying
  2. zeptoThe lightweight version of jQuery is suitable for mobile operation
  3. fastclickA simple and easy-to-use library, which eliminates the 300 ms delay between the physical click on the mobile browser and triggering a click event. The purpose is not to interfere with your current logic at the same time, so that your application does not feel delayed, more responsive.

Document processing

The necessary JS library for efficient front end development

  1. file-saverA solution to save files on the client is very suitable for web applications that generate files on the client
  2. js-xlsxA powerful library for parsing and writing Excel files

Network request

The necessary JS library for efficient front end development

  1. AxiosA promise based HTTP library, which can be used in Node.js It supports all modern browsers, even IE8+
  2. SuperagentAjax based optimization can be compared with Node.js Use with HTTP client
  3. fly.jsA promise based HTTP request library, which can be used in node.js , weex, wechat applet, browser, react native

Animation library

The necessary JS library for efficient front end development

  1. Anime.jsA JavaScript animation library that can handle CSS properties, single CSS transformations, SVG or any DOM properties, and JavaScript objects
  2. VelocityAn efficient JavaScript animation engine, with the same API as jQuery’s $. Animation(), also supports color animation, conversion, loop, easel, SVG support and scrolling effects
  3. VivusA zero dependency JavaScript animation library, we can use SVG to make animation, so that it has the appearance of being drawn
  4. GreenSock JSA JavaScript animation library, used to create high-performance, zero dependence, cross browser animation, has been used on more than 4 million websites, and can be used in react, Vue, angular projects
  5. Scroll RevealZero dependence provides a simple scrolling animation for web and mobile browsers to display the scrolling content in the form of animation
  6. Kute.jsA powerful, high-performance and extensible native JavaScript animation engine, with the basic function of cross browser animation
  7. Typed.jsA JS plug-in for easy typewriting
  8. fullPage.jsA JS scrolling animation library that can easily create a full screen scrolling website has irreplaceable compatibility
  9. iscrollA lightweight scrolling plug-in for mobile terminal

Mouse / keyboard related

The necessary JS library for efficient front end development

  1. KeyboardJSA library used in browser node.js It makes it easy for developers to set key binding and use key combination to set complex binding
  2. SortableJSPowerful JavaScript drag and drop Library

Graphics / image processing library

The necessary JS library for efficient front end development

  1. html2canvasA powerful browser page capture tool developed by JS
  2. dom-to-imageA library that can convert any DOM node into vector (SVG) or raster (PNG or JPEG) images written in JavaScript
  3. picaA picture processing library that adjusts image size in the browser without pixel distortion and processing speed very fast.
  4. Lena.jsA lightweight JS library that can add various filters to your images
  5. Compressor.jsOne uses local canvas.toBlob JS library for image lossy compression based on API
  6. Fabric.jsAn easy to use image editor based on HTML 5 canvas elements
  7. merge-imagesA JS plug-in that merges multiple pictures into one picture
  8. cropperjsA powerful image cutting library, support flexible image cutting way
  9. GradeA library for generating complementary gradient backgrounds based on the first two main colors in an image