always-helper
always-helper copied to clipboard
前端项目开发中,经常会用到一些工具函数的合集。
![](https://github.com/Rabbitzzc/image-hosting-service/blob/master/images/always-avator.png?raw=true)
always-helper
前端项目开发中,经常会用到一些工具函数的合集。
前端项目开发中,总会碰到这一类问题,所以为了提高前端的开发效率,减少代码重复率,所以这里统一封装了这些方法。
⭐️ 特性
- [x] 使用 typescript 编写,提供更好的代码提示和类型检查。
- [x] 测试全覆盖,代码可用性得到保证。
- [x] 不重复建设,利用现有的优秀开源库开发一些函数(大项目中经常会用到的一些库,比如
lodash
、dayjs
、js-cookie
等)。 - [x] 覆盖
日期格式化
、url参数转换
、浏览器类型判断
、节流函数
、字符串/数组处理
、本地缓存
、Cookie 增删改查
、颜色转换
、DOM 操作
、随机数生成
、金额转换
等前端常用工具函数。
📦 开始
安装
# npm
npm install --save always-helper
# yarn
yarn add always-helper
使用
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 字符串插入到<head>
中 -
loadCss
将 CSS 链接插入到<head>
中
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
LICENSE
MIT
✈️ TODO
TODO
🚩 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,但是仓库比较大