npm 包 @erect/core 使用教程

简介

@erect/core 是一个前端工具类库，提供了一些常用的函数以及工具方法。该库已经发布至 npm 上，可以通过 npm 安装使用。

安装与引入

在项目根目录下使用以下命令安装 @erect/core：

npm install @erect/core

然后在代码中引入：

import erect from '@erect/core'

使用方法

@erect/core 中提供了一些常用函数和工具方法，下面分别介绍如何使用。

throttle

throttle 函数用于限制一个函数的执行频率，比如在一个 resize 事件中，我们希望代码在一定频率内执行，可以使用 throttle 函数。

window.addEventListener('resize', erect.throttle(() => {
  console.log('resize')
}, 100))

上述代码表示在 resize 事件中，回调函数最多每 100ms 执行一次，即使 resize 事件持续触发，回调函数也只会以指定的频率执行。

debounce

debounce 函数用于限制一个函数的执行频率，与 throttle 函数不同的是，debounce 函数在触发后会在指定时间后再执行，如果在指定时间内再次触发，则会重置等待时间。

window.addEventListener('scroll', erect.debounce(() => {
  console.log('scroll')
}, 200))

上述代码表示在 scroll 事件中，回调函数只有在连续触发事件后暂停 200ms 才会执行一次，即如果 scroll 事件前后间隔小于 200ms，则不会执行回调函数。

deepCopy

deepCopy 函数用于深度拷贝一个对象，该函数支持拷贝一个包含函数和循环引用的对象。

-- -------------------- ---- -------
----- --- - -
  -- --
  -- --- -- ---
  -- -
    -- -
  -
-

----- ------ - -------------------

上述代码表示将 obj 对象深度拷贝到 newObj 中。

dateFormat

dateFormat 函数用于将日期转换为指定的格式，该函数支持常见的日期格式化方式。

const date = new Date()

console.log(erect.dateFormat(date, 'yyyy-MM-dd'))
console.log(erect.dateFormat(date, 'yyyy年MM月dd日 HH:mm:ss'))

上述代码表示将 date 转换为指定的日期格式，并打印输出。dateFormat 函数支持的格式符包括：

queryString

queryString 对象用于解析 URL 查询参数，该对象提供了解析和序列化查询参数的方法，可以方便地进行查询参数的操作。

const query = erect.queryString.parse('?foo=bar&baz=qux')

console.log(query.foo, query.baz)

const search = erect.queryString.stringify({foo: 'bar', baz: 'qux'})

console.log(search)

上述代码表示解析一个包含查询参数的 URL 并进行操作，包括解析查询参数和序列化查询参数。

结语

@erect/core 提供了一些常用函数和工具方法，可以方便地进行日常开发中逻辑的处理和数据的操作。熟练掌握这些函数和方法，可以大大提高前端开发的效率，减少重复的劳动，并且这些函数和方法通用性强，可以应用于各种前端项目中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/109940