介绍
在前端开发中，有很多重复性、通用性的功能需要我们不断去实现，这个时候就可以使用一些优秀的 npm 包来帮助我们提高开发效率。@told/told-academy 就是一个非常好用的 npm 包，它提供了许多有用的工具函数，可以让我们在前端开发中更加得心应手。
@told/told-academy 包括三个部分：
- QueryString - 解析 URL 查询字符串的函数
- UriBuilder - 生成 URL 的函数
- Storage - 封装了 localStorage 和 sessionStorage 的函数
今天就让我们来学习一下如何使用这个 npm 包，提高我们的前端开发效率。
安装
在使用 @told/told-academy 之前，我们需要先进行安装。
使用下面的命令来安装最新版本：
npm install @told/told-academy --save
使用 QueryString
QueryString 用来解析 URL 查询字符串的函数。下面就让我们来看一下如何使用它。
解析查询字符串
以某个 URL 为例子：
http://example.com?name=John&age=25
我们可以使用 QueryString 中的 parse 函数来解析出其中的查询字符串：
----- -- - ------------------------------------------ ----- ------ - --------------------------------- ------------------------- -- ------ ------------------------ -- ----
序列化查询字符串
将一些数据序列化为查询字符串是很常见的需求，这个时候可以使用 QueryString 中的 stringify 函数：
----- -- - ------------------------------------------ ----- --- - - ----- ------- ---- -- -- ----- --- - ------------------ ----------------- -- ------------------
使用 UriBuilder
UriBuilder 可以用来生成 URL 的函数。
下面就让我们来看一下如何使用它。
生成 URL
我们可以通过下面的方式使用 UriBuilder 生成 URL：
----- -- - ----------------------------------------- ----- --- - ---- ------------------ -------------------- -------------------------- -------- ----- ------- ---- -- -- ------------ ----------------- -- -------------------------------------------------------
链式调用
UriBuilder 的调用是可链式的，这就使得我们可以非常方便地生成很复杂的 URL。
例如，在上面的例子中，我们可以将 .query({ name: 'John', age: 25 }) 改为：
-------- ---- -- ---- --- -------- ------ - -- -------- ----- -- ----- ---
这样，我们就可以非常优雅地生成一个带有许多查询参数的 URL。
使用 Storage
Storage 封装了 localStorage 和 sessionStorage 的函数。
下面就让我们来看一下如何使用它。
读取和写入数据
我们可以使用 Storage 中的 set 和 get 函数向 localStorage 或 sessionStorage 中存储和读取数据：
----- ------- - -------------------------------------- ----- --- - - ----- ------- ---- -- -- ------------------- ----- ----- --------- - -------------------- ----------------------- -- - ----- ------- ---- -- -
设置存储时间
我们可以使用 setWithExpiration 函数在存储数据的同时设置它的过期时间：
----- ------- - -------------------------------------- ----- --- - - ----- ------- ---- -- -- ----- --------------- - --- -- -- ---- --------------------------------- ---- ----------------- ----- --------- - -------------------- ----------------------- -- - ----- ------- ---- -- -
移除数据
我们可以使用 remove 函数来移除一个存储的数据：
----- ------- - -------------------------------------- ----------------------- ----- --------- - -------------------- ----------------------- -- ----
结语
@told/told-academy 是一个非常实用的 npm 包，它提供了许多有用的函数，可以让我们在前端开发中更加得心应手。通过本文的介绍，相信大家已经掌握了如何使用它，希望它能帮助到大家的前端开发工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600552dc81e8991b448d046d