82个常规的前端JavaScript方法封装(41~50)
发表于:2021-12-05 17:27:11浏览:1974次
本篇文章主要介绍的是一些常用的前端JavaScript方法封装,jsonp底层方法,获取url上的参数,格式化时间,验证邮箱的正则表达式,大数相加等,自己收集整理以便后期使用,需要的朋友可以阅读收藏。
41、requestAnimFrame兼容性方法
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();42、cancelAnimFrame兼容性方法
window.cancelAnimFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();43、jsonp底层方法
function jsonp(url, callback) {
var oscript = document.createElement('script');
if (oscript.readyState) { // ie8及以下版本
oscript.onreadystatechange = function () {
if (oscript.readyState === 'complete' || oscript.readyState === 'loaded') {
callback();
}
}
} else {
oscript.onload = function () {
callback()
};
}
oscript.src = url;
document.body.appendChild(oscript);
}44、获取url上的参数
function getUrlParam(sUrl, sKey) {
var result = {};
sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g, function (ele, key, val) {
if (!result[key]) {
result[key] = val;
} else {
var temp = result[key];
result[key] = [].concat(temp, val);
}
})
if (!sKey) {
return result;
} else {
return result[sKey] || '';
}
}45、格式化时间
function formatDate(t, str) {
var obj = {
yyyy: t.getFullYear(),
yy: ("" + t.getFullYear()).slice(-2),
M: t.getMonth() + 1,
MM: ("0" + (t.getMonth() + 1)).slice(-2),
d: t.getDate(),
dd: ("0" + t.getDate()).slice(-2),
H: t.getHours(),
HH: ("0" + t.getHours()).slice(-2),
h: t.getHours() % 12,
hh: ("0" + t.getHours() % 12).slice(-2),
m: t.getMinutes(),
mm: ("0" + t.getMinutes()).slice(-2),
s: t.getSeconds(),
ss: ("0" + t.getSeconds()).slice(-2),
w: ['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
};
return str.replace(/([a-z]+)/ig, function ($1) {
return obj[$1]
});
}46、验证邮箱的正则表达式
function isAvailableEmail(sEmail) {
var reg = /^([\w+\.])+@\w+([.]\w+)+$/
return reg.test(sEmail)
}47、函数柯里化
//是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术
function curryIt(fn) {
var length = fn.length,
args = [];
var result = function (arg) {
args.push(arg);
length--;
if (length <= 0) {
return fn.apply(this, args);
} else {
return result;
}
}
return result;
}48、大数相加
function sumBigNumber(a, b) {
var res = '', //结果
temp = 0; //按位加的结果及进位
a = a.split('');
b = b.split('');
while (a.length || b.length || temp) {
//~~按位非 1.类型转换,转换成数字 2.~~undefined==0
temp += ~~a.pop() + ~~b.pop();
res = (temp % 10) + res;
temp = temp > 9;
}
return res.replace(/^0+/, '');
}49、单例模式
function getSingle(func) {
var result;
return function () {
if (!result) {
result = new func(arguments);
}
return result;
}
}50、加载js || css || style
const loadRes = function(name, type, fn) { // 加载js || css || style
let ref
if (type === 'js') { // 外部js
ref = document.createElement('script') ref.setAttribute('type', 'text/JavaScript') ref.setAttribute('src', name)
} else if (type === 'css') { // 外部css
ref = document.createElement('link') ref.setAttribute('rel', 'stylesheet') ref.setAttribute('type', 'text/css') ref.setAttribute('href', name)
} else if (type === 'style') { // style
ref = document.createElement('style') ref.innerhtml = name
} if (typeof ref !== 'undefined') {
document.getElementsByTagName('head')[0].appendChild(ref) ref.onload = function() { // 加载完成执行
typeof fn === 'function' && fn()
}
}
}
