npm 包 @dcntrlzd/helios 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 开发过程中，我们经常需要使用一些前端框架，类库以及工具，这些工具的使用可以大大提升我们的开发效率。npm 是一个流行的包管理器，通过 npm 可以方便地安装开发过程中需要用到的各种包，在这里介绍一个 npm 包 @dcntrlzd/helios，它提供了一系列前端开发中常用的工具函数和 UI 组件。

安装

npm i @dcntrlzd/helios

工具函数

1. getQueryString

获取 URL 中的 query 参数

import { getQueryString } from '@dcntrlzd/helios';

const q = getQueryString('foo');
console.log(q); // 'bar' given '?foo=bar'

2. debounce

节流函数，防止函数被频繁调用

import { debounce } from '@dcntrlzd/helios';

const log = () => console.log('log');
const debouncedLog = debounce(log, 1000); // 防抖函数，延迟调用 log 函数
window.addEventListener('scroll', debouncedLog); // 防止滚动时频繁调用 log 函数

3. formatTime

格式化时间戳为友好格式

import { formatTime } from '@dcntrlzd/helios';

const time = formatTime(Date.now() / 1000);
console.log(time); // '刚刚' / '5分钟前' / '2小时前' / '2天前'

UI 组件

1. Button

按钮组件，支持不同主题风格和大小

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

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

2. Modal

弹窗组件，支持背景模糊和自定义内容

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

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

总结

该 npm 包提供了前端开发中常用的工具函数和 UI 组件，使用也非常简单方便。通过 npm 的包管理机制，我们可以轻松地安装和使用这些工具函数和 UI 组件，提高开发效率。

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