参考自 https://www.jianshu.com/p/cc01443d1359
- 获取url参数
function getUrlParams(url){
var href = url || window.location.href;
var hrefs = href.split('?');
if(hrefs[0] === href){ //没有参数
return null
}
var hrefarr = hrefs[1].split('#')[0].split('&');
var obj = {}
for(var i=0;i<hrefarr.length;i++){
var arr = hrefarr[i].split('=');
obj[arr[0]] = arr[1];
}
return obj
}
console.log(getUrlParams('http://localhost:8080/?a=1&c=2')); //{a: '1', c: '2'}
- 异步加载script
function loadScript(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);
}
- ajax请求
function doAjax(method, url, callback, data, flag) {
var xhr;
flag = flag || true;// 默认为true，如果是同步请求，页面会在请求数据时假死
method = method.toUpperCase();
// 1.创建XMLHttpRequest对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else { //兼容早期浏览器
xhr = ActiveXObject('Microsoft.XMLHttp');
}
// 2.监听状态变化
xhr.onreadystatechange = function () {
if (xhr.readystate === 4 && xhr.status === 200) {
// 5.读到响应数据
var data = JSON.parse(xhr.responseText);
callback(data);
}
}
// 3.建立连接,4发送请求
if (method == 'GET') {
var date = new Date(),
timer = date.getTime();
xhr.open('GET', url + '?' + data + '&timer' + timer, flag);
xhr.send()
} else if (method == 'POST') {
xhr.open('POST', url, flag);
xhr.setRequestHeader('Content-Type', 'application/json');//设置请求头
xhr.send(data);
}
}
- 深拷贝
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
//如果是值类型 和null直接返回
return obj
}
let result = null
if (obj instanceof Array) {
//是不是数组的实例
result = []
} else {
result = {}
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
//是不是自己的属性
result[key] = deepCopy(obj[key])
}
}
return result
}
- 元素绑定事件
function bindEvent(el,eventName,selector,fn){
if(fn == null){
fn = selector;
selector = null;
}
el.addEventListener(eventName,(e)=>{
const target = e.target;
console.log('event target',target.nodeName)
if(selector){//事件代理
if(target.matches(selector)){ //是否包含这个节点
fn.call(target,e)
}
}else{
fn.call(target,e)
}
})
}
const wrapEl = document.getElementById('wrap')
const btnsEl = document.getElementById('btns')
bindEvent(wrapEl,'click','a',function(event){
event.preventDefault();
console.log(this.nodeName)
})
bindEvent(btnsEl,'click',function(event){
const target = event.target
console.log(this.nodeName,this.className)
})
- 防抖debounce
设置一个间隔时间，比如500ms，那么500ms内，只有第一次按下有效，第一次之后的按下都视作无效。等到500ms到了，执行第一次按下的程序处理，第一个500ms限制结束，再按下就是另一个500ms限制了。
function debounce(fn,delay = 500){
let timer = null;//闭包中的
return function(e){
var _self = this;
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{//此处用箭头，不会改变this指向
fn.apply(_self,arguments)
timer = null
},delay)
}
}
//使用
const inputEl = document.getElementById('inputEl')
inputEl.addEventListener('keyup',debounce(function(e){
console.log(2,this,e)
}))
- 节流
设定一个时间500ms，500ms内不断按下只有第一次会立马执行，其它按下会视作无效
function throttle(handler, wait) {
var lastTime = 0;
return function (e) {
var nowTime = new Date().getTime();
if (nowTime - lastTime > wait) { //第一次会立马执行，本次时间离上次有效执行时间间隔大于指定时间，视作有效去执行
handler.apply(this, arguments);
lastTime = nowTime;
}
}
}
//使用
const drag = document.getElementById('drag')
drag.addEventListener('drag',throtter(function(e){
console.log(2,this,e)
}))
- requestAnimFrame兼容性方法
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
- cancelAnimFrame兼容性方法
window.cancelAnimFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
};
})();
- Date日期格式转换format
function formatDate(t, str) {
if(typeof t === 'number'){
t = new Date(t)
}
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]
});
}
//使用
console.log(formatDate(new Date(),'yyyy-MM-dd')); //2022-02-10
console.log(formatDate(new Date().getTime(),'yyyy-MM-dd')); //2022-02-10
