封裝的前端經常使用工具函數

時間 2019-12-10

原文原文鏈接

@desc 樹狀數據結構

// 使用示例代碼：
list: [{id: 1, pid: 0, name: 11}, {id: 2, pid: 1, name: 2}]
getTreeArr({ key: 'id', pKey: 'pid', data: list })
result: [
    {id: 1, pid: 0, name: 11, children: [
        {id: 2, pid: 1, name: 2}
    ]}
]
 */
/**
 * 將一級的數據結構處理成樹狀數據結構
 * @param {Object} obj {key, pKey, data}
 *  @param obj.key  字段名稱 好比id
 *  @param obj.pKey 父字段名稱 好比 pid
 *  @param obj.rootPValue 根節點的父字段的值
 *  @param obj.data 須要處理的數據
 *  @param obj.jsonData 是否深複製數據（默認是true）
 * @return {Array} arr
   */
 function getTreeArr(obj) {
    if (!Array.isArray(obj.data)) {
      console.log('getTreeArr=>請傳入數組')
      return []
    }
    obj.jsonData = obj.jsonData === false ? obj.jsonData : true
    const arr = obj.jsonData ? JSON.parse(JSON.stringify(obj.data)) : obj.data
    const arr1 = []
    // 將數據處理成數狀結構
    arr.forEach(item => {
      let index = 0
      item.children = []
      arr.forEach(item1 => {
        // 獲得樹結構關係
        if (item[obj.key] === item1[obj.pKey]) {
          item.children.push(item1)
        }
        // 判斷根節點
        if (item1[obj.key] !== item[obj.pKey]) {
          index++
        }
      })
      // 沒傳入根節點，根據當前數據結構獲得根節點
      if (!('rootPValue' in obj) && index === arr.length) {
        arr1.push(item)
      }
    })
    // 傳入根節點，根據傳入的根節點組成樹結構
    if ('rootPValue' in obj) {
      arr.forEach(item => {
        if (item[obj.pKey] === obj.rootPValue) {
          arr1.push(item)
        }
      })
    }
    return arr1
  }
複製代碼

@desc 保留n位小數

function toFixed(val, num) {
    val = parseFloat(val);
    if (val) {
        val = parseFloat(val.toFixed(num || 1));
    } else {
        val = 0;
    }
    return val;
}
複製代碼

@desc判斷是不是 null, '', undefined

function isNot(val) {
    if (val === null || val === '' || val === undefined) {
        return true;
    } else {
        return false;
    }
}


複製代碼

@desc設置本地緩存

function setStorage(key, obj) {
   if (typeof obj === 'string') {
       localStorage.setItem(key, obj);
   } else {
       localStorage.setItem(key, JSON.stringify(obj));
   }
}

/**
* 獲取
*/
function getStorage(key) {
   let val = localStorage.getItem(key);
   try {
       return JSON.parse(val);
   } catch (e) {
       return val;
   }
}

/**
* 刪除， 若是不傳值，刪除全部
*/
function clearStorage(key) {
   if (key) {
       localStorage.removeItem(key);
   } else {
       localStorage.clear();
   }
}
複製代碼

@desc 深拷貝，支持常見類型

@param {Any} values

function deepClone(values) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == values || "object" != typeof values) return values;

    // Handle Date
    if (values instanceof Date) {
        copy = new Date();
        copy.setTime(values.getTime());
        return copy;
    }

    // Handle Array
    if (values instanceof Array) {
        copy = [];
        for (var i = 0, len = values.length; i < len; i++) {
            copy[i] = deepClone(values[i]);
        }
        return copy;
    }

    // Handle Object
    if (values instanceof Object) {
        copy = {};
        for (var attr in values) {
            if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy values! Its type isn't supported.");
}
複製代碼

@desc 獲取操做系統類型

@return {String}

function getOS() {
    var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
    var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
    var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';

    if (/mac/i.test(appVersion)) return 'MacOSX'
    if (/win/i.test(appVersion)) return 'windows'
    if (/linux/i.test(appVersion)) return 'linux'
    if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) 'ios'
    if (/android/i.test(userAgent)) return 'android'
    if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'
}
複製代碼

@desc 獲取瀏覽器類型和版本

@return {String}

function getExplore() {
    var sys = {},
        ua = navigator.userAgent.toLowerCase(),
        s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
        (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
        (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
        (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
        (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
        (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
        (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
    // 根據關係進行判斷
    if (sys.ie) return ('IE: ' + sys.ie)
    if (sys.edge) return ('EDGE: ' + sys.edge)
    if (sys.firefox) return ('Firefox: ' + sys.firefox)
    if (sys.chrome) return ('Chrome: ' + sys.chrome)
    if (sys.opera) return ('Opera: ' + sys.opera)
    if (sys.safari) return ('Safari: ' + sys.safari)
    return 'Unkonwn'
}
複製代碼

@desc url參數轉對象

@param {String} url default: window.location.href
@return {Object}

function parseQueryString(url) {
    url = url == null ? window.location.href : url
    var search = url.substring(url.lastIndexOf('?') + 1)
    if (!search) {
        return {}
    }
    return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}') } 複製代碼

@desc 隨機生成顏色

@return {String}

function randomColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}
複製代碼

desc 生成指定範圍隨機數

@param {Number} min
@param {Number} max
@return {Number}

function randomNum(min, max) {
    return Math.floor(min + Math.random() * (max - min));
}
複製代碼

@desc 格式化時間

function formatDate(date) {
    date = new Date(date);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    var h = date.getHours();
    var m1 = date.getMinutes();
    var s = date.getSeconds();
    m = m < 10 ? ("0" + m) : m;
    d = d < 10 ? ("0" + d) : d;
    return y + "-" + m + "-" + d + " " + h + ":" + m1 + ":" + s;
}
複製代碼

@desc 獲取當前時間

function getNowFormatDate() {
    var date = new Date();
    var seperator1 = '/';
    var seperator2 = ':';
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = '0' + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
        " " + date.getHours() + seperator2 + date.getMinutes() +
        seperator2 + date.getSeconds();
    return currentdate;
}
複製代碼