By Louis Petrik (Translator: Devglan

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

In this article, I introduce three little-known but very powerful and small JavaScript libraries that can help make development more efficient, easier, and less stressful.

Basket.js

Address: addyosmani.com/basket.js/

Basketball.js is a tiny JS library, compressed to just 0.7 kB in size.

Basket.js is not only used to load external JavaScript, it also caches them in the browser’s local storage so that the next time a page is requested, the external JavaScript doesn’t have to be requested over the network and can be loaded from local storage.

But why local storage and not browser caching?

First, I personally find it much easier to cache JavaScript files through a JS library in web code, which is usually cached from the server side. With basketball.js, it is now easy to dynamically control script caching using JavaScript in your code.

Give it a try

The API of Basketball.js is not that complicated. You can browse the documentation and try it out for yourself. In our small example, just use basketball.require because it is the core of the entire library.

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

With basket. Require, we can load JS files through basket. This file is then cached in local storage (as described earlier) and cached in the next basket.require. When reloading a page, for example, Basket looks in the cache first, and if the file is already cached there, it loads it from local storage rather than requesting it again over the network.

index.html:

Addyosmani.com/basket.js/d… cdn.jsdelivr.net/npm/rsvp@4/… Cdnjs.cloudflare.com/ajax/libs/j…

<! DOCTYPE HTML > < HTML lang= "en" > <head> <meta charset= "UTF-8""/>   Document     Copy the code

As you can see above, we import the RSVP library first, then Basket itself, and then in the body we can execute our require function to load jQuery from somewhere.

The first time you open the page, you should see the following:

But as the page reloads, jquery does not request again:

Everyone said there was no project on your resume, so I helped you find a project and gave you a “build tutorial”.

Pill

github: github.com/rumkin/pill

Pill adds dynamic content loading to static sites, making content loading smoother for users. The library is about 1KB compressed.

** Most of us use single-page applications to have web applications that don’t load the entire new page as we navigate. In most SPA frameworks, this is done because everything is based on an index.html.

But what if we have multiple static pages? Pill is a solution.

As needed, it can retrieve the contents of other HTML files on the server and replace the current contents with a new retrieved file. Because our application does not require new pages, we can greatly improve performance.

With Pill, this is done automatically because it intercepts navigation attempts.

Another nice thing about Pill is that it’s well documented, and more uses can be found in the documentation.

JS-cookie

Github:github.com/js-cookie/j…

Using cookies in a browser can be taxing. Js-cookies make this much easier, and now we’ll cover the basics.

Through CDN:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
Copy the code

Set a cookie key named ‘name’ with a value of ‘front-end smarts’

Cookie.set ('name', 'front-end intelligence ')Copy the code

Use the ‘name’ key to get the value of the Cookie

Cookies. Get ('name') //Copy the code

Create a cookie that expires after 7 days:

Cookies.remove('name')
Copy the code

Get all Cookies

Cookies.get() // { name: 'Little Head' }
Copy the code

That’s all for today, I hope these three libraries are helpful to you, if you have a better library, welcome to leave a message.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, HERE I recommend a good BUG monitoring tool Fundebug.

Original: www.devglan.com/local/p/QnJ…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.