よく使うJS方法
4681 ワード
一、現在の要素が配列かどうかを判断します.
1,constructorで判断する
1,アンドロイドかどうかを判断する
1,メールボックス
1,オブジェクト
以上は大体今のところ、プロジェクトの中で多くの公共方法を使っています.実現方法は一番良くないかもしれません.ここでは参考にしてください.いろいろな共通の方法がありますが、ここではこれだけ思い出して、後でゆっくり補充しましょう.
1,constructorで判断する
function isArray(value) {
return value && typeof value == 'object' && value.constructor === Array
}
2,instance ofで判断するfunction isArray(value) {
return value && typeof value == 'object' && value instanceof Array
}
3,toStringで判断するfunction isArray(value) {
return Array.isArray(value) || (typeof value == 'object' && Object.prototype.toString.call(value) === '[object Array]')
}
4,isAray原生方法の判断Array.isArray()
二、対象かどうかを判断する.function isObject(value) {
return value != null && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]'
}
環境を判断する1,アンドロイドかどうかを判断する
function isAndroid() {
return /Android/i.test(navigator.userAgent) || /Linux/i.test(navigator.appVersion);
}
2,iosかどうかを判断するfunction isIOS() {
return (/ipad|iphone/i.test(navigator.userAgent));
}
3,Safariかどうか判断します.function isSafari() {
return (/msie|applewebkit.+safari/i.test(navigator.userAgent));
}
4、微信であるかどうかを判断する.function isWeixin() {
return /MicroMessenger/i.test(navigator.userAgent);
}
5、移動端かどうかを判断する.function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent) ||
screen.width < 500;
}
四、必要に応じてCSSとJSをロードする./**
* js
* @param {*} path
*/
function delayLoadJS(path) {
if (!path) {
return Promise.reject();
}
return new Promise((resolve, reject) => {
let dom = null;
const scripts = document.querySelectorAll('script');
for (let item of scripts) {
if (new RegExp(path).test(item.src)) {
dom = item;
onload(dom, () => resolve());
return;
}
}
if (!dom) {
const script = document.createElement('script');
script.src = path;
script.onload = () => {
resolve();
script.onload = null;
};
script.onerror = () => reject();
document.body.appendChild(script);
}
});
}
/**
* css
* @param {*} path
*/
function delayLoadCSS(path) {
if (!path) {
return Promise.reject();
}
return new Promise((resolve, reject) => {
let dom = null;
let links = document.querySelectorAll('link');
for (let item of links) {
if (new RegExp(path).test(item.href)) {
dom = item;
onload(dom, resolve);
return;
}
}
if (!dom) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = path;
link.onload = () => {
resolve();
link.onload = null;
};
link.onerror = () => reject();
document.head.appendChild(link);
}
});
}
/**
*
* @param {*} dom
* @param {*} resolve
*/
function onload(dom, resolve) {
const oldOnload = dom.onload;
if (oldOnload) {
dom.onload = () => {
oldOnload();
resolve();
};
} else {
resolve();
}
}
五、正規表現を使う1,メールボックス
function isEmail(email) {
var r = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return r.test(email);
}
2,QQfunction isQQ(qq) {
var r = /^[1-9]\d{4,10}$/;
return r.test(qq);
}
3,URLfunction isUrl(str) {
return /^(((ht)tps?):\/\/)?[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/.test(str);
}
4,身分証function isCard(str) {
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
}
5,漢字function isChinese(str) {
return /^[\u4e00-\u9fa5]+$/.test(str);
}
6,英語function isEnglish(str) {
return /^[a-zA-Z]*$/.test(str);
}
六、対象の深度コピー1,オブジェクト
// ,
JSON.parse(JSON.stringify(obj));
2,配列 Array.slice(),Array.concat(),ES6 ...
おわりに以上は大体今のところ、プロジェクトの中で多くの公共方法を使っています.実現方法は一番良くないかもしれません.ここでは参考にしてください.いろいろな共通の方法がありますが、ここではこれだけ思い出して、後でゆっくり補充しましょう.