These three smart and great JS libraries are worth trying

Time:2021-6-13

By Louis petrik
Translator: Xiaozhi
Source: devglan

Like again, form a habit

this paperGitHubhttps://github.com/qq44924588… I’ve collected more categories of previous highly praised articles and sorted out a lot of my documents and tutorial materials. Welcome star and perfect, you can refer to the interview site review, I hope we have something together.

In this article, we introduce three little-known JavaScript libraries, which are very powerful and small in size. These libraries can help improve the efficiency of development, reduce the difficulty of development, and let you work less overtime. Please store them.

Basket.js

website: https://addyosmani.com/basket…

Basket.jsIs a very small JS library, the compressed size is only0.7 kB

Basket.jsIt is not only used to load external JavaScript, but also caches them in the browser’s local storage, so that the next time the page is requested, the external JavaScript does not have to be requested through the network, it only needs to be loaded from the local storage.

But why local storage instead of browser caching?

First of all, I personally find it much easier to cache JavaScript files through the JS Library in web code, which is usually cached from the server side. useBasket.jsNow it’s easy to use JavaScript in your code to dynamically control the script cache.

have a try

Basket.jsThe API for is not that complicated. You can browse the documents by yourself and try it yourself. In our small example, onlybasket.requireBecause it’s the core of the whole library.

  • basket.require()
  • basket.get()
  • basket.remove()
  • basket.clear()

usebasket.requireWe can go throughbasketLoad JS file. The file is then cached in local storage (as described earlier) and will be stored in the nextbasket.requireCache. For example, when you reload a page,BasketIt will first look in the cache. If the file is already cached in it, it will load the file through local storage instead of requesting the file again through the network.

index.html:

https://addyosmani.com/basket…
https://cdn.jsdelivr.net/npm/…
https://cdnjs.cloudflare.com/…

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8" />
    <script src=”rsvp.min.js”></script>
    <script src=”basket.min.js”></script>
    <title>Document</title>
</head>
<body>
  <script>
    basket.require({ url: '/scripts/jquery.js' })
  </script>
</body>
</html>

As you can see, we first importedrsvpLibrary, thenBasketItself, and then in the text we can perform our tasksrequireFunction to load jQuery from somewhere.

When you first open a page, you should see the following:

These three smart and great JS libraries are worth trying

But as the page reloads,jqueryThere will be no new requests:

These three smart and great JS libraries are worth trying

Everyone said that there was no project in the resume, so I found a project for you, with a [building tutorial].

Pill

github: https://github.com/rumkin/pill

PillDynamic content loading is added to the static site to make the user’s content loading more smooth. The compressed library is about1kb

Essence:Most of us use single page applications to have web applications that don’t load the entire new page when we navigate. In most spa frameworks, this is done because all content is based on oneindex.html

But what if we have multiple static pages?PillIt’s a solution.

As needed, it can retrieve the content of other HTML files on the server and replace the current content with a new retrieved file. Because our application doesn’t need new pages, it can greatly improve performance.

usePill, which is done automatically because it intercepts navigation attempts.

PillAnother good point is that its documentation is very good. More usage can be found in the documentation.

JS-cookie

github:https://github.com/js-cookie/…

Use in browserCookieIt can be very laborious.JS-cookiesTo make this much easier, now we’re going to cover the basics.

Introduction through CDN:

<script></script>

Set a'name', whose value is'Xiaozhi'

Cookies. Set ('name ','front end smart')

use'name'Key to get the value of the cookie

Cookies. Get ('name ') /' front end tips'

Create a cookie to expire in 7 days:

Cookies.remove('name')

Get all cookies

Cookies. Get() // {Name: 'front end smart'}

That’s all for today. I hope these three libraries can help you. If you have a better library, please leave a message.


It’s impossible to know the bugs that may exist after the code is deployed in real time. Afterwards, in order to solve these bugs, we spent a lot of time debugging logs. By the way, we recommend fundebug, an easy-to-use bug monitoring tool.

Original text: https://www.devglan.com/local…


communication

The article is updated continuously every week. You can search “big change world” on wechat to read and urge for the first time (one or two articles earlier than the blog). This article is GitHub https://github.com/qq449245884/xiaozhi I have collected many documents and I have welcomed Star and perfect. You can review the test points and pay attention to the official account.welfareYou can see welfare, you know.

These three smart and great JS libraries are worth trying

Recommended Today

Hot! Front and rear learning routes of GitHub target 144K

Hello, Sifu’s little friend. I’m silent Wang Er. Last week, while appreciating teacher Ruan Yifeng’s science and technology weekly, I found a powerful learning route, which has been marked with 144K on GitHub. It’s very popular. It covers not only the front-end and back-end learning routes, but also the operation and maintenance learning routes. As […]