js常用的一些自定义函数、方法

/**
 * @function 判断数据类型
 * @param {any} o 对应的数据
 * @example
 * types("") // "string"
types({}); // "object"
types([]); // "array"
types(100); // "number"
types(null); // "null"
types(); // "undefined"
types(/abcd/); // "regex"
types(new Date()); // "date"
 * 
 */
const types = (o) => {
  var s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};


/**
* @function 获取浏览器地址的参数
* @param {String} [name=''] 获取值的key,默认为空,为空时，函数返回json对象
* @param {String} [url=window.location.href] 地址，默认为浏览器的url
* @example  getParams('aa', 'https://www.baidu.com?aa=101')       //101
*/
const getParams = (name = '', url = window.location.href) => {
  let endVal = '';
  if (url.indexOf("?") != -1) {   //判断url中有没有出现?
    let arrs = url.substring(url.indexOf("?") + 1).split('&');  //截取字符串，获取到?后面的那部分内容;以&符号为准，分割成数组
    arrs = arrs.filter(item => item);     //原有数组过滤为空的值
    let obj = {};
    for (let i = 0; i < arrs.length; i++) {
      let index = arrs[i].indexOf("=");
      let keys = arrs[i].substring(0, index);       //第一个等号前面的那部分
      let vals = arrs[i].substring(index + 1);      //第一个等号后面的内容
      obj[keys] = decodeURI(vals);    //解码输出,值含有中文字符的情况
    }
    if (arrs.length > 0) {  //先判断数组是不是为空，在判断name是不是有值传过来
      if (name) {
        endVal = obj[name] || '';
      } else {
        endVal = obj;
      }
    }
  }
  return endVal;
}


/**
 * @function 地址栏追加参数,不刷新页面,不增加历史记录
 * @param {String} key 参数的名称
 * @param {String|*} value 参数的值
 * @param {String} url 地址,使用的是浏览器的当前地址
 */
const updateQueryStringParameter = (key, value, url = window.location.href) => {
  let re, separator, newurl;
  if (!key || !value) {
    newurl = url;
  }
  re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  separator = url.indexOf('?') !== -1 ? "&" : "?";
  if (url.match(re)) {
    newurl = url.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    newurl = url + separator + key + "=" + value;
  }
  //向当前url添加参数，没有历史记录
  window.history.replaceState({
    path: newurl
  }, '', newurl);

}




/**
* @function 防抖函数，规定时间内点击多次，只执行最后一次
* @method debounce(fn,delay);
* @param {function} fn       需要执行的函数
* @param {number} [delay=300]     等待时间（毫秒）,默认等待时间为300毫秒,为0的话就不需要防抖函数了
* @example 
  const func = () => {
      console.log("1234567");
  };
  const dianji = debounce(func, 500);
*/
const debounce = (fn, delay = 300) => {
  let timer = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    // 再次执行的时候把前一个 setTimeout clear 清空掉
    clearTimeout(timer);
    // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
    // timer = setTimeout(fn, delay) // 简化写法
  };
}

/**
* @function 节流函数，连续点击多次，规定时间内只执行一次
* @method throttle(fn,delay);
* @param {function} fn       需要执行的函数
* @param {number} [delay=300]     等待时间（毫秒）,默认等待时间为300毫秒
* @example 
  const func = (aa) => {
      console.log(aa);
  };
  const dianji = throttle(()=>{func("12345")}, 500);
*/
const throttle = (fn, delay = 300) => {
  let timer = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    // 在函数开头判断timer标记是否为null,只有为null时才让他执行一次里面的函数
    if (!timer) {
      // 将外部传入的函数的执行放在setTimeout中
      timer = setTimeout(() => {
        // 调用传入的函数fn
        // 最后在setTimeout执行完毕后再把标记timer设置为null,表示可以执行下一次循环了。
        fn.apply(this, arguments);    //或者使用fn()
        timer = null;
      }, delay);
    }
  };
}


/** 
* @description 时间戳转化为年 月 日 时 分 秒 
* @method formatTime(num,format)
* @param {number} [num = new Date().getTime()] 时间戳,默认使用当前时间戳, new Date().getTime(); 获取当前时间戳（毫秒）
* @param {string} [format='YYYY-mm-dd HH:MM:SS'] 时间格式 默认'YYYY-mm-dd HH:MM:SS' ,更改只需替换中间连接符号就行'YYYY年mm月dd日 HH时MM分SS秒'
* @example 
* var sjc = 1472048779952; //js一般获取的时间戳是13位，PHP一般是10位
* formatTime(sjc, 'YYYY-mm-dd HH:MM:SS')
*/
const formatTime = (num = new Date().getTime(), format = "YYYY-mm-dd HH:MM:SS") => {
  let ret, date, renum;
  // 处理时间戳，js一般获取的时间戳是13位，PHP一般是10位,根据实际情况做判断处理
  if (num.toString().length == 10) {
    date = new Date(parseInt(num) * 1000);
  } else if (num.toString().length == 13) {
    date = new Date(parseInt(num));
  } else {
    date = new Date(parseInt(num));
  }
  const opt = {
    "Y+": date.getFullYear().toString(), // 年
    "m+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "M+": date.getMinutes().toString(), // 分
    "S+": date.getSeconds().toString() // 秒
    // 目前用的是这六种符号,有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (var k in opt) {
    ret = new RegExp("(" + k + ")").exec(format);
    if (ret) {
      renum = (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")) //根据复数前面是否补零,如“mm”补零，单“m”前面不补零
      format = format.replace(ret[1], renum)
    };
  };
  return format;
};


/**
* @function 发布时间显示函数
* @method timeFormat(time)
* @param {number} time 时间戳（必填）
* @example  var text=timeFormat(1472048779952);
@ 1、< 60s, 显示为“刚刚”
@ 2、>= 1min && < 60 min, 显示与当前时间差“XX分钟前”
@ 3、>= 60min && < 1day, 显示与当前时间差“今天 XX:XX”
@ 4、>= 1day && < 1year, 显示日期“XX月XX日 XX:XX”
@ 5、>= 1year, 显示具体日期“XXXX年XX月XX日 XX:XX”
*/
const timeFormat = (time) => {
  let date;
  if (time) {
    if (time.toString().length == 10) {
      date = new Date(parseInt(time) * 1000);
    } else if (time.toString().length == 13) {
      date = new Date(parseInt(time));
    } else {
      date = new Date(parseInt(time));
    }

    let curDate = new Date(),
      year = date.getFullYear(),
      month = date.getMonth() + 1,
      day = date.getDate(),
      hour = date.getHours(),
      minute = date.getMinutes(),
      curYear = curDate.getFullYear(),
      curHour = curDate.getHours(),
      timeStr;

    if (year < curYear) {
      timeStr = year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;
    } else {
      let pastTime = curDate - date,
        pastH = pastTime / 3600000;

      if (pastH > curHour) {
        timeStr = month + '月' + day + '日 ' + hour + ':' + minute;
      } else if (pastH >= 1) {
        timeStr = '今天 ' + hour + ':' + minute + '分';
      } else {
        let pastM = curDate.getMinutes() - minute;
        if (pastM > 1) {
          timeStr = pastM + '分钟前';
        } else {
          timeStr = '刚刚';
        }
      }
    }
    return timeStr;
  }

}

/**
* @function 字符串截取、字符串替换（例如手机号、身份证等号码隐藏）
* @method strCut(str,start,len,rep)
* @param {string}  str	为去要截取的字符串(类型为字符串)
* @param {number}  start	为从第几位开始截取(不是下标)
* @param {number}  [len]	截取的长度(不填从开始截取到最后)
* @param {string}  [rep='']	需要替换的字符（例如："*"）默认为空
* @example  var value=strCut('18011223344',4,4,'*')
*/
const strCut = (str, start, len, rep = '') => {
  if (str && (str.length - start) > 0) {	//判断开始截取的位置,字符串的长度需大于截取的长度
    let repnum = '', strnum = '';
    if (len) {
      strnum = (str.length - start) > len ? len : (str.length - start);  //到最后能够替换字符的个数
    } else {
      strnum = str.length - start;
    }

    for (let i = 0; i < strnum; i++) {
      repnum += rep
    }
    let strre = str.substr(start - 1, len);	//截取（start-1）对应截取的位置
    let strend = str.replace(strre, repnum);	//替换
    return strend;
  } else {
    return str;
  }
}

/**
* @function 去除字符串左侧指定字符
* @method  ltrim(str,char)
* @param {string} str  需要去除指定字符的字符串
* @param {string} [char] 左侧需要去除的字符,（不填默认去除空格）
* @example ltrim("&&&1234a&11&&","&")    //1234a&11&&
*/
const ltrim = (str, char = '') => {
  let lstr = str.replace(new RegExp('^\\s+', 'g'), '');    //默认去除左侧空格
  if (char) {
    lstr = str.replace(new RegExp('^[' + char + ']+', 'g'), '');
  }
  return lstr;
}

/**
* @function 去除字符串右侧指定字符
* @method  rtrim(str,char)
* @param {string} str  需要去除指定字符的字符串
* @param {string} [char=''] 右侧需要去除的字符,（不填默认去除空格）
* @example rtrim("&&&1234a&11&&","&")    //&&&1234a&11
*/
const rtrim = (str, char = '') => {
  let rstr = str.replace(new RegExp('\\s+$', 'g'), '');   //默认去除右侧空格
  if (char) {
    rstr = str.replace(new RegExp('[' + char + ']+$', 'g'), '');
  }
  return rstr;
}

/**
* @function 去除字符串左右两边指定字符,直接调用上面ltrim()和rtrim()方法
* @method  trim(str,char)
* @param {string} str  需要去除指定字符的字符串
* @param {string} [char=''] 左侧需要去除的字符,（不填默认去除两边空格）
* @example trim("&&&1234a&11&&","&")    //1234a&11
*/
const trim = (str, char = '') => {
  let endstr = str.trim();    //默认去除左右两边空格
  if (char) {
    endstr = rtrim(ltrim(str, char), char);
  }
  return endstr;
}



/**
* 判断浏览器函数,判断用户是PC端、移动端
* @method isMobile()
*/
function isMobile() {
  if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    return true;  // 移动端
  } else {
    return false;  // PC端
  }
}



/**
* 简单封装ajax，用于请求数据,未作跨域处理，
* 参数说明：
* @param {object} opts: {'可选参数'}
* @param {string} method: 请求方式:GET/POST,默认值:'GET';
* @param {string} url:    发送请求的地址, 默认值: 当前页地址;
* @param {any} data: 发送给后台的数据, string,json;
* @param {boolean} async: 是否异步:true/false,默认值:true;
* @param {boolean} cache: 是否缓存：true/false,默认值:true;
* @param {string} contentType: HTTP头信息，默认值：'application/x-www-form-urlencoded';
* @param {function} success: 请求成功后的回调函数;
* @param {function} error: 请求失败后的回调函数;
* @example 
  ajax({
    url: "http://poetry.apiopen.top/sentences",
    success: function (res) {
      console.log(res);
    },
  })
*/
const ajax = (opts) => {
  //一.设置默认参数
  var defaults = {
    method: 'GET',
    url: '',
    data: '',
    async: true,
    cache: true,
    contentType: 'application/x-www-form-urlencoded',
    success: function () { },
    error: function () { }
  };

  //二.用户参数覆盖默认参数，或者使用(es6扩展运算符)：defaults={ ...defaults, ...opts };  
  for (var key in opts) {
    defaults[key] = opts[key];
  }

  //三.对数据进行处理
  if (typeof defaults.data === 'object') { //处理 data
    var str = '';
    for (var key in defaults.data) {
      str += key + '=' + defaults.data[key] + '&';
    }
    defaults.data = str.substring(0, str.length - 1);
  }

  defaults.method = defaults.method.toUpperCase(); //处理 method,统一转成大写,方便后面处理
  defaults.cache = defaults.cache ? '' : '&' + new Date().getTime(); //处理 cache

  if (defaults.method === 'GET' && (defaults.data || defaults.cache)) {
    defaults.url += '?' + defaults.data + defaults.cache; //处理 url 
  }


  //四.开始编写ajax
  //1.创建ajax对象
  var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  //2.和服务器建立联系，告诉服务器你要取什么文件
  oXhr.open(defaults.method, defaults.url, defaults.async);
  //3.发送请求
  if (defaults.method === 'GET')
    oXhr.send(null);
  else {
    oXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //post请求会变为charset=UTF-8形式,这里重新定义请求头
    oXhr.send(defaults.data);
  }


  //4.等待服务器回应
  oXhr.onreadystatechange = function () {
    if (oXhr.readyState === 4) {
      if (oXhr.status === 200) {
        var endData;
        try {
          endData = eval('(' + oXhr.responseText + ')');
        } catch (e) {
          endData = oXhr.responseText;
        }
        defaults.success.call(oXhr, endData);
      } else {
        defaults.error();
      }
    }
  };
}

/**
* @function 回到顶部
* @param {string} el 需要返回顶部的标签元素,默认是DOM页面
* @example goTop(".el-scrollbar .el-scrollbar__wrap")
*/
const goTop = (el) => {
  let timer = '';
  cancelAnimationFrame(timer);
  timer = requestAnimationFrame(function fn() {
    let oTop, dom;
    //需要重新获取元素、滚动条高度
    if (el) {
      dom = document.querySelector(el);
      oTop = dom.scrollTop;
    } else {
      dom = window;
      oTop = document.body.scrollTop || document.documentElement.scrollTop;
    }

    if (oTop > 0) {
      // dom.scrollTo(0, (oTop - 100));
      dom.scrollTo(0, (oTop - oTop / 10));
      dom.onmousewheel = function () { return false }
      timer = requestAnimationFrame(fn);
    } else {
      dom.onmousewheel = function () { return true }
      cancelAnimationFrame(timer);
    }
  });
}


/**
* @function 设置localStorage,思路：封装成一个json数据存进去，保存时间、过期时间、保存的数据
* @method setStorage(name)
* @param {string} name  保存数据的key值,必填
* @param {any} [value='']   需要保存的数据
* @param {number} [time=0]   过期时间,以毫秒为单位,默认永不过期
* @example setStorage("aa","123456",5000)
*/
const setStorage = (name, value = '', time = 0) => {
  time = isNaN(time - 0) ? 0 : time - 0;    //转换成数字,字符串类型的数字也转成数字
  time = time > 0 ? time : 0;     //有负数的情况

  let obj = {
    jm_save_value: value,
    jm_save_time: time,
    jm_save_startTime: new Date().getTime()//记录何时将值存入缓存，毫秒级
  }
  if (name) {
    localStorage.setItem(name, JSON.stringify(obj));
  } else {
    console.log("请先设置name名");
  }
}

/**
* @function 获取localStorage
* @method getStorage(name)
* @param {string} name  保存数据的key值,必填
* @example getStorage("aa")
*/
const getStorage = (name) => {
  let item = localStorage.getItem(name);
  if (item) {
    //先尝试进行json字符串转为对象,直接通过localStorage.setItem()存单个字符串的情况
    try {
      item = JSON.parse(item);
    } catch (error) {
      //如果不行就不是json的字符串，就直接返回
      item = item;
    }

    //  判断有没有设置过期时间、保存数据的格式
    //先判断设置时的时间大于0，是否为数字,过期时间是否也为数字
    if ((item['jm_save_startTime'] > 0) && (!isNaN(item['jm_save_startTime'])) && (!isNaN(item['jm_save_time']))) {

      let date = new Date().getTime();    //获取当前时间
      if (item['jm_save_time'] == 0) {   //等于0永不过期
        return item['jm_save_value'];
      } else if (item['jm_save_time'] + item['jm_save_startTime'] > date) {    //开始时间+保存时间如果大于当前时间,（未过期）就返回值，否则清空
        return item['jm_save_value'];
      } else {
        localStorage.removeItem(name);
        return false;
      }

    } else {
      //如果没有设置失效时间，直接返回值
      return item;
    }
  } else {
    return false;
  }
}


/**
* @function 清除localStorage
* @method removeStorage(name)
* @param {string} [name]  保存数据的key值,不填清空所有缓存
* @example removeStorage("aa")
*/
const removeStorage = (name) => {
  if (name) { //有参数清除单条数据
    localStorage.removeItem(name);
  } else {    //无参数清除所有缓存数据
    localStorage.clear();
  }
}


/**
* @function 生成特效文字
* @param {String} [words=''] 需要生成特效的一段文字,默认为空
* @return   返回html标签内容
* @example  effectText('张三')    //<span style="color: #30c26c;font-size: 16px;">张</span><span style="color: #fdb853;font-size: 18px;">三</span>
*/
const effectText = (words = '') => {
  words = [...words]
  let endText = "";
  let arrSize = new Array("12px", "14px", "16px", "18px", "24px", "32px", "48px");    //文字大小
  for (let time = 0; time <= (words.length - 1); time++) {
    if (words[time] != " ") {
      let col = "#" + Math.random().toString(16).slice(-6);  //随机生成hex颜色
      let i = Math.floor((Math.random() * arrSize.length));
      endText += `<span style="color: ${col};font-size: ${arrSize[i]};">${words[time]}</span>`;
    }
  }
  return endText;
}
/**
 * @function 低版本浏览器下,提示用户安装新版浏览器,跳转到下载浏览器页面
 * 
 */
const newBrowser = () => {
  if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
    // https://browsehappy.com/
    window.location.href = "https://support.dmeng.net/upgrade-your-browser.html?referrer=" + location.href;
  }
}

/**
 * @function iframe打开页面不增加浏览器历史记录，(新iframe替换原有iframe,并更换src)
 * @param {String} el iframe标签的类名、属性等等,(例如'#iframe'、'.iframe'、'iframe[name=iframe]')
 * @param {String} url 需要替换的src地址
 */
const openIframe = (el, url) => {
  let oldIframe = document.querySelectorAll(el)[0];
  // oldIframe.contentWindow.location.replace(url);   //方案一可以通过replace来将url替换而不是push到浏览器历史中
  // 方案一,使用新的iframe标签
  if (oldIframe && url) {
    let iframe = oldIframe.cloneNode(true);     //深拷贝旧iframe得到一个新iframe
    iframe.src = url;   //替换src
    oldIframe.parentNode.insertBefore(iframe, oldIframe);//在oldIframe之前添加新的iframe

    //移除旧的iframe
    oldIframe.parentNode.removeChild(oldIframe);
  }
}

/**
* 提示框弹窗
*/
var jmMess = {
  timer: '',  //记录定时器状态
  /**
   * 提示框
   * @method jmMess.msg(value,time,callback)
   * @param {string} value 提示的文字信息
   * @param {string|number} time 弹窗显示的时间,单位ms,(多久关闭弹窗)
   * @param {function} callback 回调函数，弹窗关闭后执行
   * @example 
   * jmMess.msg("文字",5000,function(){})
   */
  msg: function (value, time, callback) {
    // 参数梳理
    if (typeof time === "function") {
      callback = time
    } else if (!isNaN(time)) {
      time = time - 0 >= 0 ? time - 0 : 3000;
    } else {
      time = 3000;
    }
    //清除定时器
    clearTimeout(this.timer);
    //移除提示框
    let old = document.querySelectorAll('[data-jmTips="jmTips"]')[0];
    if (old) {
      document.body.removeChild(old);
    }

    //创建div并设置样式和提示文字内容
    let div = document.createElement('div');
    div.style = 'width: 200px;position: fixed;top: 40%;left:50%;transform: translateX(-50%);text-align: center;z-index:9999;background-color: rgba(0, 0, 0,0.6);font-size: 14px;line-height:1.5;color: #fff;padding: 10px 15px;border-radius: 5px;';
    div.innerHTML = value;
    // div添加属性(标识),追加到DOM
    div.setAttribute("data-jmTips", "jmTips");
    document.body.appendChild(div);

    // 清除提示
    this.timer = setTimeout(function () {
      document.body.removeChild(div);
      if (typeof callback === "function") {
        // 可以组装数据作为回调函数的参数返回使用
        // var mss = { state: 'success' };
        // callback(mss);
        callback();
      }
    }, time);

  }
}