【譯】這三個精巧且很棒 JS 庫，值得你親手試試

時間 2020-04-21

原文原文鏈接

做者：Louis Petrik 譯者：前端小智來源：devglanhtml

點贊再看，養成習慣前端

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。jquery

在本文中，介紹3個不爲人知，但功能很是強大且體積很小的 JavaScript 庫，這些能夠幫助提升開發效率，減輕開發難度，讓你加班少少的，請收納。git

Basket.js

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

Basket.js是一個極小的 JS 庫，壓縮後的大小僅爲0.7 kB。面試

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

可是爲何是本地存儲而不是瀏覽器緩存?npm

首先，我我的發現經過網頁代碼中的 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:

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" /> <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自己，接着在正文中咱們能夠執行咱們的require函數，以從某個地方加載jQuery。

首次打開頁面時，應該看到如下內容：

可是隨着頁面的從新加載， jquery 就不會在從新請求了：

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

Pill

github: github.com/rumkin/pill

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

**精髓：**咱們大多數人使用單頁應用程序來擁有網絡應用程序，當咱們導航時，這些應用程序不會加載整個新頁面。在大多數SPA框架中，這樣作是由於全部內容都基於一個index.html。

可是，若是咱們有多個靜態頁面怎麼辦？ Pill 就是一個解決方案。

根據須要，它能夠獲取服務器上其餘HTML文件的內容，並用新的已獲取文件替換當前內容。因爲咱們的應用程序不須要新的頁面，所以能夠極大地提升性能。

使用Pill，這是自動完成的，由於它會攔截導航嘗試。

Pill 還有一個很好的點是它的文檔作的很好，更多用法能夠在文檔裏找到。

JS-cookie

github：github.com/js-cookie/j…

在瀏覽器中使用Cookie可能會很是費力。 JS-cookies使這變得容易得多，如今咱們將介紹基礎知識。

經過 CDN 引入：

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

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

Cookies.set('name', '前端小智')
複製代碼

使用'name'鍵獲取 Cookie 的值

Cookies.get('name') // '前端小智'
複製代碼

建立cookie，讓它在7天后過時：

Cookies.remove('name')
複製代碼

獲取全部 Cookies

Cookies.get() // { name: '前端小智' }
複製代碼

今天就到這裏了，但願這三個庫對你有所幫助，若是你有更好的庫，歡迎留言。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：www.devglan.com/local/p/QnJ…

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。