阅读 565

前端常用工具函数及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重新发送请求的方式,这样对于我们开发效率的提升是有所帮助的。

640.gif

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

640 (1).gif

(3)keys/values

这个是Devtools提供的快速查看一个对象的key、values的API。用起来也很简单:

640 (1).png

(4)table

Devtools提供的用于将对象数组记录为表格的API

640.webp

(5)自定义代码片段 Snippets

在平常开发过程中,我们经常有些 JavaScript 的代码想在 Chrome Devtools中调试,直接在 console下写比较麻烦,或者我们经常有些代码片段想保存起来,每次打开Devtools都能获取到这些代码片段,而不用再去搜索,正好Chrome Devtool就提供了这种功能。

如图所示,在 Sources 这个tab栏下,有个 Snippets 标签,在里面可以添加一些常用的代码片段。

640.png

文章分类
前端
文章标签