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

What are the three great niche JavaScript libraries? I believe many inexperienced people are at a loss about this. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

JavaScript has many libraries, and everyone has summarized the most important and popular libraries, but is soon lost again.

Here you will share three little-known but very powerful JavaScript libraries that will make your life easier and will not add unnecessary burden to your web applications.

1. JS-cookie

OfficialGitHub

Using cookies in a browser can be very laborious. JS cookies makes this much easier, and now we will learn the basics.

Implement through CDN:

Set a cookie key named "name" with a value of "Max"

Cookies.set ('name',' Max')

Get the cookie value with the key "name"

Cookies.get ('name') / /' Max'

Create a cookie to expire in 7 days

Cookies.set ('name',' Max', {expires:7})

Delete cookie

Cookies.remove ('name')

Get all the cookie

Cookies.get () / / {name: 'Max'}

Source: Pexels

2. Basket.js

OfficialDocumentation

Basket.js is a minimalist script loader library with only 0.7kB after compression.

(the other library it uses is compressed to about 5kB, as described in https://github.com/addyosmani/basket.js/issues/61, but still small.)

But basket.js can not only load the external JavaScript, but also cache it in the browser's local storage, so that on the next page request, you don't have to request the external JavaScript over the network again, just load it from the local storage.

But why local storage instead of browser caching?

First of all, I personally think it's much easier to cache JavaScript files in web page code through the JS library, usually from the server side. With Basket.js, it is easy to use JavaScript to dynamically control script caching in your code.

Let's try it:

The actual API is not that complicated. I think you can explore the documentation for yourself. In the simple example below, we only use basket.require because it is the core of the entire library.

Basket.require ()

Basket.get ()

Basket.remove ()

Basket.clear ()

Using basket.require, we can load the JS file through basket. The file is then cached in the local store, and as mentioned earlier, the next time basket.require requests the file, for example, when the page is reloaded, basket will first look in the cache. Or if the file is already cached there, it will load the file through local storage instead of making a request again over the network.

Index.html:

You can find the library here:

Https://addyosmani.com/basket.js/dist/basket.min.js

Https://cdn.jsdelivr.net/npm/rsvp@4/dist/rsvp.min.js

Https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

Document basket.require ({url:'/scripts/jquery.js'})

As you can see, first import the RSVP library needed by Basket.js. Then back to the Basket itself, you can execute the require function in body to load the jQuery from somewhere.

When you open the page for the first time, you should see:

The jQuery is normally requested over the network.

But as the page reloads:

JQuery is no longer listed in the Network tab, it is loaded from the local store.

This is the whole "magic" process.

3. Pill

Official Github

"Pill adds dynamic content loading to static sites and makes content loading more smoothly." After compression, it is about 1KB.

The development of Pill began with this tweet: https://twitter.com/sitnikcode/status/1109626507331338240

Essence: most people use a single-page application to run web applications, and when clicked, the entire new page is not loaded. In most SPA frameworks, this is because everything is based on an index.html.

But what if there are multiple static pages? Pill can help you solve it.

As needed, it takes the contents of other HTML files on the server and replaces the current content with the new acquired content.

This is a huge performance improvement because our application no longer requires a complete new page.

The important content has just been replaced.

Using Pill, you can intercept navigation attempts and complete the above steps automatically.

The best thing about Pill is that it is documented one by one, making sure to check everything: you can find the code on GitHub

(https://GitHub.com/rumkin/pill/tree/master/example)

After reading the above, have you mastered which of the three great niche JavaScript libraries are? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.