基於ES6/7/8/9封裝的工具函數(持續更新,力求精簡)

請求相關:前端

場景:json

後端接口路徑格式:後端

1 //後端請求接口格式
2 
3 //
4 
5 var url1= '/api/getUerInfo/{userId}/{roleId}'
6 
7 //
8 
9 var url2= '/api/getUerInfo'

後端需求前端傳參:api

1 //①不需求查詢參數,對url不作進一步的處理,直接返回
2 
3 //②須要傳遞查詢參數,也就是查詢參數須要拼接到url身上

需求:app

1 console.log(getUrl('/api/getUerInfo/{userId}/{roleId}',{userId:12,roleId:33}))//api/getUerInfo/12/33
2 
3 console.log(getUrl('/api/getUerInfo/{userId}/{roleId}',{userId:12,roleId:33,extraParam:'555'}))//api/getUerInfo/12/33
4 
5 console.log(getUrl('/api/getUerInfo/{userId}/{roleId}',{userId:12,roleId:33,extraParam:'555'},true))///api/getUerInfo/12/33?extraParam=555

方法:測試

 1 /**
 2  * 請求相關:
 3  * 
 4  *  @param {String}  URL: 模板路徑,例:'/uap/msg/announcementRecord/{sysId}/{tenantId}/{userId}' 或 '/uap/msg/announcementRecord'
 5  *  @param {Object}  params: 傳入的參數,包含路徑參數 或 不包含
 6  *  @param {Boolean} flag:是否拼接路徑和查詢參數
 7  * 
 8  *  PS:flag爲true時,必定是GET請求,GET請求才會拼接參數到URL後面
 9  */
10 
11 function getUrl(URL, params, flag=false) {
12     let url =/\{(\w+)\}/g.test(URL)?URL.replace(/\{(\w+)\}/g, (a, b) => {let tmp = params[b];delete params[b];return tmp}):URL
13     return flag? Object.keys(params).reduce((pre, cur) =>(pre += (pre === url ? '?' : '&') + `${cur}=${params[cur]}`), url): url
14 }

方法2:JSON 轉 fromDataurl

1 /**
2  *  JSON 轉 fromData
3  *  @param {Object} o 須要轉成formData 的對象
4  */
5 
6  function jsonToFromData(o){
7     return Object.keys(o).reduce((p, c) => !p.append(c, o[c]) && p, new FormData())
8  }

方法3:處理月份的回顯spa

1  /**
2  * 處理月份的回顯
3  * @param {Number} num 月份的數字
4  * @returns {string} 轉換後的漢字月份
5  */
6 function monthFilter (num) {
7     return num>0&&num<13? ['一','二','三','四','五','六','七','八','九','十','十一','十二'][num-1]+'月':'月'
8 }

方法4:處理星期的回顯code

/**
 * 處理星期的回顯
 * @param {Number} num 星期的數字
 * @returns {string} 轉換後的漢字星期
 */
function weekFilter (num) {
    return num>0&&num<8?'周'+['一','二','三','四','五','六','日'][num-1]:'周'
}

方法5:建立基於當前/指定時間的 過去 n 天時間(包含當天日期)orm

function getPassDays(n,s)  {
    return [...Array(n).keys()].map(days=>new Date((s?new Date(s):Date.now()) - 86400000 * days).toLocaleDateString()).map(item=>item.split(/\/|-/).map(i=>i.padStart(2,'0')).join('-'))
}



console.log(getPassDays(3)) //["2020-01-14", "2020-01-13", "2020-01-12"]  (博主測試時間)
console.log(getPassDays(3,1530975600000)) //["2018-07-07", "2018-07-06", "2018-07-05"] (指定時間)

方法5:獲取當前頁面路徑 或 指定路徑 上的 參數集合

1 /**
2  * 
3  * @param {String} url 指定一個url路徑字符串
4  * 
5  */
6 function getUrlParms(url){
7     return  (url?url:location.href).includes('?')?(url?url:location.href).split('?')[1].match(/([^&=]*)=([^&]*)/g).reduce((pre,cur)=> {pre[cur.split('=')[0]] = cur.split('=')[1];return pre},{}):{}
8 }

方法6:url 參數序列號

1 /**
2  * url 參數序列化
3  * @param {String} baseURL 
4  * @param {Object} params 
5  */
6 function serializationUrlParams(baseURL,params){
7     return Object.keys(params).reduce((pre,cur)=> pre += ((pre===baseURL? '?':'&')+`${cur}=${params[cur]}`),baseURL)
8 }

方法7:格式化時間

/**
 * 時間格式化
 */
function formatDate()  {
    let defaultFormat='yyyy-MM-dd hh:mm:ss'
    let defaultTimeValue = Date.now()
    let val,format;
    if(!arguments.length){//若是沒有傳參 默認
        val = defaultTimeValue
        format =defaultFormat
    }else if(arguments.length==1){//若是傳一個參數 根據類型
        if(typeof arguments[0] === 'string'){
            if(defaultFormat.includes(arguments[0])){
                val = defaultTimeValue
                format = arguments[0]
            }else{
                val = String(arguments[0]).length<13?String(arguments[0]).padEnd(13,'0')*1:arguments[0]
                format =defaultFormat
            }
        }else{
            val = defaultTimeValue
            format =defaultFormat
        }
    }else if(arguments.length==2){
        if(defaultFormat.includes(arguments[0])){
            val = String(arguments[1]).length<13?String(arguments[1]).padEnd(13,'0')*1:arguments[1] 
            format = arguments[0] 
        }else if(defaultFormat.includes(arguments[1])){
            val = String(arguments[0]).length<13?String(arguments[0]).padEnd(13,'0')*1:arguments[0]
            format = arguments[1] 
        } 
    }
    var t = new Date(Number(val))=='Invalid Date'?new Date(val):new Date(Number(val))
    var date = {
      "M+": t.getMonth() + 1,
      "d+": t.getDate(),
      "h+": t.getHours(),
      "m+": t.getMinutes(),
      "s+": t.getSeconds(),
      "q+": Math.floor((t.getMonth() + 3) / 3),
      "S+": t.getMilliseconds()
  };
  if (/(y+)/i.test(format)) {
    format = format.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (var k in date) {
    if (new RegExp("(" + k + ")").test(format)) {
        format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
    }
  }
  return format;
}

  console.log(formatDate())//2020-01-06 14:18:43    
  console.log(formatDate('yyyy-MM-dd hh')) //2020-01-06 14
  console.log(formatDate(1530975600)) //2020-01-06 14:18:43
  console.log(formatDate(1530975600000)) //2020-01-06 14:18:43
  console.log(formatDate(1530975600000,'yyyy-MM-dd hh:mm')) //2018-07-07 23:00
 console.log(formatDate('yyyy-MM-dd',1530975600)) //2018-07-07

參數:

①不傳參數,默認返回當前時間 ,格式爲 :年月日時分秒

②如要自定義返回時間格式:根據 標準時間格式 yyyy-MM-dd hh:mm:ss 自定義,只需傳一個 時間格式參數

③若是隻傳一個參數,能夠是 時間格式參數時間戳,返回值均是基於當前時間的返回值

④若是你須要自定義時間戳返回自定義時間格式,那麼能夠傳兩個參數,不受參數順序影響,時間戳能夠是10位

相關文章
相關標籤/搜索