JavaScript中常用的方法汇总
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') {
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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/11/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
