前端项目开发中,总会碰到这一类问题,所以为了提高前端的开发效率,减少代码重复率,所以这里统一封装了这些方法。
- 使用 typescript 编写,提供更好的代码提示和类型检查。
- 测试全覆盖,代码可用性得到保证。
- 不重复建设,利用现有的优秀开源库开发一些函数(大项目中经常会用到的一些库,比如
lodash
、dayjs
、js-cookie
等)。 - 覆盖
日期格式化
、url参数转换
、浏览器类型判断
、节流函数
、字符串/数组处理
、本地缓存
、Cookie 增删改查
、颜色转换
、DOM 操作
、随机数生成
、金额转换
等前端常用工具函数。
# npm
npm install --save always-helper
# yarn
yarn add always-helper
import {setCookie} from 'always-helper'
- 如果使用了
Cookie
相关函数,需要提前安装js-cookie
- 如果使用了「日期相关」函数,需要提前安装
dayjs
setCookie
设置 cookiegetCookie
获取 cookieremoveCookie
删除 cookiecheckCookie
检查浏览器是否支持 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>
中
parseQueryString
解析 URL 查询字符串stringifyQueryString
对象转化为 URL 查询字符串
randomInt
随机生成一个整数randomString
随机生成一个字符串(包含大写、小写、数字)randomCnChar
随机生成中文串randomColor
随机生成颜色(16 进制)uuid
生成一个 uuidrandomAvatar
随机生成头像 avatar 链接,包含 http 或者 https 协议头
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
判断对象是否为空
- [Q] 为什么使用
dayjs
作为时间处理工具?- 大多数项目在最开始启动的时候,可能都是使用
moment.js
。但其无法与现代的Tree Shanking
算法配合使用,导致打包后的体积非常大,同时最近moment.js
官方已经宣布停止更新进入维护阶段,并推荐了其他的相似库,其中就包括dayjs
。 dayjs
本身非常轻量(2KB),功能上也不差,语法也非常友好,支持链式操作,同时兼容性也是非常优秀的。基于上面两个原因,所以选择了dayjs
。
- 大多数项目在最开始启动的时候,可能都是使用
- [Q] 为什么使用
js-cookie
作为 cookie 处理工具?js-cookie
在 cookie 库中一枝独秀,有着非常好的影响力。同时js-ccokie
非常轻量(< 1KB),我认为我们不需要重复建设。
- [Q] 有没有更好的随机数工具库?
- 推荐使用chancejs,但是仓库比较大