1. 获取指定Cookie的方法
function getCookie(cookieName){
var cookieValue="";
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
var arr= cookie.split('=');
if (arr[0].replace(" ",'') == cookieName) {
cookieValue = arr[1];
break;
}
};
return cookieValue;
};
}2. 获取当前元素字符串的方法
function nodeToString (node) {
var tempNode = document.createElement("div");
tempNode.appendChild(node.cloneNode(true));
var str = tempNode.innerHTML;
tempNode = node = null;
return str;
}3. 获取URL指定参数的方法
function getQueryParameter(parameter) {
var query = window.location.search.substring(1);
var arr = query.split("&");
for (var i = 0; i < arr.length; i++) {
var obj = arr[i].split("=");
if (obj[0] == parameter) {
return obj[1];
}
}
return (false);
}4. 将对象转为URL参数
function urlEncode(param, key, encode) {
if (param == null) {
return "";
}
var paramStr = "";
var t = typeof param;
if (t == "string" || t == "number" || t == "boolean") {
if(param.toString()!=""){
paramStr +="&" +key +"=" +(encode == null || encode? encodeURIComponent(param): param);
};
} else {
for (var i in param) {
var k = key == null? i: key +(param instanceof Array? "[" + i + "]": "." + i);
paramStr += urlEncode(param[i], k, encode);
}
};
return paramStr;
};5. 绑定事件的方法，适用于各个浏览器
function addBind(obj, eventType, callBack) {
if (obj.addEventListener) {
obj.addEventListener(eventType, callBack, false);
}else if (window.attachEvent) {
obj.attachEvent('on' + eventType, callBack);
}else {
obj['on' + eventType] = callBack;
}
};
addBind(document, 'click', bodyClick);6. 移除事件的方法，适用于各个浏览器
function moveBind (objId, eventType, callBack) {
var obj = document.getElementById(objId);
if (obj.removeEventListener) {
obj.removeEventListener(eventType, callBack, false);
} else if (window.detachEvent) {
obj.detachEvent('on' + eventType, callBack);
} else {
obj['on' + eventType] = null;
}
}7. 清空加载到顶部的JS引用
function clearHeadJs (src) {
var js = document.getElementsByTagName('head')[0].children;
var obj = null;
for (var i = 0; i < js.length; i++) {
if (js[i].tagName.toLowerCase() == "SCRIPT" && js[i].attributes['src'].value.indexOf(src) > 0) {
obj = js[i];
break;
}
}
document.getElementsByTagName('head')[0].removeChild(obj);
};8. 防抖函数
原理： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
适用场景：
1. 按钮提交场景：防止多次提交按钮，只执行最后提交的一次；
2. 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次；
3. 搜索联想词场景；
代码：
const debounce = (fn,delay)=>{
let timer = null;
return (...args)=>{
clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args)
},delay)
}
}示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖函数</title>
</head>
<body>
<input type="text" class="int" onkeydown="down()">
<script>
function down() {
debounce(() => {
console.log('打印输出')
}, 2000)()
}
const debounce = (fn, delay) => {
let timer = null;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
</script>
</body>
</html>9. 节流函数
原理： 规定在一单位时间内。只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
适用场景：
1. 拖拽场景：固定时间只执行一次，防止超高频次触发位置变动；
2. 缩放场景：监控浏览器resize；
3. 动画场景：避免短时间内多次触发动画引起的性能问题。
代码：
const throttle = (fn, delay = 500) => {
let flag = true;
return (...args) => {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, args)
}, delay);
}
}实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节流函数</title>
</head>
<body>
<script>
// 节流函数
const throttle = (fn, delay = 30000) => {
let flag = true;
return (...args) => {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, args)
}, delay);
}
}
// 浏览器窗口缩放
window.onresize = function () {
throttle(() => {
console.log("打印输出")
})()
}
</script>
</body>
</html>10. 跨域下载文件
downloadFile(url) {
url = url.replace(/\\/g, "/");
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
// 文件下载进度
xhr.onprogress = (res) => {
this.loadingTip ="源文件下载中: " +((res.loaded / res.total) * 100).toFixed(2) +"%";
};
xhr.onload = () => {
this.loadingTip = "";
this.loading = false;
if (xhr.status === 200) {
// 获取文件blob数据并保存
var num = url.lastIndexOf("/") + 1;
//把参数和文件名分割开
var fileName = url.substring(num).split("?")[0];
var exportBlob = new Blob([xhr.response]);
var saveLink = document.createElementNS("http://www.w3.org/1999/xhtml","a");
saveLink.href = URL.createObjectURL(exportBlob);
saveLink.download = fileName;
saveLink.click();
}
};
this.loading = true;
xhr.send();
},11. 对象数组中按某个对象的属性排序
// key:用于排序的数组的key值
// desc:布尔值，为true是升序排序，false是降序排序
function compare(key, desc) {
return function(a, b) {
let value1 = a[key];
let value2 = b[key];
// 升序排列
if (desc == true) {
return value1 - value2;
// 降序排列
} else {
return value2 - value1;
}
};
}
// 调用方法
// arr.sort(compare('age',false));12. 在本文域中光标的位置插入指定的内容
// 在光标的位置插入内容
function insertAtCursor(myField, myValue) {
// IE 浏览器
if (document.selection) {
myField.focus();
range = document.selection.createRange();
range.text = myValue;
range.select();
// FireFox、Chrome等
} else if (myField.selectionStart || myField.selectionStart == '0') {
var start = myField.selectionStart;
var end = myField.selectionEnd;
// 保存滚动条
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, start) + myValue + myField.value.substring(end, myField.value.length);
if (restoreTop > 0) {
myField.scrollTop = restoreTop;
};
myField.focus();
myField.selectionStart = start + myValue.length;
myField.selectionEnd = start + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
};
