Table of Contents
Summary of encapsulation of common JavaScript tool classes
javascript
js
Common tool
本文主要和大家分享javascript常用工具类的封装总结，希望能帮助到大家。
一.javaScript
1. type 类型判断
isString (o) { //是否字符串
return Object.prototype.toString.call(o).slice(8, -1) === 'String'
}
isNumber (o) { //是否数字
return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}
isObj (o) { //是否对象
return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
}
isArray (o) { //是否数组
return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
}
isDate (o) { //是否时间
return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
}
isBoolean (o) { //是否boolean
return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
}
isFunction (o) { //是否函数
return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
}
isNull (o) { //是否为null
return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}
isUndefined (o) { //是否undefined
return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
}
isFalse (o) {
if (!o || o === 'null' || o === 'undefined' || o === 'false' || o === 'NaN') return true
return false
}
isTrue (o) {
return !this.isFalse(o)
}
isIos () {
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
// return "Android";
return false
} else if (u.indexOf('iPhone') > -1) {//苹果手机
// return "iPhone";
return true
} else if (u.indexOf('iPad') > -1) {//iPad
// return "iPad";
return false
} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
// return "Windows Phone";
return false
}else{
return false
}
}
isPC () { //是否为PC端
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
browserType(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) return "IE7"
else if(fIEVersion == 8) return "IE8";
else if(fIEVersion == 9) return "IE9";
else if(fIEVersion == 10) return "IE10";
else if(fIEVersion == 11) return "IE11";
else return "IE7以下"//IE版本过低
}
if (isFF) return "FF";
if (isOpera) return "Opera";
if (isEdge) return "Edge";
if (isSafari) return "Safari";
if (isChrome) return "Chrome";
}
checkStr (str, type) {
switch (type) {
case 'phone': //手机号码
return /^1[3|4|5|7|8][0-9]{9}$/.test(str);
case 'tel': //座机
return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
case 'card': //身份证
return /^\d{15}|\d{18}$/.test(str);
case 'pwd': //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
return /^[a-zA-Z]\w{5,17}$/.test(str)
case 'postal': //邮政编码
return /[1-9]\d{5}(?!\d)/.test(str);
case 'QQ': //QQ号
return /^[1-9][0-9]{4,9}$/.test(str);
case 'email': //邮箱
return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
case 'money': //金额(小数点2位)
return /^\d*(?:\.\d{0,2})?$/.test(str);
case 'URL': //网址
return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
case 'IP': //IP
return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);
case 'date': //日期时间
return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
case 'number': //数字
return /^[0-9]$/.test(str);
case 'english': //英文
return /^[a-zA-Z]+$/.test(str);
case 'chinese': //中文
return /^[\u4E00-\u9FA5]+$/.test(str);
case 'lower': //小写
return /^[a-z]+$/.test(str);
case 'upper': //大写
return /^[A-Z]+$/.test(str);
case 'HTML': //HTML标记
return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);
default:
return true;
}
}Copy after login
2. Date
/**
* 格式化时间
*
* @param {time} 时间
* @param {cFormat} 格式
* @return {String} 字符串
*
* @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s}') // -> 2018/01/29 00:00:00
*/
formatTime(time, cFormat) {
if (arguments.length === 0) return null
if ((time + '').length === 10) {
time = +time * 1000
}
var format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}', date
if (typeof time === 'object') {
date = time
} else {
date = new Date(time)
}
var formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
var value = formatObj[key]
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
/**
* 返回指定长度的月份集合
*
* @param {time} 时间
* @param {len} 长度
* @param {direction} 方向： 1: 前几个月; 2: 后几个月; 3:前后几个月 默认 3
* @return {Array} 数组
*
* @example getMonths('2018-1-29', 6, 1) // -> ["2018-1", "2017-12", "2017-11", "2017-10", "2017-9", "2017-8", "2017-7"]
*/
getMonths(time, len, direction) {
var mm = new Date(time).getMonth(),
yy = new Date(time).getFullYear(),
direction = isNaN(direction) ? 3 : direction,
index = mm;
var cutMonth = function(index) {
if ( index <= len && index >= -len) {
return direction === 1 ? formatPre(index).concat(cutMonth(++index)):
direction === 2 ? formatNext(index).concat(cutMonth(++index)):formatCurr(index).concat(cutMonth(++index))
}
return []
}
var formatNext = function(i) {
var y = Math.floor(i/12),
m = i%12
return [yy+y + '-' + (m+1)]
}
var formatPre = function(i) {
var y = Math.ceil(i/12),
m = i%12
m = m===0 ? 12 : m
return [yy-y + '-' + (13 - m)]
}
var formatCurr = function(i) {
var y = Math.floor(i/12),
yNext = Math.ceil(i/12),
m = i%12,
mNext = m===0 ? 12 : m
return [yy-yNext + '-' + (13 - mNext),yy+y + '-' + (m+1)]
}
// 数组去重
var unique = function(arr) {
if ( Array.hasOwnProperty('from') ) {
return Array.from(new Set(arr));
}else{
var n = {},r=[];
for(var i = 0; i < arr.length; i++){
if (!n[arr[i]]){
n[arr[i]] = true;
r.push(arr[i]);
}
}
return r;
}
}
return direction !== 3 ? cutMonth(index) : unique(cutMonth(index).sort(function(t1, t2){
return new Date(t1).getTime() - new Date(t2).getTime()
}))
}
/**
* 返回指定长度的天数集合
*
* @param {time} 时间
* @param {len} 长度
* @param {direction} 方向： 1: 前几天; 2: 后几天; 3:前后几天 默认 3
* @return {Array} 数组
*
* @example date.getDays('2018-1-29', 6) // -> ["2018-1-26", "2018-1-27", "2018-1-28", "2018-1-29", "2018-1-30", "2018-1-31", "2018-2-1"]
*/
getDays(time, len, diretion) {
var tt = new Date(time)
var getDay = function(day) {
var t = new Date(time)
t.setDate(t.getDate() + day)
var m = t.getMonth()+1
return t.getFullYear()+'-'+m+'-'+t.getDate()
}
var arr = []
if (diretion === 1) {
for (var i = 1; i <= len; i++) {
arr.unshift(getDay(-i))
}
}else if(diretion === 2) {
for (var i = 1; i <= len; i++) {
arr.push(getDay(i))
}
}else {
for (var i = 1; i <= len; i++) {
arr.unshift(getDay(-i))
}
arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate())
for (var i = 1; i <= len; i++) {
arr.push(getDay(i))
}
}
return diretion === 1 ? arr.concat([tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()]) :
diretion === 2 ? [tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()].concat(arr) : arr
}
/**
* @param {s} 秒数
* @return {String} 字符串
*
* @example formatHMS(3610) // -> 1h0m10s
*/
formatHMS (s) {
var str = ''
if (s > 3600) {
str = Math.floor(s/3600)+'h'+Math.floor(s%3600/60)+'m'+s%60+'s'
}else if(s > 60) {
str = Math.floor(s/60)+'m'+s%60+'s'
}else{
str = s%60+'s'
}
return str
}
/*获取某月有多少天*/
getMonthOfDay (time) {
var date = new Date(time)
var year = date.getFullYear()
var mouth = date.getMonth() + 1
var days
//当月份为二月时，根据闰年还是非闰年判断天数
if (mouth == 2) {
days = year % 4 == 0 ? 29 : 28
} else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {
//月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；
days = 31
} else {
//其他月份，天数为：30.
days = 30
}
return days
}
/*获取某年有多少天*/
getYearOfDay (time) {
var firstDayYear = this.getFirstDayOfYear(time);
var lastDayYear = this.getLastDayOfYear(time);
var numSecond = (new Date(lastDayYear).getTime() - new Date(firstDayYear).getTime())/1000;
return Math.ceil(numSecond/(24*3600));
}
/*获取某年的第一天*/
getFirstDayOfYear (time) {
var year = new Date(time).getFullYear();
return year + "-01-01 00:00:00";
}
/*获取某年最后一天*/
getLastDayOfYear (time) {
var year = new Date(time).getFullYear();
var dateString = year + "-12-01 00:00:00";
var endDay = this.getMonthOfDay(dateString);
return year + "-12-" + endDay + " 23:59:59";
}
/*获取某个日期是当年中的第几天*/
getDayOfYear (time) {
var firstDayYear = this.getFirstDayOfYear(time);
var numSecond = (new Date(time).getTime() - new Date(firstDayYear).getTime())/1000;
return Math.ceil(numSecond/(24*3600));
}
/*获取某个日期在这一年的第几周*/
getDayOfYearWeek (time) {
var numdays = this.getDayOfYear(time);
return Math.ceil(numdays / 7);
}Copy after login
3. Array
/*判断一个元素是否在数组中*/
contains (arr, val) {
return arr.indexOf(val) != -1 ? true : false;
}
/**
* @param {arr} 数组
* @param {fn} 回调函数
* @return {undefined}
*/
each (arr, fn) {
fn = fn || Function;
var a = [];
var args = Array.prototype.slice.call(arguments, 1);
for(var i = 0; i < arr.length; i++) {
var res = fn.apply(arr, [arr[i], i].concat(args));
if(res != null) a.push(res);
}
}
/**
* @param {arr} 数组
* @param {fn} 回调函数
* @param {thisObj} this指向
* @return {Array}
*/
map (arr, fn, thisObj) {
var scope = thisObj || window;
var a = [];
for(var i = 0, j = arr.length; i < j; ++i) {
var res = fn.call(scope, arr[i], i, this);
if(res != null) a.push(res);
}
return a;
}
/**
* @param {arr} 数组
* @param {type} 1：从小到大 2：从大到小 3：随机
* @return {Array}
*/
sort (arr, type = 1) {
return arr.sort( (a, b) => {
switch(type) {
case 1:
return a - b;
case 2:
return b - a;
case 3:
return Math.random() - 0.5;
default:
return arr;
}
})
}
/*去重*/
unique (arr) {
if ( Array.hasOwnProperty('from') ) {
return Array.from(new Set(arr));
}else{
var n = {},r=[];
for(var i = 0; i < arr.length; i++){
if (!n[arr[i]]){
n[arr[i]] = true;
r.push(arr[i]);
}
}
return r;
}
}
/*求两个集合的并集*/
union (a, b) {
var newArr = a.concat(b);
return this.unique(newArr);
}
/*求两个集合的交集*/
intersect (a, b) {
var _this = this;
a = this.unique(a);
return this.map(a, function(o) {
return _this.contains(b, o) ? o : null;
});
}
/*删除其中一个元素*/
remove (arr, ele) {
var index = arr.indexOf(ele);
if(index > -1) {
arr.splice(index, 1);
}
return arr;
}
/*将类数组转换为数组的方法*/
formArray (ary) {
var arr = [];
if(Array.isArray(ary)) {
arr = ary;
} else {
arr = Array.prototype.slice.call(ary);
};
return arr;
}
/*最大值*/
max (arr) {
return Math.max.apply(null, arr);
}
/*最小值*/
min (arr) {
return Math.min.apply(null, arr);
}
/*求和*/
sum (arr) {
return arr.reduce( (pre, cur) => {
return pre + cur
})
}
/*平均值*/
average (arr) {
return this.sum(arr)/arr.length
}Copy after login
4. String 字符串操作
/**
* 去除空格
* @param {str}
* @param {type}
* type: 1-所有空格 2-前后空格 3-前空格 4-后空格
* @return {String}
*/
trim (str, type) {
type = type || 1
switch (type) {
case 1:
return str.replace(/\s+/g, "");
case 2:
return str.replace(/(^\s*)|(\s*$)/g, "");
case 3:
return str.replace(/(^\s*)/g, "");
case 4:
return str.replace(/(\s*$)/g, "");
default:
return str;
}
}
/**
* @param {str}
* @param {type}
* type: 1:首字母大写 2：首页母小写 3：大小写转换 4：全部大写 5：全部小写
* @return {String}
*/
changeCase (str, type) {
type = type || 4
switch (type) {
case 1:
return str.replace(/\b\w+\b/g, function (word) {
return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
});
case 2:
return str.replace(/\b\w+\b/g, function (word) {
return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
});
case 3:
return str.split('').map( function(word){
if (/[a-z]/.test(word)) {
return word.toUpperCase();
}else{
return word.toLowerCase()
}
}).join('')
case 4:
return str.toUpperCase();
case 5:
return str.toLowerCase();
default:
return str;
}
}
/*
检测密码强度
*/
checkPwd (str) {
var Lv = 0;
if (str.length < 6) {
return Lv
}
if (/[0-9]/.test(str)) {
Lv++
}
if (/[a-z]/.test(str)) {
Lv++
}
if (/[A-Z]/.test(str)) {
Lv++
}
if (/[\.|-|_]/.test(str)) {
Lv++
}
return Lv;
}
/*过滤html代码(把<>转换)*/
filterTag (str) {
str = str.replace(/&/ig, "&");
str = str.replace(/</ig, "<");
str = str.replace(/>/ig, ">");
str = str.replace(" ", " ");
return str;
}Copy after login
5. Number
/*随机数范围*/
random (min, max) {
if (arguments.length === 2) {
return Math.floor(min + Math.random() * ( (max+1) - min ))
}else{
return null;
}
}
/*将阿拉伯数字翻译成中文的大写数字*/
numberToChinese (num) {
var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");
var a = ("" + num).replace(/(^0*)/g, "").split("."),
k = 0,
re = "";
for(var i = a[0].length - 1; i >= 0; i--) {
switch(k) {
case 0:
re = BB[7] + re;
break;
case 4:
if(!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
.test(a[0]))
re = BB[4] + re;
break;
case 8:
re = BB[5] + re;
BB[7] = BB[5];
k = 0;
break;
}
if(k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
re = AA[0] + re;
if(a[0].charAt(i) != 0)
re = AA[a[0].charAt(i)] + BB[k % 4] + re;
k++;
}
if(a.length > 1) // 加上小数部分(如果有小数部分)
{
re += BB[6];
for(var i = 0; i < a[1].length; i++)
re += AA[a[1].charAt(i)];
}
if(re == '一十')
re = "十";
if(re.match(/^一/) && re.length == 3)
re = re.replace("一", "");
return re;
}
/*将数字转换为大写金额*/
changeToChinese (Num) {
//判断如果传递进来的不是字符的话转换为字符
if(typeof Num == "number") {
Num = new String(Num);
};
Num = Num.replace(/,/g, "") //替换tomoney()中的“,”
Num = Num.replace(/ /g, "") //替换tomoney()中的空格
Num = Num.replace(/￥/g, "") //替换掉可能出现的￥字符
if(isNaN(Num)) { //验证输入的字符是否为数字
//alert("请检查小写金额是否正确");
return "";
};
//字符处理完毕后开始转换，采用前后两部分分别转换
var part = String(Num).split(".");
var newchar = "";
//小数点前进行转化
for(var i = part[0].length - 1; i >= 0; i--) {
if(part[0].length > 10) {
return "";
//若数量超过拾亿单位，提示
}
var tmpnewchar = ""
var perchar = part[0].charAt(i);
switch(perchar) {
case "0":
tmpnewchar = "零" + tmpnewchar;
break;
case "1":
tmpnewchar = "壹" + tmpnewchar;
break;
case "2":
tmpnewchar = "贰" + tmpnewchar;
break;
case "3":
tmpnewchar = "叁" + tmpnewchar;
break;
case "4":
tmpnewchar = "肆" + tmpnewchar;
break;
case "5":
tmpnewchar = "伍" + tmpnewchar;
break;
case "6":
tmpnewchar = "陆" + tmpnewchar;
break;
case "7":
tmpnewchar = "柒" + tmpnewchar;
break;
case "8":
tmpnewchar = "捌" + tmpnewchar;
break;
case "9":
tmpnewchar = "玖" + tmpnewchar;
break;
}
switch(part[0].length - i - 1) {
case 0:
tmpnewchar = tmpnewchar + "元";
break;
case 1:
if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
break;
case 2:
if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
break;
case 3:
if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
break;
case 4:
tmpnewchar = tmpnewchar + "万";
break;
case 5:
if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
break;
case 6:
if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
break;
case 7:
if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
break;
case 8:
tmpnewchar = tmpnewchar + "亿";
break;
case 9:
tmpnewchar = tmpnewchar + "拾";
break;
}
var newchar = tmpnewchar + newchar;
}
//小数点之后进行转化
if(Num.indexOf(".") != -1) {
if(part[1].length > 2) {
// alert("小数点之后只能保留两位,系统将自动截断");
part[1] = part[1].substr(0, 2)
}
for(i = 0; i < part[1].length; i++) {
tmpnewchar = ""
perchar = part[1].charAt(i)
switch(perchar) {
case "0":
tmpnewchar = "零" + tmpnewchar;
break;
case "1":
tmpnewchar = "壹" + tmpnewchar;
break;
case "2":
tmpnewchar = "贰" + tmpnewchar;
break;
case "3":
tmpnewchar = "叁" + tmpnewchar;
break;
case "4":
tmpnewchar = "肆" + tmpnewchar;
break;
case "5":
tmpnewchar = "伍" + tmpnewchar;
break;
case "6":
tmpnewchar = "陆" + tmpnewchar;
break;
case "7":
tmpnewchar = "柒" + tmpnewchar;
break;
case "8":
tmpnewchar = "捌" + tmpnewchar;
break;
case "9":
tmpnewchar = "玖" + tmpnewchar;
break;
}
if(i == 0) tmpnewchar = tmpnewchar + "角";
if(i == 1) tmpnewchar = tmpnewchar + "分";
newchar = newchar + tmpnewchar;
}
}
//替换所有无用汉字
while(newchar.search("零零") != -1)
newchar = newchar.replace("零零", "零");
newchar = newchar.replace("零亿", "亿");
newchar = newchar.replace("亿万", "亿");
newchar = newchar.replace("零万", "万");
newchar = newchar.replace("零元", "元");
newchar = newchar.replace("零角", "");
newchar = newchar.replace("零分", "");
if(newchar.charAt(newchar.length - 1) == "元") {
newchar = newchar + "整"
}
return newchar;
}Copy after login
6. Http
/**
* @param {setting}
*/
ajax(setting){
//设置参数的初始值
var opts={
method: (setting.method || "GET").toUpperCase(), //请求方式
url: setting.url || "", // 请求地址
async: setting.async || true, // 是否异步
dataType: setting.dataType || "json", // 解析方式
data: setting.data || "", // 参数
success: setting.success || function(){}, // 请求成功回调
error: setting.error || function(){} // 请求失败回调
}
// 参数格式化
function params_format (obj) {
var str = ''
for (var i in obj) {
str += i + '=' + obj[i] + '&'
}
return str.split('').slice(0, -1).join('')
}
// 创建ajax对象
var xhr=new XMLHttpRequest();
// 连接服务器open(方法GET/POST，请求地址， 异步传输)
if(opts.method == 'GET'){
xhr.open(opts.method, opts.url + "?" + params_format(opts.data), opts.async);
xhr.send();
}else{
xhr.open(opts.method, opts.url, opts.async);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(opts.data);
}
/*
** 每当readyState改变时，就会触发onreadystatechange事件
** readyState属性存储有XMLHttpRequest的状态信息
** 0 ：请求未初始化
** 1 ：服务器连接已建立
** 2 ：请求已接受
** 3 : 请求处理中
** 4 ：请求已完成，且相应就绪
*/
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
switch(opts.dataType){
case "json":
var json = JSON.parse(xhr.responseText);
opts.success(json);
break;
case "xml":
opts.success(xhr.responseXML);
break;
default:
opts.success(xhr.responseText);
break;
}
}
}
xhr.onerror = function(err) {
opts.error(err);
}
}
/**
* @param {url}
* @param {setting}
* @return {Promise}
*/
fetch(url, setting) {
//设置参数的初始值
let opts={
method: (setting.method || 'GET').toUpperCase(), //请求方式
headers : setting.headers || {}, // 请求头设置
credentials : setting.credentials || true, // 设置cookie是否一起发送
body: setting.body || {},
mode : setting.mode || 'no-cors', // 可以设置 cors, no-cors, same-origin
redirect : setting.redirect || 'follow', // follow, error, manual
cache : setting.cache || 'default' // 设置 cache 模式 (default, reload, no-cache)
}
let dataType = setting.dataType || "json", // 解析方式
data = setting.data || "" // 参数
// 参数格式化
function params_format (obj) {
var str = ''
for (var i in obj) {
str += `${i}=${obj[i]}&`
}
return str.split('').slice(0, -1).join('')
}
if (opts.method === 'GET') {
url = url + (data?`?${params_format(data)}`:'')
}else{
setting.body = data || {}
}
return new Promise( (resolve, reject) => {
fetch(url, opts).then( async res => {
let data = dataType === 'text' ? await res.text() :
dataType === 'blob' ? await res.blob() : await res.json()
resolve(data)
}).catch( e => {
reject(e)
})
})
}Copy after login
7. DOM
$ (selector){
var type = selector.substring(0, 1);
if (type === '#') {
if (document.querySelecotor) return document.querySelector(selector)
return document.getElementById(selector.substring(1))
}else if (type === '.') {
if (document.querySelecotorAll) return document.querySelectorAll(selector)
return document.getElementsByClassName(selector.substring(1))
}else{
return document['querySelectorAll' ? 'querySelectorAll':'getElementsByTagName'](selector)
}
}
/*检测类名*/
hasClass (ele, name) {
return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));
}
/*添加类名*/
addClass (ele, name) {
if (!this.hasClass(ele, name)) ele.className += " " + name;
}
/*删除类名*/
removeClass (ele, name) {
if (this.hasClass(ele, name)) {
var reg = new RegExp('(\\s|^)' + name + '(\\s|$)');
ele.className = ele.className.replace(reg, '');
}
}
/*替换类名*/
replaceClass (ele, newName, oldName) {
this.removeClass(ele, oldName);
this.addClass(ele, newName);
}
/*获取兄弟节点*/
siblings (ele) {
console.log(ele.parentNode)
var chid = ele.parentNode.children,eleMatch = [];
for(var i = 0, len = chid.length; i < len; i ++){
if(chid[i] != ele){
eleMatch.push(chid[i]);
}
}
return eleMatch;
}
/*获取行间样式属性*/
getByStyle (obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}Copy after login
8. Storage 储存操作
class StorageFn {
constructor () {
this.ls = window.localStorage;
this.ss = window.sessionStorage;
}
/*-----------------cookie---------------------*/
/*设置cookie*/
setCookie (name, value, day) {
var setting = arguments[0];
if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
for (var i in setting) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + day);
document.cookie = i + '=' + setting[i] + ';expires=' + oDate;
}
}else{
var oDate = new Date();
oDate.setDate(oDate.getDate() + day);
document.cookie = name + '=' + value + ';expires=' + oDate;
}
}
/*获取cookie*/
getCookie (name) {
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
if (arr2[0] == name) {
return arr2[1];
}
}
return '';
}
/*删除cookie*/
removeCookie (name) {
this.setCookie(name, 1, -1);
}
/*-----------------localStorage---------------------*/
/*设置localStorage*/
setLocal(key, val) {
var setting = arguments[0];
if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
for(var i in setting){
this.ls.setItem(i, JSON.stringify(setting[i]))
}
}else{
this.ls.setItem(key, JSON.stringify(val))
}
}
/*获取localStorage*/
getLocal(key) {
if (key) return JSON.parse(this.ls.getItem(key))
return null;
}
/*移除localStorage*/
removeLocal(key) {
this.ls.removeItem(key)
}
/*移除所有localStorage*/
clearLocal() {
this.ls.clear()
}
/*-----------------sessionStorage---------------------*/
/*设置sessionStorage*/
setSession(key, val) {
var setting = arguments[0];
if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
for(var i in setting){
this.ss.setItem(i, JSON.stringify(setting[i]))
}
}else{
this.ss.setItem(key, JSON.stringify(val))
}
}
/*获取sessionStorage*/
getSession(key) {
if (key) return JSON.parse(this.ss.getItem(key))
return null;
}
/*移除sessionStorage*/
removeSession(key) {
this.ss.removeItem(key)
}
/*移除所有sessionStorage*/
clearSession() {
this.ss.clear()
}
}Copy after login
Copy after login
9. Other 其它操作
class StorageFn {
constructor () {
this.ls = window.localStorage;
this.ss = window.sessionStorage;
}
/*-----------------cookie---------------------*/
/*设置cookie*/
setCookie (name, value, day) {
var setting = arguments[0];
if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
for (var i in setting) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + day);
document.cookie = i + '=' + setting[i] + ';expires=' + oDate;
}
}else{
var oDate = new Date();
oDate.setDate(oDate.getDate() + day);
document.cookie = name + '=' + value + ';expires=' + oDate;
}
}
/*获取cookie*/
getCookie (name) {
var arr = document.cookie.split('; ');
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('=');
if (arr2[0] == name) {
return arr2[1];
}
}
return '';
}
/*删除cookie*/
removeCookie (name) {
this.setCookie(name, 1, -1);
}
/*-----------------localStorage---------------------*/
/*设置localStorage*/
setLocal(key, val) {
var setting = arguments[0];
if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
for(var i in setting){
this.ls.setItem(i, JSON.stringify(setting[i]))
}
}else{
this.ls.setItem(key, JSON.stringify(val))
}
}
/*获取localStorage*/
getLocal(key) {
if (key) return JSON.parse(this.ls.getItem(key))
return null;
}
/*移除localStorage*/
removeLocal(key) {
this.ls.removeItem(key)
}
/*移除所有localStorage*/
clearLocal() {
this.ls.clear()
}
/*-----------------sessionStorage---------------------*/
/*设置sessionStorage*/
setSession(key, val) {
var setting = arguments[0];
if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){
for(var i in setting){
this.ss.setItem(i, JSON.stringify(setting[i]))
}
}else{
this.ss.setItem(key, JSON.stringify(val))
}
}
/*获取sessionStorage*/
getSession(key) {
if (key) return JSON.parse(this.ss.getItem(key))
return null;
}
/*移除sessionStorage*/
removeSession(key) {
this.ss.removeItem(key)
}
/*移除所有sessionStorage*/
clearSession() {
this.ss.clear()
}
}Copy after login
Copy after login
二.css
1. 公共样式提取
/* 禁止选中文本 */
.usn{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
/* 浮动 */
.fl { float: left; }
.fr { float: right; }
.cf { zoom: 1; }
.cf:after {
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
overflow:hidden;
}
/* 元素类型 */
.db { display: block; }
.dn { display: none; }
.di { display: inline }
.dib {display: inline-block;}
.transparent { opacity: 0 }
/*文字排版、颜色*/
.f12 { font-size:12px }
.f14 { font-size:14px }
.f16 { font-size:16px }
.f18 { font-size:18px }
.f20 { font-size:20px }
.fb { font-weight:bold }
.fn { font-weight:normal }
.t2 { text-indent:2em }
.red,a.red { color:#cc0031 }
.darkblue,a.darkblue { color:#039 }
.gray,a.gray { color:#878787 }
.lh150 { line-height:150% }
.lh180 { line-height:180% }
.lh200 { line-height:200% }
.unl { text-decoration:underline; }
.no_unl { text-decoration:none; }
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.tj { text-align: justify; text-justify: inter-ideograph; }
.wn { /* 强制不换行 */
word-wrap:normal;
white-space:nowrap;
}
.wb { /* 强制换行 */
white-space:normal;
word-wrap:break-word;
word-break:break-all;
}
.wp { /* 保持空白序列*/
overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;
}
.wes { /* 多出部分用省略号表示 , 用于一行 */
overflow:hidden;
word-wrap:normal;
white-space:nowrap;
text-overflow:ellipsis;
}
.wes-2 { /* 适用于webkit内核和移动端 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.wes-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.wes-4 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* 溢出样式 */
.ofh { overflow: hidden; }
.ofs {overflow: scroll; }
.ofa {overflow: auto; }
.ofv {overflow: visible; }
/* 定位方式 */
.ps {position: static; }
.pr {position: relative;zoom:1; }
.pa {position: absolute; }
.pf {position: fixed; }
/* 垂直对齐方式 */
.vt {vertical-align: top; }
.vm {vertical-align: middle; }
.vb {vertical-align: bottom; }
/* 鼠标样式 */
.csd {cursor: default; }
.csp {cursor: pointer; }
.csh {cursor: help; }
.csm {cursor: move; }
/* flex布局 */
.df-sb {
display:flex;
align-items: center;
justify-content: space-between;
}
.df-sa {
display:flex;
align-items: center;
justify-content: space-around;
}
/* 垂直居中 */
.df-c {
display: flex;
align-items: center;
justify-content: center;
}
.tb-c {
text-align:center;
display:table-cell;
vertical-align:middle;
}
.ts-c {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.ts-mc {
position: absolute;
left: 0;right: 0;
bottom: 0; top: 0;
margin: auto;
}
/* 辅助 */
.mask-fixed-wrapper {
width: 100%;
height: 100%;
position: fixed;
left:0;top:0;
background: rgba(0, 0, 0, 0.65);
z-index: 999;
}
.bg-cover {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.bg-cover-all {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}Copy after login
相关推荐：
The above is the detailed content of Summary of encapsulation of common JavaScript tool classes. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution
4 weeks ago
By DDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
3 weeks ago
By DDD
Where to find the Crane Control Keycard in Atomfall
4 weeks ago
By DDD
Roblox: Dead Rails - How To Complete Every Challenge
1 months ago
By DDD
Atomfall guide: item locations, quest guides, and tips
1 months ago
By DDD
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
