Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Rabbitzzc/always-helper
前端项目开发中，经常会用到一些工具函数的合集。
https://github.com/Rabbitzzc/always-helper
always always-helper array chart color cookie css device dom function helper hex-rgb listen number random regex string web
Last synced: 3 months ago
JSON representation
前端项目开发中，经常会用到一些工具函数的合集。
- Host: GitHub
- URL: https://github.com/Rabbitzzc/always-helper
- Owner: Rabbitzzc
- License: mit
- Created: 2020-09-21T11:46:51.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-24T06:07:44.000Z (9 months ago)
- Last Synced: 2024-01-08T04:21:37.808Z (6 months ago)
- Topics: always, always-helper, array, chart, color, cookie, css, device, dom, function, helper, hex-rgb, listen, number, random, regex, string, web
- Language: TypeScript
- Homepage:
- Size: 1.24 MB
- Stars: 17
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-seeds - always-helper
README
always-helper
前端项目开发中，经常会用到一些工具函数的合集。
前端项目开发中，总会碰到这一类问题，所以为了提高前端的开发效率，减少代码重复率，所以这里统一封装了这些方法。
## ⭐️ 特性
- [x] 使用 typescript 编写，提供更好的代码提示和类型检查。
- [x] 测试全覆盖，代码可用性得到保证。
- [x] 不重复建设，利用现有的优秀开源库开发一些函数（大项目中经常会用到的一些库，比如 `lodash`、`dayjs`、`js-cookie` 等）。
- [x] 覆盖 `日期格式化`、`url参数转换`、`浏览器类型判断`、`节流函数`、`字符串/数组处理`、`本地缓存`、`Cookie 增删改查`、`颜色转换`、`DOM 操作`、`随机数生成`、`金额转换` 等前端常用工具函数。
## 📦 开始
### 安装
```sh
# npm
npm install --save always-helper
# yarn
yarn add always-helper
```
### 使用
```sh
import {setCookie} from 'always-helper'
```
### 备注
* 如果使用了 `Cookie` 相关函数，需要提前安装 `js-cookie`
* 如果使用了「日期相关」函数，需要提前安装 `dayjs`
### API 文档
#### `Cookie` 相关
* `setCookie` 设置 cookie
* `getCookie` 获取 cookie
* `removeCookie` 删除 cookie
* `checkCookie` 检查浏览器是否支持 cookie
#### 日期相关
* `today` 获取今天日期
* `yestoday` 获取昨天日期
* `beforeDay` 获取前 n 天日期
* `currentWeek` 获取本周起止时间
* `lastWeek` 获取上周起止时间
* `nextWeek` 获取下周起止时间
* `beforeWeek` 获取过去第 n 周的起止日期
* `beforeDays` 获取过去 n 天的起止时间
* `currentMonth` 获取本月起止时间
* `lastMonth` 获取上个月的起止时间
* `nextMonth` 获取下个月的起止时间
* `beforeMonth` 获取过去 n 个月起止时间
* `sofarYear` 获取今天至今的起止时间
* `getDay` 获取星期几
* `getMonth` 获取本月份
* `getCurrentWeek` 获取今年第几周
* `timeAgo` 格式化时间展示范围
#### 样式相关
* `addClass` 元素添加类
* `removeClass` 元素删除类
* `hasClass` 判断元素是否存在某个类
* `toggleClass` 元素切换类名
* `replaceClass` 替换元素某个类为另一个类
* `setStyle` 设置元素样式
* `getStyle` 获取元素样式
* `insertCss` 将 CSS 字符串插入到 `` 中
* `loadCss` 将 CSS 链接插入到 `` 中
#### `URL` 相关
* `parseQueryString` 解析 URL 查询字符串
* `stringifyQueryString` 对象转化为 URL 查询字符串
#### 随机数相关
* `randomInt` 随机生成一个整数
* `randomString` 随机生成一个字符串（包含大写、小写、数字）
* `randomCnChar` 随机生成中文串
* `randomColor` 随机生成颜色（16 进制）
* `uuid` 生成一个 uuid
* `randomAvatar` 随机生成头像 avatar 链接，包含 http 或者 https 协议头
#### `DOM` 相关
* `fullscreen` 进入全屏/退出全屏
* `copyElement2Clipboard` 复制 DOM 元素到剪贴板
* `copyElementImage2Clipboard` 将 DOM 元素生成图片并复制到剪贴板
* `downloadElementImage` 将 DOM 元素转化为图片并下载到本地
* `inDarkMode` 将页面切换为暗黑模式
* `inview` 判断一个 DOM 元素是否在可是区域内
* `scrollTop` 将页面滚动到顶部
* `scrollBottom` 将页面滚动到底部
#### 颜色转换相关
* `hexToRgb` HEX 格式转化为 RGB 格式
* `rgbToHex` RGB 格式转化为 HEX 格式
#### 数字相关
* `fileSize` 字节单位转换
* `commafy` 数字每三位增加逗号
#### 正则相关
* `verifyIdCard` 身份证验证
* `verifyEmail` 邮箱验证
* `verifyCellNumber` 手机号验证
* `verifyUrl` 网页地址验证
#### 设备相关
* `getOS` 获取操作系统
* `isAndroid` 是否为 `Android` 设备
* `isIos` 是否为 `iOS` 设备
* `isIpv4` ipv4 检测
* `isIpv6` ipv6 检测
* `isMobile` 是否为移动端
* `isWeixin` 是否为微信内置浏览器打开
#### 对象相关
* `objEmpty` 判断对象是否为空
## ⚙️ CHANGELOG
[CHANGELOG](./CHANGLOG.md)
## LICENSE
[MIT](./LICENSE)
## ✈️ TODO
[TODO](./TODO.md)
## 🚩 FAQ
* [Q] 为什么使用 `dayjs` 作为时间处理工具？
* 大多数项目在最开始启动的时候，可能都是使用 `moment.js`。但其无法与现代的 `Tree Shanking` 算法配合使用，导致打包后的体积非常大，同时最近 `moment.js` 官方已经宣布停止更新进入维护阶段，并推荐了其他的相似库，其中就包括 `dayjs`。
* `dayjs` 本身非常轻量（2KB），功能上也不差，语法也非常友好，支持链式操作，同时兼容性也是非常优秀的。基于上面两个原因，所以选择了 `dayjs`。
* [Q] 为什么使用 `js-cookie` 作为 cookie 处理工具？
* `js-cookie` 在 cookie 库中一枝独秀，有着非常好的影响力。同时 `js-ccokie` 非常轻量（< 1KB），我认为我们不需要重复建设。
* [Q] 有没有更好的随机数工具库？
* 推荐使用[chancejs](https://github.com/chancejs/chancejs)，但是仓库比较大