前端常用工具函数及Chrome Devtools常用调试技巧总结-一一网

一、常用工具函数

（1）日期格式化

有些时候，可能在一个项目里，后端返回的日期格式并不是我们需要的格式，而又不想因此而引入一个大小有10多k的moment.js，这种情况下，我们可以考虑自己封装一个日期格式化函数。

/**
  * @description 日期格式化，只需传入时间戳或者时间格式的字符串及要转换的时间格式
  * @param {Number} timestamp 时间戳或者时间格式的字符串
  * @param {String} format 时间格式，默认YYYY-MM-DD hh:mm:ss
  * @return {string} str 例如YYYY-MM-DD hh:mm:ss
  */
export const dateFmt = (timeStamp = Date.now(), format = 'YYYY-MM-DD hh:mm:ss') => {
    let date = new Date(timeStamp)
    let formatNumber = (n) => n < 10 ? ('0' + n) : n
    let str = format
        .replace('YYYY', date.getFullYear())
        .replace('MM', formatNumber(date.getMonth() + 1))
        .replace('DD', formatNumber(date.getDate()))
        .replace('hh', formatNumber(date.getHours()))
        .replace('mm', formatNumber(date.getMinutes()))
        .replace('ss', formatNumber(date.getSeconds()))
    return str
}
// 使用
dateFmt() // 默认返回当前时间，格式为 YYYY-MM-DD hh:mm:ss "2020-09-23 14:42:54"
dateFmt('2020-09-23', 'YYYY/MM/DD') // 2020/09/23
dateFmt(1600843532000) // 2020-09-23 14:45:32
复制代码

（2） localstorage和cookie的设置与读取

localstorage：

/**
  * @description 设置本地localStorage存储(sessionStorage同理)
  * @name {String} 数据对象的key属性
  */
export function setStorage(key, data) {
  let storage = window.localStorage
  storage.setItem(key, JSON.stringify(data))
}
export function getStorage(key) {
  let storage = window.localStorage
  return JSON.parse(storage.getItem(key))
}
export const localStorageRemove = (key) => {
  localStorage.removeItem(key)
}
复制代码

cookie操作方法

/**
 * @description cookie操作方法
 * @param {String} key 属性
 * @param {*} value 值
 * @param String expiresTime 过期时间
 */
// 添加
export function setCookie(key, value, expiresTime) {
    const d = new Date()
    d.setTime(d.getTime() + expiresTime)
    document.cookie = `${key}=${value}; expires=${d.toUTCString()}`
}
// 获取
export function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}
// 删除
export function clearCookie(key) {
    cookieUtils.setCookie(key, '', -1)
    // document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`
}
复制代码

（3） url参数读取

/**
* 获取url参数字符串
* @param {将要获取的url参数字符串} variable
*/
export function getSearchQuerys(variable)  {
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
复制代码

（4）生成唯一标识

export function uuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
    s[8] = s[13] = s[18] = s[23] = "-";

    var uuid = s.join("");
    return uuid;
}
uuid() // "ffb7cefd-02cb-4853-8238-c0292cf988d5"
复制代码

二、 Chrome Devtools常用调试技巧

（1）重新发起xhr请求

在和后端联调的时候，有时候可能会重新发送一个ajax请求，以往的做法，我们就直接刷新页面来请求了，但是其实chorme为我们提供了Replay XHR重新发送请求的方式，这样对于我们开发效率的提升是有所帮助的。

（2）copy()

在调试的过程中，我们有可能会对console控制台打印出来的一些json格式的数据结构进行复制，这时候就可以用到copy()函数了，执行完即已经在剪切板中了，直接粘贴即可。
如果在console中打印了一堆数据，想对这堆数据做额外的操作，可以将它存储为一个全局变量。只需要右击它，并选择 “Store as global variable”选项。第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，第三次 … 。通过使用这些变量来操作对应的数据，不用再担心影响到他们原来的值。

640 (1).gif