文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

3个很棒的小众JavaScript库分别是哪些

2024-04-02 19:55

关注

3个很棒的小众JavaScript库分别是哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

JavaScript有很多库,每个人都已经对最重要和最受欢迎的库做过总结,但很快再次迷失。

在这将分享3个鲜为人知但非常强大,且很小的JavaScript库,这些库将使你的生活变得简单,也不会给你的web应用程序增加不必要的负担。

1. JS-cookie

OfficialGitHub

在浏览器中使用cookies可能会非常费力。JS cookies让这件事变得简单多了,现在我们将学习基本知识。

通过CDN实施:

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

设置一个名为“name”的cookie键,其值为“Max”

Cookies.set(&lsquo;name&rsquo;, &lsquo;Max&rsquo;)

获取密钥为“name”的cookie值

Cookies.get(&lsquo;name&rsquo;) // 'Max'

创建cookie,让它在7天后过期

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

删除cookie

Cookies.remove(&lsquo;name&rsquo;)

得出所有cookie

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

3个很棒的小众JavaScript库分别是哪些

来源:Pexels

2. Basket.js

OfficialDocumentation

Basket.js是一个极简的脚本加载程序库,压缩后只有0.7kB。

(它使用的另一个库压缩后大约为5kB,如https://github.com/addyosmani/basket.js/issues/61中所述,但仍然很小)

但是basket.js不仅可以加载外部JavaScript,还可以将其缓存在浏览器的本地存储中,这样在下一页请求时,就不必再次通过网络请求外部JavaScript,而只需从本地存储中加载即可。

但为什么是本地存储而不是浏览器缓存呢?

首先,我个人认为通过JS库在web页面代码中缓存JavaScript文件要容易得多,通常是从服务器端缓存的。使用Basket.js,很容易在代码中使用JavaScript动态控制脚本缓存。

我们试试看:

实际的API并没有那么复杂。我认为你可以自己探索一下文档,在下面的简单示例中,我们只使用basket.require,因为它是整个库的核心。

使用basket.require,我们可以通过basket加载JS文件。然后这个文件被缓存在本地存储中,正如前文所述,下一次basket.require请求这个文件,例如,当重新加载页面时,basket将首先在缓存中查找。或者如果文件已经缓存在那里,它将通过本地存储加载文件,而不是通过网络再次发出请求。

index.html:

在这里你可以找到库:

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

如你所见,首先导入Basket.js需要的RSVP库。然后回到Basket本身,在body中可以执行require函数,从某个地方加载jQuery。

第一次打开页面时,应该看到:

3个很棒的小众JavaScript库分别是哪些

jQuery是通过网络正常请求的。

但随着页面的重新加载:

3个很棒的小众JavaScript库分别是哪些

jQuery不再列在Network选项卡中,它是从本地存储加载。

以上就是整个“魔法”过程。

3. Pill

Official Github

“Pill将动态内容加载添加到静态站点,并使内容加载更为顺畅。”压缩后大约为1KB。

Pill的开发始于这篇推文:https://twitter.com/sitnikcode/status/1109626507331338240

精髓:大多数人使用单页应用程序来运行web应用程序,点击时,不会加载整个新页面。在大多数SPA框架中,这是因为所有内容都基于一个index.html。

但如果有多个静态页面呢?Pill能够帮你解决。

根据需要,它将获取服务器上其他HTML文件的内容,并将当前内容替换为新的已获取内容。

这是巨大的性能改进,因为我们的应用程序不再要求一个完整的新页面。

重要的内容刚刚被替换。

使用Pill,能拦截导航尝试,自动完成上述步骤。

Pill最好的一点是,它会通过一个个示例来记载,确保检查所有的东西:你可以在GitHub上找到代码

(https://GitHub.com/rumkin/pill/tree/master/example)

看完上述内容,你们掌握3个很棒的小众JavaScript库分别是哪些的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯