简介
minori 是一个用于前端开发的工具库,其主要功能是实现了一些常用的实用功能函数。
minori 的名称源自日本动画作品 "Nagi no Asukara" 中的角色名,意为 "小"。它的设计目的是为了在前端开发中提供一些小而实用的帮助。
安装
minori 可以通过 npm 安装,使用以下命令:
npm install minori
使用
在使用 minori 之前,需要先在代码中引入:
const minori = require('minori');
函数说明
以下是 minori 包含的一些常用功能函数的说明:
1. getUrlParam
获取 URL 中的参数值。函数如下:
minori.getUrlParam = function (name, url = window.location.href) { const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i'); const r = url.split('?')[1].match(reg); if (r != null) return unescape(r[2]); return null; }
参数说明:
name
:要获取的参数名。url
:要获取参数的 URL,默认是当前页面 URL。
返回值:
- 如果有匹配的参数,返回参数对应的值。
- 如果没有匹配的参数,返回 null。
使用示例:
// 当前 URL 为:http://example.com/index.html?id=123 // 获取 id 参数的值 const id = minori.getUrlParam('id'); console.log(id); // 输出 123
2. debounce
函数防抖。函数如下:
-- -------------------- ---- ------- --------------- - -------- ------ ----- --------- - ------ - --- ------ ------ -------- -- - ----- ------- - ----- ----- ---- - ---------- -- ------- -------------------- -- ----------- - ----- ------- - ------- ----- - ------------------- -- - ----- - ----- -- ------ -- --------- ------------------- ------ - ---- - ----- - ------------------- -- - ------------------- ------ -- ------ - - -
参数说明:
func
:要进行函数防抖的函数。wait
:触发时间间隔,单位是毫秒。immediate
:是否立即执行函数,如果为 true,函数则在触发前执行,否则在触发后执行。
返回值:
- 返回一个函数,调用该函数可以进行函数防抖。
使用示例:
-- -------------------- ---- ------- -- ------------ -------- -------------- - ---------------------------- - -- ------ -------- --------- ----- ------------------- - ---------------------------- ------ -- -- ----- - ----- ---------- --------------------------------------------------------- ---------------------
3. throttle
函数节流。函数如下:
-- -------------------- ---- ------- --------------- - -------- ------ ----- ------- - --- - --- -------- - -- --- ------ ------ -------- -- - ----- --- - ----------- ----- ------- - ----- ----- ---- - ---------- -- ---------- -- --------------- --- ------ -------- - ---- ----- --------- - ---- - ---- - ---------- -- ---------- -- - -- --------- - ----- - -- ------- - -------------------- ----- - ----- - -------- - ---- ------------------- ------ - ---- -- ------- -- ---------------- --- ------ - ----- - ------------------- -- - -------- - --------------- --- ----- - - - ----------- ----- - ----- ------------------- ------ -- ----------- - - -
参数说明:
func
:要进行函数节流的函数。wait
:触发时间间隔,单位是毫秒。options
:配置项,包含以下两个参数:leading
:是否在触发时立即执行一次函数,默认值为 true。trailing
:是否在触发后再执行一次函数,默认值为 true。
返回值:
- 返回一个函数,调用该函数可以进行函数节流。
使用示例:
-- -------------------- ---- ------- -- ------------ -------- -------------- - ---------------------------- - -- ------ -------- --------- ----- -------------------- - ----------------------------- ----- - --------- ----- --- -- -- ------ - ------ ---------- --------------------------------- ----------------------
总结
minori 包含的函数主要是一些实用的工具函数,可以帮助开发者提高开发效率和代码质量。同时,也可以借此机会熟悉函数防抖和函数节流的实现原理。当然,在实际开发过程中,也可以根据自己的需求进行二次开发或根据官方文档自行编写实用函数。
参考文献
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066f491d8e776d08041235