First, common tool functions

(1) Date formatting

There may be times in a project where the date format returned from the back end is not the format we want, and we don’t want to introduce a moment.js with a size of 10 + K, in which case we can consider wrapping a date formatting function ourselves.

/** * @description date formatting, @param {Number} timestamp timestamp or time format String * @param {String} format Time format, Default YYYY-MM-DD hh: MM :ss * @return {string} STR Example 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} formatNumber(date.getseconds ()) return STR} Format: 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:32Copy the code
(2) Setting and reading of localstorage and cookie

Localstorage:

/** * @description set local localStorage (same as sessionStorage) * @name {String} data object key attribute */ 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) }Copy the code

Cookie operation method

/** * @description cookie operation method * @param {String} key attribute * @param {*} value Value * @param String expiresTime expiration time */ / add export function setCookie(key, value, expiresTime) { const d = new Date() d.setTime(d.getTime() + expiresTime) document.cookie = `${key}=${value}; ${d.outcString ()} '} 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()}` }Copy the code
(3) READ URL parameters
@param {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); }Copy the code
(4) Generate unique identifiers
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"
Copy the code

Chrome Devtools debugging tips

(1) Re-initiate the XHR request

In the past, we would simply refresh the page to make the request, but in fact, Chorme provides us with a way to Replay XHR to re-send the request, which is helpful to improve our development efficiency.

(2) the copy ()
  • The copy() function is used to copy jSON-formatted data structures printed by the console during debugging, and is already in the clipboard.
  • If you print a bunch of data in the Console and want to do something extra with the bunch of data, you can store it as a global variable. Just right click on it and select the “Store as Global Variable” option. It creates a variable called temp1 the first time, temp2 the second time, temp2 the third time… . By using these variables to manipulate the corresponding data, you don’t have to worry about affecting their original values.

(3) keys/values

This is the Devtools API for quickly viewing the key and values of an object. It’s also easy to use:

(4) the table

Devtools provides an API for logging an array of objects as a table

(5) Custom Snippets

During normal development, we often have JavaScript code that we want to debug in Chrome Devtools, which is a bit of a hassle to write directly on the console, or we often have code snippets that we want to save and get every time we open Devtools without having to search for them. Chrome Devtool provides just that.

Under the Sources TAB, as shown, there is a Snippets TAB where you can add common Snippets.