這三個精巧且很棒 JS 庫,值得你親手試試

在本文中,介紹3個鮮為人知,但功能非常強大且體積很小的 JavaScript 庫,這些可以幫助提高開發效率,減輕開發難度,讓你加班少少的,請收納。

Basket.js

網址:
https://addyosmani.com/basket.js/

Basket.js是一個極小的 JS 庫,壓縮後的大小僅為0.7 kB。

Basket.js不僅用於加載外部 JavaScript,它還將它們緩存在瀏覽器的本地存儲中,這樣,在下一次請求頁面時,外部 JavaScript 就不必再通過網絡請求了,只需從本地存儲中加載即可。

但是為什麼是本地存儲而不是瀏覽器緩存?

首先,我個人發現通過網頁代碼中的 JS 庫緩存 JavaScript 文件要容易得多,該代碼通常是從服務器端緩存的。使用Basket.js,現在可以很容易地使用代碼中的JavaScript動態控制腳本緩存。

試一試

Basket.js的API並不那麼複雜。你可以自行瀏覽文檔,親手試試。在我們的小示例中,僅使用basket.require,因為它是整個庫的核心。

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

使用basket.require,我們可以通過basket加載JS文件。然後將該文件緩存在本地存儲中(如前所述),並將在下一個 basket.require 緩存。例如 重新加載頁面時,Basket會首先在緩存中查找,如果文件已經緩存在其中,它將通過本地存儲加載文件,而不是通過網絡再次請求文件。

index.html:

https://addyosmani.com/basket.js/dist/basket.min.jshttps://cdn.jsdelivr.net/npm/rsvp@4/dist/rsvp.min.jshttps://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

這三個精巧且很棒 JS 庫,值得你親手試試

如上所見,我們首先導入了rsvp庫,然後是Basket本身,接著在正文中我們可以執行我們的require函數,以從某個地方加載jQuery。

首次打開頁面時,應該看到以下內容:

這三個精巧且很棒 JS 庫,值得你親手試試

但是隨著頁面的重新加載, jquery 就不會在重新請求了:

這三個精巧且很棒 JS 庫,值得你親手試試

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】

Pill

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

Pill為靜態站點添加了動態內容加載,使用戶的內容加載更加流暢。該庫壓縮後大約是1kb。

精髓:我們大多數人使用單頁應用程序來擁有網絡應用程序,當我們導航時,這些應用程序不會加載整個新頁面。在大多數SPA框架中,這樣做是因為所有內容都基於一個index.html。

但是,如果我們有多個靜態頁面怎麼辦?Pill 就是一個解決方案。

根據需要,它可以獲取服務器上其他HTML文件的內容,並用新的已獲取文件替換當前內容。由於我們的應用程序不需要新的頁面,因此可以極大地提高性能。

使用Pill,這是自動完成的,因為它會攔截導航嘗試。

Pill 還有一個很好的點是它的文檔做的很好,更多用法可以在[文檔][2]裡找到。

JS-cookie

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

在瀏覽器中使用Cookie可能會非常費力。JS-cookies使這變得容易得多,現在我們將介紹基礎知識。

通過 CDN 引入:

<code>/<code>

設置一個名為'name'的 cookie 鍵,其值為 '前端小智'

<code>Cookies.set('name', '前端小智')/<code>

使用'name'鍵獲取 Cookie 的值

<code>Cookies.get('name') // '前端小智'/<code>

創建cookie,讓它在7天后過期:

<code>Cookies.remove('name')/<code>

獲取所有 Cookies

<code>Cookies.get() // { name: '前端小智' }/<code>

今天就到這裡了,希望這三個庫對你有所幫助,如果你有更好的庫,歡迎留言。

作者:Louis Petrik譯者:前端小智 來源:devglan

原文:
https://www.devglan.com/local/p/QnJ0d3I=-533


分享到:


相關文章: