JavaScript 前端工具库——outils

前端业务代码工具库

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

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

如果你也有常用的代码, 欢迎为本项目提交pr。

下载地址

https://github.com/proYang/outils

安装使用

直接下载min目录下的outils.min.js使用, 支持UMD通用模块规范

使用npm安装

浏览器:

<script src="outils.min.js"></script>
<script>
var OS = outils.getOS()
</script>

npm:

$ npm install --save-dev outils

webpack、RequireJS、SeaJS等

// 完整引入

const outils = require('outils')

const OS = outils.getOS()

推荐使用方法

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

// 只引入部分方法('outils/<方法名>')

const getOS = require('outils/getOS')

const OS = getOS()

API文档

Array

??arrayEqual??判断两个数组是否相等

Class

??addClass??为元素添加class

??hasClass??判断元素是否有某个class

??removeClass??为元素移除class

Cookie

??getCookie??根据name读取Cookie

??removeCookie??根据name删除Cookie

??setCookie??添加Cookie

Device

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

??getOS??获取操作系统类型

Dom

??getScrollTop??获取滚动条距顶部的距离

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

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

??setScrollTop??设置滚动条距顶部的距离

Function

??debounce??函数防抖

??throttle??函数节流

Keycode

??getKeyName??根据keycode获得键名

Object

??deepClone??深拷贝，支持常见类型

??isEmptyObject??判断Object是否为空

Random

??randomColor ??随机生成颜色

??randomNum??生成指定范围随机数

Regexp

??isEmail??判断是否为邮箱地址

??isIdCard??判断是否为身份证号

??isPhoneNum??判断是否为手机号

??isUrl??判断是否为URL地址

String

??digitUppercase??现金额转大写

Support

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

Time

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

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

Url

??parseQueryString??url参数转对象

??stringfyQueryString??对象序列化