Before, many people asked which js libraries need to be learned to learn the front-end, should the mainstream framework learn Vue or React? In response to these problems, I will talk about my own views and learning summary.
First of all, I think that before learning any knowledge, you must have a clear learning goal, know why you want to learn it, instead of looking at the Internet to instill all kinds of knowledge, let you learn all kinds of libraries, and continue to make The anxiety of everyone.
Due to the low entry barrier, the front-end is updated very quickly, a large number of new frameworks and libraries appear every year, and a large number of libraries are eliminated (for example JQuery, but it is necessary to learn its design ideas). So we don't have to worry about it and keep ourselves You can learn as needed. For example, if you are more interested in the mobile terminal, and your work also happens to involve some technical applications, then I can specialize in mobile-related technologies and frameworks, or you can learn about the background of the enterprise /Middle-Taiwan products are interested, and prefer to develop PC-side projects, then we can specialize in this type of js library or framework. Next, the author will also organize a list that can be quickly applied to work according to the needs of different front-end business js library to improve everyone's development efficiency.
js common tools
lodash is a consistent, modular, high-performance JavaScript utility library.
Ramda is a very important library that provides many useful methods. Every JavaScript programmer should master this tool
day.js is a lightweight JavaScript library that handles time and date, which is exactly the same as the API design of Moment.js, with a volume of only 2kb
big.js is a small, fast JavaScript library for arbitrary precision decimal arithmetic operations
qs a lightweight js library for url parameter conversion (parse and stringify)
dom library
JQuery encapsulates various dom/event operations, the design ideas are worth studying
A lightweight version of zepto jquery, suitable for mobile operation
fastclick is a simple and easy-to-use library that eliminates the 300ms delay between a physical click on the mobile browser and the triggering of a click event. The purpose is to make your application feel more responsive without interfering with your current logic.
File processing
file-saver is a solution for saving files on the client, very suitable for web applications that generate files on the client
js-xlsx a powerful library for parsing and writing excel files
Network request
Axios is a Promise-based HTTP library that can be used to initiate HTTP requests on Node.js and browsers. It supports all modern browsers, even IE8+
Superagent is optimized based on Ajax and can be used with Node.js HTTP client
fly.js is a promise-based http request library, which can be used in node.js, Weex, WeChat applet, browser, React Native
Animation library
Anime.js is a JavaScript animation library that can handle CSS attributes, single CSS transitions, SVG or any DOM attributes, and JavaScript objects
Velocity is an efficient Javascript animation engine with the same API as jQuery's $.animate(). It also supports color animation, conversion, looping, easel, SVG support and scrolling effects.
Vivus is a zero-dependency JavaScript animation library that allows us to make animations with SVG to make it look like being drawn
GreenSock JS is a JavaScript animation library used to create 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.
Scroll Reveal has zero dependencies, provides simple scrolling animations for web and mobile browsers, and displays scrolling content in an animated manner
Kute.js is a powerful, high-performance and extensible native JavaScript animation engine with the basic functions of cross-browser animation
Typed.js, a js plug-in for easy typing effect
fullPage.js is a js scrolling animation library that can easily create full-screen scrolling websites, and the compatibility is irreplaceable
A lightweight scrolling plugin for iscroll mobile
Mouse/keyboard related
KeyboardJS is a library used in the browser (compatible with node.js). It allows developers to easily set key bindings and use key combinations to set up complex bindings.
SortableJS powerful JavaScript drag and drop library
Graphics/image processing library
html2canvas is a powerful browser web screenshot tool developed using js
dom-to-image is a library that can convert any DOM node into a vector (SVG) or raster (PNG or JPEG) image written in JavaScript
pica is a picture processing library that adjusts the image size in the browser without pixel distortion and has a very fast processing speed
Lena.js is a lightweight js library that can add various filters to your images
Compressor.js is a js library that uses the local canvas.toBlob API for image lossy compression
Fabric.js an easy-to-use image editor based on HTML5 canvas elements
merge-images is a js plugin that merges multiple images into one image
cropperjs is a powerful image cropping library that supports flexible image cropping methods
Grade is a library that generates complementary gradient backgrounds based on the first 2 main colors in the image
You don’t need to understand and study each of the above js libraries. The technologies are for business services, so we can use and learn as needed. As for the relevant ecology of frameworks like react or vue, I will not introduce them here. Yes, there are very detailed ecological collections on the official website documents, and interested friends can learn them by themselves.