1.0.9 • Published 3 years ago
h-bunny v1.0.9
burries
一个 JS 工具库
使用方式
npm install h-bunny
// es6模块系统
import { onHashChange } from "h-bunny";
onHashChange(() => console.log("onHashChange"));
// 浏览器
// 引入
<script src="h-bunny.min.js"></script>;
// 使用
utils.onHashChange(() => console.log("HashChange"));
utils
arrayEqual
参与比较的两个数组,如果每个元素都相等,返回 true,否则返回 false
参数
- 参与比较的两个数组
console.log(arrayEqual([1, 2], [1, 2])); // true
isNetAvailable
检测当前环境网络状态,接受对象参数
参数
- code: 无网络时的状态码(自定义)
setInterval(() => {
utils
.isNetAvailable(-1)
.then(() => {
console.log("网络正常");
})
.catch((err) => {
if (err.code === -1) {
console.log("网络错误");
}
});
}, 1000);
onError
捕获页面的 JS 报错或者 Promise 错误(reject)事件,同时监听了 onerror 与 onunhandledrejection。
参数
- 回调函数,任何一种错误触发,都会执行此回调函数
const callback = (e) => {
console.log(e);
};
try {
console.log(a);
} catch (error) {
utils.onError(callback);
}
onVisibilityChange
监听页面是否在前台显示(如果该页面只是被其它窗口挡住,document.hidden 仍然为 False)
参数
- visibilityCallback : 页面前台展示时候的回调函数
- hiddenCallback:页面被隐藏时候的回调函数
locateByBaidu
利用百度地图获取当前定位,返回一个携带当前定位经纬度的 promise
参数
- 百度地图 ak
locateByBaidu(your ak).then({lng, lat} => {
// do sth
})
locationByNavigator
H5 navigator 定位方式,返回一个携带当前定位经纬度的 promise
参数
- timeout 超时时间, 默认 5S
locationByNavigator().then(({lng, lat} => {
// do sth
});
jsonp
jsonp 方式实现 get 跨域,可用于获取地图等接口数据,返回一个携带返回信息的 promise
参数
- timeout 超时时间, 默认 5S
jsonp(
"api.map.baidu.com/location/ip?ak=${your.ak}&coor=bd09ll&output=jsonp"
).then((res) => res);
loadScript
loadScript 方式实现加载 JS 标签
参数
- url
loadScript("https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js");
utf8_to_b64
将代入参数使用 base64 编码并且返回
参数
- 转码的字符
console.log(utf8_to_b64("移植")); // 56e75qSN"
b64_to_utf8
将使用同样规则编码的字符串使用逆规则解码
参数
- 解码的字符
console.log(b64_to_utf8("56e75qSN")); // 移植
getCookie
获取 cookie 中的某个字段
getCookie("id");
getExplore
获取浏览器的版本,返回浏览器类型和版本
可能得到浏览器的值
- IE
- EDGE
- Firefox
- Chrome
- Opera
- Safari
getExplore(); // {browser: "Chrome"version: "90.0.4430.93"}
getOS
获取当前系统类型
可能得到的值
- ios
- android
- windowsPhone
- MacOSX
- windows
- linux
getOS(); // MacOSX
isInWeiXin
判断是否在微信环境
utils.isInWeiXin(); // chrom 返回 false
isInAlipay
判断是否在支付宝环境
utils.isInAlipay(); // chrom 返回 false
getScrollTop
获取窗口滚轴距离顶部的距离并返回
getScrollTop();
copyMsg
将浏览器中输入框的内容写入剪切板--仅支持 input 和 textArea
参数
- el: HTML 元素-input 或者 textArea
- callback: 写入剪切板之后的回调
<input id="app" value="123" />
var app = document.getElementById("app");
copyMsg(app, () => console.log("success")); // 授权剪切板权限之后即可粘贴内容
scrollTo
将当前 window 的滚轴,在某短时间内(ms),纵向滚动到某个位置
参数
- to: 将要滚动到的位置
- duration: 时间段
function scrollTo(to: number, duration: number): void;
setScrollTop
设置滚动条距顶部的距离
参数
- to: 设置的位置
setScrollTop(100);
windowResize
参数
H5 软键盘缩回、弹起回调
- downCallback: 键盘收起时候的回调
- upCallback: 键盘弹出时候的回调
windowResize(
() => console.log("down"),
() => console.log("up")
);
commaify
给数字中间每 3 位加逗号
function commaify(param: string | number): string;
commaify(1000000); // 10,000,000
filterCard
身份证中间生日日期做掩码
function filterCard(param: string | number): string;
utils.filterCard("410987100018420987") === "4109871000****0987"; // true
filterPhone
电话号码中间四位做掩码
function filterPhone(param: string | number): string;
utils.filterPhone("10801229300") === "108****9300"; // true
digitUppercase
现金金额转大写
export function digitUppercase(n: number): string;
utils.digitUppercase(10801229300.69) ===
"壹佰零捌亿零壹佰贰拾贰万玖仟叁佰元陆角玖分"; // true
判断文件类型是否为图片
isAssetTypeAnImage(File file)
判断文件大小是不是超出范围
- 单位:M
valiadateSize(File file, Number maxSize)
formatTime
将代入的毫秒数计算为天、时、分、秒
type dateType = {
day: number;
hour: number;
min: number;
seconds: number;
};
export function formatTime(timer: number): dateType;
const timer = formatTime(172800000 + 36000000 + 120000 + 30000);
console.log(timer);
formatDate
格式化时间为各种格式
export function formatDate(param: number | Date | string): string;
utils.formatDate("5/12/2021", "YYYY-MM-DD"); // 2021-05-12
utils.formatDate(1621243936598, "YYYY-MM-DD"); // "2021-05-17"
utils.formatDate(new Date().setDate(1), "YYYY-MM**DD"); // "2021-05**01"
utils.formatDate(new Date().getTime(), "YYYY/MM/DD hh:mm:ss"); // "2021/05/17 05:43:35"
isLeapYear
判断是否是闰年
function isLeapYear(year: number): boolean;
utils.isLeapYear(2021); // false
isSameDay
判断是否是同一天
function isSameDay(date1: Date, date2: Date): boolean;
utils.isSameDay(new Date(), new Date()); // true
debounce
防抖函数-高频触发的事件,如:按钮点击多次,只执行最后一次
- handler: 处理函数
- delay: 时间段,表示 多长时间后执行这一次函数
- immediate: 是否立即执行一次,true 为默认执行一次
function debounce(
handler: Function,
delay: number,
immediate: boolean
): Function;
普通调用
function fun() {
console.log(1);
}
const d = debounce(fun, 1000, true);
d();
绑定 this
const obj = {
value: 1,
run: function () {
console.log(this.value);
},
};
const d = debounce(obj.run.bind(obj), 1000, false);
d();
带参数的情形
const obj = {
value: 1,
run: function (value) {
console.log(value + 1);
},
};
const d = debounce(obj.run.bind(obj), 1000, true);
d(1);
throttle
节流,事件在一段时间内按一定频率执行,多用于 resize,input 框输入
- handler: 处理函数
- delay: 执行频率 次/ms
function throttle(handler: Function, delay: number): Function;
let num = 0;
const a = throttle(() => {
num++;
console.log("throttle", num);
}, 1000);
once
只执行一次的函数
- handler: 处理函数
function once(handler: Function): Function;
let a = once(() => console.log("aa"));
setInterval(() => {
a();
}, 1);
getSize
设置 H5 根元素的 font-size
- 用于 rem 布局
- 设计稿宽度 750 物理像素
- dpr = 2(iphone6/7/8 下开发视图)
function getSize(base: number): void;
utils.getSize(40); // iphone6 下 根元素 font-size 为20 px
deepClone
深拷贝对象
function deepClone(values: any): any;
const obj = { a: 1 };
const o = utils.deepClone(obj);
o.a = 2;
isEmptyObject
判断一个对象是否没有一个属性
function deepClone(values: any): any;
const obj = { a: 1 };
const o = utils.deepClone(obj);
o.a = 2;
qsParam
序列化对象为请求参数
function qsParam(object: object): string;
const obj = { a: 1, b: 2 };
utils.qsParam(obj);
// ?a=1&b=2
getTypeof
判断对象的类型
function getTypeof(object: any): string;
utils.getTypeof(new Map([])); // map
isInt
判断是不是一个正整数
function isInt(str: string | number): boolean;
utils.isInt(0); // false
isNumber
判断字符串是不是纯数字字符串
function isNumber(str: string | number): boolean;
utils.isNumber("123a"); // false
isSpecialCode
判断含不含有特殊字符
function isSpecialCode(str: string | number): boolean;
utils.isSpecialCode("埃美柯.-"); // true
isEmail
校验是否是邮箱
function isEmail(str: string): boolean;
utils.isEmail("123"); // false
isIdCard
校验是否是身份证号码
function isIdCard(str: string): boolean;
utils.isIdCard("123"); // false
isPhoneNum
校验是否是电话号码
function isPhoneNum(str: string): boolean;
utils.isPhoneNum("123"); // false
isUrl
校验是否是 URL
function isUrl(str: string): boolean;
utils.isUrl("http://git.daojia-inc.com/"); // true
session
window.localStoreage 方法封装
- 没有第二个参数时为存储
- 有第二个参数时为读取,没获取到则返回空字符串''
function session(key: string, value?: any): any;
session("name", "小红"); // true
local
- 用法同 session,是 localStorage 的存取方式
monthDays
获取代入的时间对象的参数,当前月总共多少天
- 参数为一个时间对象
function monthDays(date: Date): number;
monthDays(new Date("2020/2/11")); // 29
randomNum
生成随机整数
function randomNum(min: number, max: number): number;
randomNum(2.1, 5.1); // 5
getRequest
获取 URL 上的参数
function getRequest(param: string, search?: string): string;
getRequest("page", "?page=1"); // 1
onHashChange
监听 location.hash 变化
export function onHashChange(callback: Function): boolean;
const callback = () => console.log("success");
onHashChange(callback);