3 небольших, но интересных библиотеки JavaScript

  • 25 марта, 14:43
  • 616
  • 0

Каждую секунду появляется новая библиотека JS :)

В этой статье рассмотри 3 довольно неизвестных и небольших библиотеки JavaScript, которые сделают вашу жизнь проще, не делая ваше веб-приложение излишне тяжелым.

3 небольших, но интересных библиотеки JavaScript

Basket.js

Официальная документация

Basket.js - это минималистичная библиотека загрузчиков скриптов, размер которой составляет всего 0,7 КБ при распаковке.

(Ну, он использует другую библиотеку размером около 5 КБ при сжатии, как сказано в https://github.com/addyosmani/basket.js/issues/61 Но это все еще довольно мало)

Но basket.js не только загружает внешний JavaScript, он также кэширует их в локальном хранилище браузера, поэтому при следующем запросе страницы, внешний JavaScript не нужно снова запрашивать по сети, он просто загружается из локального хранилища.

Но почему локальное хранилище, а не кеш браузера?

Прежде всего, гораздо проще кэшировать файлы JavaScript через библиотеку JS в коде веб-страницы, который обычно кэшируется со стороны сервера. С Basket.js теперь очень легко динамически управлять кэшем скриптов с помощью JavaScript.

Давайте попробуем:

В нашем небольшом примере мы будем использовать только basket.require, потому что это сердце всей библиотеки.

  1. basket.require()
  2. basket.get()
  3. basket.remove()
  4. basket.clear()

С basket.require мы можем загрузить файл JS через корзину. Затем этот файл кэшируется в локальном хранилище, как мы уже объяснили, и в следующий раз, когда basket.require запрашивает этот файл, например, при перезагрузке страницы, Basket сначала просматривает кеш, а если файл уже там кэширован, он загружает файл через локальное хранилище, а не запрашивать его снова через сеть.

index.html:

<! 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>

Как видите, мы сначала импортируем библиотеку RSVP, которая нужна Basket.js. Затем сама корзина, f в теле мы можем выполнить нашу функцию require, чтобы загрузить откуда-нибудь jQuery.

Когда вы впервые открываете страницу, вы должны увидеть это:

jQuery запрашивается как обычно по сети.

Но с перезагрузкой страницы:

jQuery больше не отображается на вкладке Сеть. Он был загружен из локального хранилища.

Pill

Официальный Github

Pill добавляет динамическую загрузку контента на статические сайты и делает загрузку контента плавной для пользователей. Это около 1 КБ, когда минимизировано и сжато. Разработка Pill началась с твита

Большинство из нас используют одностраничные приложения для веб-приложений, которые не загружают новую страницу, когда мы перемещаемся, в большинстве сред SPA это позволено, потому что все основано на одном index.html. Но что, если у нас есть несколько статических страниц? Pill - это решение.

По запросу он извлекает содержимое других HTML-файлов на сервере и заменяет текущее содержимое новым извлеченным.

Это приводит к значительному повышению производительности, поскольку наше приложение не запрашивает совершенно новую страницу. Важный контент просто заменен.

Пример кода есть на GitHub 

JS-cookie

Официальный GitHub

Работа с куками в браузере может быть довольно напряженной. JS-cookie в помощь, пройдемся по основам.

Реализуйте это через CDN:

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

Установите ключ cookie с именем «name», а его значение «Max»

Cookies.set («name», «Max»)

Получить значение cookie с ключом «name»

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

Создайте cookie, дайте ему истечь через 7 дней

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

Удалить куки

Cookies.remove ( 'name')

Получить все куки

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

Источник перевода 


0 комментариев
Сортировка:
Добавить комментарий