常用方法封装

参考自 https://www.jianshu.com/p/cc01443d1359

1. 获取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'}

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);
}

3. 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);
    }
}

4. 深拷贝

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
}

5. 元素绑定事件

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)
})

6. 防抖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)
}))

7. 节流
   设定一个时间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)
}))

8. requestAnimFrame兼容性方法

    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

9. cancelAnimFrame兼容性方法

window.cancelAnimFrame = (function () {
    return window.cancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        function (id) {
            window.clearTimeout(id);
        };
})();

10. 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