Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the javascript library and what libraries it has". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Javascript libraries include: jQuery, React, "D3.js", Underscore, Lodash, Algolia Places, "Anime.js", Animate On Scroll, "Bideo.js", "Chart.js" and so on.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

What is the JavaScript library?

The JavaScript library contains a variety of functions, methods, or objects to perform actual tasks on web pages or JS-based applications. You can even use them to build a WordPress site.

Think of them as a library in which you can reread your favorite books. You may be a writer and like the books of other writers, gain new ideas or innovations, and use them in your life.

Similarly, the JavaScript library has code or functionality that developers can reuse and modify slightly. Developers write JS library code, and other developers reuse the same code to perform certain tasks, such as preparing slides instead of writing from scratch. This saves them a lot of time and energy.

They are precisely the motivation for creating JavaScript libraries, which is why you can find dozens of them in multiple use cases. They not only save you time, but also simplify the entire development process.

How to use the JavaScript Library

To use the JavaScript library in your application, use the src reference library source path or the attribute of the URL to add it to the element.

Share some javascript libraries

1 、 jQuery

JQuery is a classic JavaScript library with fast, lightweight and feature-rich features. It was built by John Resig of BarCamp NYC in 2006. JQuery has free and open source software licensed by MIT.

It makes it easier to manipulate and traverse HTML documents, animate, handle events and Ajax.

Features and advantages:

It has a simple API that is easy to use.

It uses the CSS3 selector when dealing with style attributes and finding elements.

JQuery is lightweight, gzip and compression only require 30kb, and support for AMD modules.

Because its grammar is very similar to CSS, it is easy for beginners to learn.

Can be extended through plug-ins.

The versatility of API that supports multiple browsers, including Chrome and Firefox.

Use case:

Use the DOM operation of CSS selectors, which use certain conditions to select nodes in DOM. These conditions include the element name and its attributes (such as class and ID).

Use Sizzle (open source, multi-browser selector engine) to select elements in DOM.

Create effects, events and animations.

JSON parsing.

Ajax application development.

Feature detection.

Asynchronous processing is controlled with Promise and Deferred objects.

2 、 React.js

React.js (also known as ReactJS or React) is an open source front-end JavaScript library. It was founded in 2013 by Jordan Walke, a former software engineer at Facebook.

Today, it uses the MIT license, but was originally released under Apache License 2.0. React is designed to make the creation of interactive UI easy.

Just design a simple view of each state in your application. Next, it will effectively render and update the correct components based on the data changes.

Features and advantages:

The React code contains components or entities that need to be rendered to specific elements in DOM with the help of the React DOM library.

It uses virtual DOM by creating an in-memory cache in the data structure, calculating the differences, and effectively updating the display DOM in the browser.

As a result of this selective rendering, application performance is improved while saving developers the effort of recalculating page layouts, CSS styles, and full-page rendering.

It uses lifecycle methods such as render and componentDidMount to allow code execution at specific points in the entity lifecycle.

It supports JavaScript XML (JSX) that combines JS and HTML. It facilitates component rendering using nested elements, attributes, JS expressions, and conditional statements.

Use case:

Used as a foundation when developing mobile or single-page applications.

Present the status to the DOM and manage it.

Build an effective user interface when developing Web applications and interactive sites.

Debugging and testing are easier.

It is well known that both Facebook,Instagram and Whatsapp use React.

3 、 D3.js

Data-Driven Documents (D3 for short) or D3.js is another well-known JS library that developers can use to manipulate data-based documents. Released in 2011 under the BSD license.

Features and advantages:

It emphasizes the Web standard and provides you with modern browser capabilities, not just a framework.

D3.js supports powerful data visualization.

It supports HTML,CSS and SVG.

The data-driven method is adopted and applied to manipulate DOM.

D3.js is fast and supports a variety of dynamic behaviors and datasets for animation and interaction.

It reduces overhead, thus allowing greater graphics complexity at high frame rates.

Use case:

Generate interactive and dynamic data visualization.

Bind data to DOM and perform data-driven transformations on it. For example, you can generate an HTML table from an array of numbers, and then use D3.js to create a SVG bar chart or 3D surface chart.

Its functional code makes it reusable with a large number of modules.

D3 provides a variety of modes to change nodes, such as changing styles or attributes by declaratively adding, sorting, or deleting nodes, changing text or HTML content, and so on.

To create animated transitions, sort complex transitions through events, perform CSS3 transitions, and so on.

4 、 Underscore.js

Underscore is a JavaScript utility library that provides a variety of functions for typical programming tasks. It was created by Jeremy Askenas in 2009 and licensed by MIT. Now, Lodash has surpassed it.

Features and advantages:

Its function is similar to that of Prototype.js (another popular utility library), but Underscore has functional programming rather than object prototype extensions.

Depending on the type of data they operate on, it has more than 100 functions of four different types. These are the functions to be manipulated:

Object

Array

Objects and arrays

Other featur

Underscore is compatible with Chrome,Firefox,Edge, etc.

Use case:

It supports functional assistants such as filters, maps, as well as special features such as binding, quick indexing, JavaScript templates, quality testing, and so on.

5 、 Lodash

Lodash is also a library of JS utilities that makes it easier to use numbers, arrays, strings, objects, and so on. It was released in 2013 and uses functional programming, such as Underscore.js.

Features and advantages:

It can help you write maintainable and concise JavaScript code.

Simplifies common tasks, such as mathematical operations, binding events, function throttling, modifiers, constraints, de-jitter, etc.

String functions such as pruning, hump and uppercase become easier.

Create, modify, compress and sort arrays.

Other operations on collections, objects, and sequences.

Use case:

Its modular approach can help you:

Iterate over arrays, strings, and objects.

Make compound function.

Operation and test values.

6 、 Algolia Places

Algolia Places is a JavaScript library that provides an easy and distributed way to use address auto-filling on a site. This is a very fast and accurate tool that can help you improve the user experience of your site. Algolia Places uses OpenStreetMap's impressive open source database to cover all parts of the world.

For example, you can use it to improve the conversion rate of product pages.

Features and advantages:

It simplifies the closing process by filling in multiple inputs at the same time.

You can easily use the country or city selector.

You can quickly view the results by displaying link suggestions in real time on your map.

Algolia Places can handle typing errors and display the results accordingly.

It can provide results in milliseconds by automatically routing all queries to the nearest server.

Use case:

Allows you to merge maps to show specific locations that are very useful.

It allows you to use the form effectively.

7 、 Anime.js

If you want to add animation to a site or application, Anime.js is one of the best JavaScript libraries you can find. Released in 2019, it is lightweight and has a powerful and simple API.

Features and advantages:

Anime.js runs with the DOM property, the CSS property, the SVG,CSS transformation, and the JS object.

It can be used with various browsers, such as Chrome,Safari,Firefox,Opera, etc.

Its source code can be easily decrypted and used.

Complex animation methods, such as overlap and staggered follow, become easier.

Use case:

You can use Anime.js 's interlaced system in terms of attributes and time.

Create hierarchical CSS transformations with multiple timings on one HTML element at the same time.

Use Anime.js callback and control functions to play, pause, trigger, reverse, and control events synchronously.

8. Animate On Scroll (AOS)

Animate On Scroll is ideal for single-page parallax sites. This JS library is completely open source and can help you add good animations to your pages, and they look beautiful when you scroll up and down.

By helping you to add fade in and out effect, static anchor location, etc., to improve the sense of website design and enhance user satisfaction.

Features and advantages:

The library can detect the location of elements and add appropriate classes when they appear in viewports.

In addition to easily adding animation, it can also help you make changes in viewports.

It can run seamlessly on different devices, whether it's a mobile phone, tablet or computer.

Because it is written in pure JavaScript, there is no dependency.

Use case:

Animate the element according to the position of another element.

Animate the element according to its screen position.

Disable element animation on the phone.

Create different animations, such as fade in and out, flip, slide, zoom, anchor placement, etc.

9 、 Bideo.js

Do you want to include full-screen video in the background of the website? Try Bideo.js.

Features and advantages:

Using this JavaScript library, it is easy to add video backgrounds.

This feature looks cool and works well on screens of different proportions and sizes.

The added video can be resized according to the browser you are using.

Easy to use CSS / HTML implementation.

Use case:

Add a responsive full-screen background video to the site.

10 、 Chart.js

Is your website or project relevant to the field of data analysis?

Do you need to provide a lot of statistics?

Chart.js is an excellent JavaScript library.

Chart.js is a flexible, simple library for designers and developers who can immediately add beautiful diagrams to their projects. The JS library is open source and provides a MIT license.

Features and advantages:

Elegant, simple, you can add basic charts.

Generate responsive web pages.

Light weight, easy to learn and implement.

8 different types of charts.

Very suitable for beginners.

Animation makes the page more interactive.

Use case:

Provide a clear visual representation when using different datasets with the help of mixed chart types.

Draw sparse and complex data sets in logarithm, date, time, or custom scale.

11 、 Cleave.js

If you want to format text content, Cleave.js provides an interesting solution. It was created to provide an easier way to improve the readability of input fields by formatting typed data.

In this way, you no longer need to mask patterns or write regular expressions to format text.

Features and advantages:

Improve the user experience through consistent data submitted by the form.

You can perform different formatting types for credit card numbers, phone numbers, dates, times, and numbers.

Format custom blocks, prefixes, and delimiters.

Support for ReactJS components and more.

Use case:

Use the CSS selector to implement cleave.js as multiple DOM elements.

Update a specific original value.

Gets a reference to the text field.

In Vue.js,jQuery and Playground, it is used with Redux forms.

12 、 Choreographer.js

Use Chreographer.js to animate complex CSS effectively. It can even add more custom features that can be used for non-CSS animation.

To use this JavaScript library, install its software package or add its script file through npm.

Features and advantages:

Its Animation class manages individual animation data.

The animationConfig object configures each animation instance.

Includes 2 built-in animation functions "change" and "Zoom".

Scale is used to map step-by-step values to the style attributes of a node.

Change removes or adds style attributes.

Use case:

Perform an instant scrolling animation.

Create an animation based on mouse movement.

13 、 Glimmer

Glimmer was released in 2017 with lightweight and fast UI components. It uses the powerful Ember CLI and can use EmberJS as a component.

Features and advantages:

Glimmer is a fast DOM rendering engine that provides incredible performance for rendering and updating.

It is versatile and can be used with your current technology stack without requiring you to rewrite code.

Use case:

You can use it as a stand-alone component or you can add it as a Web component in an existing application.

DOM rendering.

It can help you distinguish between static and dynamic content.

Use Glimmer when you need the functionality of Ember but the packaging is lighter.

14 、 Granim.js

Granim.js is a JS library that helps you create smooth, interactive gradient animation. In this way, you can make your site stand out in a colored background.

Features and advantages:

Gradients can cover the image, work independently, slide under the image mask, and so on.

You can use percentages or pixel values to customize the gradient direction.

Set the gradient direction to diagonal, up and down, left and right, radial, or custom.

Sets the duration of the state change in milliseconds (ms).

Customize the gradient color and position.

Customize the image according to the position, source, zoom ratio of the canvas, etc.

Other options include setting callbacks, emitting events, gradient control methods, and so on.

Use case:

Use 3 2-color gradients to create a basic gradient animation.

Use 2 complex gradient animations with gradients of 3 colors.

Use a background image, two colors, and a blend mode to animate the gradient.

Use an image mask to create a gradient animation under a specific shape.

Create a gradient animation that responds to events.

15 、 fullPage.js

The open source JS library fullPage.js can help you easily create full-screen scrolling websites or one-page websites. It is easy to use, and you can also add horizontal sliders within the site section.

Features and advantages:

Provides a variety of customization and configuration options.

JavaScript frameworks such as react-fullpage,angular-fullpage and vue-fullpage are supported.

Enables vertical and horizontal scrolling.

Adaptive design, suitable for different screen sizes and a variety of browsers.

Automatically scrolls when the page is loaded.

Video / image delayed loading.

Use case:

Use many extensions to improve the default functionality.

Create a full screen scrolling site.

Set up a single-page website.

16 、 Leaflet

Leaflet is one of the best JavaScript libraries that can be used to include interactive maps in your site. It is open source and suitable for mobile devices, re-39kb. WordPress's MapPress Maps plug-in uses Leaflet to power its interactive maps.

Features and advantages:

Provides performance features, such as mobile hardware acceleration and CSS capabilities.

Unique layers, including tiled layers, pop-up windows, tags, vector layers, GeoJSON and image overlay layers.

Interactive functions, including drag panning, zooming, keyboard navigation, events, etc.

Map controls, such as layer switcher, properties, scale and zoom buttons.

Support browsers, such as Chrome,Safari,Firefox,Edge, etc.

Customization, including OOP facilities, HTML and image-based markup, CSS3 controls and pop-ups.

Use case:

Add maps to your site with better zooming and panning, smart polygon / broken line rendering, modular construction, and click delay movement animation.

17 、 Multiple.js

Multiple.js uses CSS or HTML to share background images among various elements without JavaScript coordinate processing.

As a result, it produces amazing visual effects to increase more user interaction.

18 、 Moment.js

Moment.js helps you manage time and dates effectively when using different time zones, API calls the local language, and so on.

You can simplify them by validating, parsing, formatting, or manipulating dates and times.

19 、 Masonry

Masonry is a great JS grid layout library. This library helps you place grid elements in the right place based on the available vertical space. Some popular gallery WordPress plug-ins even use it.

20 、 Omniscient

Omniscient.js is a JS library that provides React component abstraction for fast top-down rendering that contains immutable data.

This library optimizes your project and provides interesting features to help you build your project seamlessly.

21 、 Parsley

Do you want to add a form to the project?

If so, Parsley may be useful to you. It is a simple but powerful JS library that can be used to validate forms.

22 、 Popper.js

Popper.js was created to make it easier to place pop-up menus, drop-down menus, tooltips, and other contextual elements (closer to buttons or similar elements).

Popper provides a good way to arrange them, paste them on other site elements, and make them play seamlessly on any screen size.

23 、 Three.js

Three.js makes your 3D design enjoyable. It uses WebGL to render the scene in a modern browser. If you are using IE 10 and earlier, use other CSS3,CSS2 and SVH renderers.

24 、 Screenfull.js

Use Screenfull.js to add full-screen elements to your project. Because of its impressive cross-browser efficiency, you won't have trouble using this JavaScript library.

25 、 Polymer

The Google open source JavaScript library, Polymer, is used to build Web applications using components.

26 、 VOCA

The idea behind creating Voca is to ease the pain of using JavaScript strings. It has useful features to easily manipulate strings, such as changing case, filling, trimming, truncation, and so on.

This is the end of the content of "what is the javascript library and what libraries are there". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.