- 总结一些自己用的js方法,方便以后搜索和查看
- 说不定大家也会用到
- 欢迎评论区补充和留言
1.判断设备
export const judgeDevice = (function () {
const ua = navigator.userAgent.toLowerCase();
if (/ipad|ipod/.test(ua)) {
return 'ipad';
} else if (/android|iphone/.test(ua)) {
return 'mobile';
}
return 'pc';
})();
2.判断微信环境
export const isWeiXin = () => {
if (isClient) {
const ua = window.navigator.userAgent.toLowerCase();
return ua.includes('micromessenger');
}
}
3.修改网站标题栏的图标
export const changeFavicon = link => {
let $favicon = document.querySelector('link[rel="icon"]');
if ($favicon !== null) {
$favicon.href = link;
} else {
$favicon = document.createElement("link");
$favicon.rel = "icon";
$favicon.href = link;
document.head.appendChild($favicon);
}
};
4.获取url上的querystring参数
export const getAllQueryString = (url) => {
const r = {};
const _url = url || window.location.href;
if (_url.split('?')[1]) {
let str = _url.split('?')[1];
str = str.split('&');
str.forEach((item) => {
const key = item.split('=')[0];
const val = item.split('=')[1];
r[key] = decodeURIComponent(val);
});
}
return r;
}
5.清除空格和换行
export const clearBr = (str = "") => {
if (str.length === 0) return "";
return str
.replace(/\s+/g, "")
.replace(/<\/?.+?>/g, "")
.replace(/[\r\n]/g, "");
},
6.动态插入script标签
export const scriptOnLoad = (urls, appendee, callback) => {
urls = Array.isArray(urls) ? urls : [urls];
const array = urls.map((src) => {
const cssReg = /\w*.css$/;
let script;
if (cssReg.test(src)) {
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = src;
script = link;
} else {
script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
}
const bodyElement = document.getElementsByTagName('body')[0];
const currentAppendee = appendee || bodyElement;
currentAppendee.appendChild(script);
return new Promise((resolve) => {
script.onload = () => {
resolve();
};
});
});
return new Promise((resolve) => {
Promise.all(array).then(() => {
if (typeof callback === 'function') {
callback();
}
resolve();
});
});
};
7.判断是否是移动端
export const isMobile = () => {
const ua = window.navigator.userAgent;
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(ua)) {
return true;
}
return false;
};
8.禁止用户缩放js代码
export const prohibit = () => {
const meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no';
document.getElementsByTagName('head')[0].appendChild(meta);
};
9.对象转querystring
function querystring(data = {}) {
if (typeof data !== "object") {
throw new TypeError("param must be object");
}
return Object.entries(data)
.reduce(
(searchParams, [name, value]) =>
value === undefined || value === null
? (searchParams, searchParams)
: (searchParams.append(decodeURIComponent(name), decodeURIComponent(value)), searchParams),
new URLSearchParams()
)
.toString();
}
querystring({
a: 1,
b: 2,
c: 3,
})
10.校验图片的尺寸
const isSize = file => {
return new Promise((resolve, reject) => {
let width = 750;
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.onload = function() {
let valid = img.width == width;
valid ? resolve(true) : reject(false);
};
img.src = _URL.createObjectURL(file);
});
};
11.Toast提示
export default function Toast(msg, duration = 2000) {
duration = Number.isNaN(duration) ? 3000 : duration;
const dom = document.createElement('div');
dom.innerHTML = msg;
dom.style.cssText = `
max-width:60%;
min-width: 150px;
padding:5px 10px;
min-height: 20px;
color: rgb(255, 255, 255);
line-height: 150%;
text-align: center;
border-radius: 4px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999999;
background: rgba(0, 0, 0,.7);
font-size: 14px;
word-break: break-all;`;
document.body.appendChild(dom);
setTimeout(function() {
dom.style.opacity = '0';
setTimeout(() => document.body.removeChild(dom), 500);
}, duration);
}