Skip to content

前端项目开发中,经常会用到一些工具函数的合集。

License

Notifications You must be signed in to change notification settings

Rabbitzzc/always-helper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

always-helper

前端项目开发中,经常会用到一些工具函数的合集。
npm bundle size GitHub top language Travis (.com) GitHub issues node-current npm NPM GitHub Repo stars

前端项目开发中,总会碰到这一类问题,所以为了提高前端的开发效率,减少代码重复率,所以这里统一封装了这些方法。

⭐️ 特性

  • 使用 typescript 编写,提供更好的代码提示和类型检查。
  • 测试全覆盖,代码可用性得到保证。
  • 不重复建设,利用现有的优秀开源库开发一些函数(大项目中经常会用到的一些库,比如 lodashdayjsjs-cookie 等)。
  • 覆盖 日期格式化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,但是仓库比较大