Huluobos

Huluobos 自用 前端业务代码工具库

目的：高效率完成前端业务代码

业务开发过程中，会经常用到日期格式化、url参数转对象、浏览器类型判断、节流函数等常用函数，为避免不同项目多次复制粘贴的麻烦，这里统一封装，并发布到npm，以提高开发效率。

参考了 outils

本地打包：npm i 后 npm run build

:building_construction: 安装使用

1. 直接下载min目录下的Huluobos.min.js使用，支持UMD通用模块规范
2. 使用npm安装

浏览器:

  <script src="Huluobos.min.js"></script>
  <script>
      var isj = window.Huluobos.isJson('{"wew":"22222"}')
  </script>

npm:

$ npm install --save-dev Huluobos

webpack、RequireJS、SeaJS等

// 完整引入
const Huluobos = require('Huluobos')
const OS = Huluobos.getOS()

推荐使用方法

你不需要完整引入所有函数，所以只引入需要使用的方法即可。

// 只引入部分方法('Huluobos/<方法名>')
const getOS = require('Huluobos/getOS')
const OS = getOS()

:package: API文档

Array

  [arrayEqual][arrayEqual]  判断两个数组是否相等

Class

  [addClass][addClass]  为元素添加class

  [hasClass][hasClass]  判断元素是否有某个class

  [removeClass][removeClass]  为元素移除class

Cookie

  [getCookie][getCookie]  根据name读取Cookie

  [removeCookie][removeCookie]  根据name删除Cookie

  [setCookie][setCookie]  添加Cookie

Device

  [getExplore][getExplore]  获取浏览器类型和版本号

  [getOS][getOS]  获取操作系统类型

Dom

  [getScrollTop][getScrollTop]  获取滚动条距顶部的距离

  [offset][offset]  获取一个元素的距离文档(document)的位置，类似jQ中的offset()

  [scrollTo][scrollTo]  在${duration}时间内，滚动条平滑滚动到${to}指定位置

  [setScrollTop][setScrollTop]  设置滚动条距顶部的距离

  [windowResize][windowResize]  H5软键盘缩回、弹起回调

Function

  [debounce][debounce]  函数防抖

  [throttle][throttle]  函数节流

Keycode

  [getKeyName][getKeyName]  根据keycode获得键名

Object

  [deepClone][deepClone]  深拷贝，支持常见类型

  [isEmptyObject][isEmptyObject]  判断Object是否为空

Random

  [randomColor][randomColor]   随机生成颜色

  [randomNum][randomNum]  生成指定范围随机数

Regexp

  [isColor][isColor]  判断是否为16进制颜色，rgb 或 rgba

  [isEmail][isEmail]  判断是否为邮箱地址

  [isIdCard][isIdCard]  判断是否为身份证号

  [isPhoneNum][isPhoneNum]  判断是否为手机号

  [isUrl][isUrl]  判断是否为URL地址

String

  [digitUppercase][digitUppercase]  现金额转大写

Support

  [isSupportWebP][isSupportWebP]  判断浏览器是否支持webP格式图片

Time

  [formatPassTime][formatPassTime]  格式化${startTime}距现在的已过时间

  [formatRemainTime][formatRemainTime]  格式化现在距${endTime}的剩余时间

  [isLeapYear][isLeapYear]  判断是否为闰年

  [isSameDay][isSameDay]  判断是否为同一天

  [timeLeft][timeLeft]  计算${startTime - endTime}的剩余时间

  [monthDays][monthDays]  获取指定日期月份的总天数

Url

  [parseQueryString][parseQueryString]  url参数转对象

  [stringfyQueryString][stringfyQueryString]  对象序列化