zoukankan      html  css  js  c++  java
  • 基于ES6/7/8/9封装的工具函数(持续更新,力求精简)

    请求相关:

    场景:

    后端接口路径格式:

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

    后端需求前端传参:

    1 //①不需求查询参数,对url不做进一步的处理,直接返回
    2 
    3 //②需要传递查询参数,也就是查询参数需要拼接到url身上

    需求:

    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 转 fromData

    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:处理月份的回显

    1  /**
    2  * 处理月份的回显
    3  * @param {Number} num 月份的数字
    4  * @returns {string} 转换后的汉字月份
    5  */
    6 function monthFilter (num) {
    7     return num>0&&num<13? ['一','二','三','四','五','六','七','八','九','十','十一','十二'][num-1]+'月':'月'
    8 }

    方法4:处理星期的回显

    /**
     * 处理星期的回显
     * @param {Number} num 星期的数字
     * @returns {string} 转换后的汉字星期
     */
    function weekFilter (num) {
        return num>0&&num<8?'周'+['一','二','三','四','五','六','日'][num-1]:'周'
    }

    方法5:创建基于当前/指定时间的 过去 n 天时间(包含当天日期)

    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位

     

    方法8:严格类型判断

     

    1 function type(o){
    2     return Object.prototype.toString.call(o).slice(8,-1).toLowerCase()
    3 }

     

     

  • 相关阅读:
    PDA设备小知识--(IP)工业防护等级含义
    实施项目--如何推进项目实施进度
    Git.Framework 框架随手记--存储过程简化
    Git.Framework 框架随手记--SQL配置文件的使用
    Git.Framework 框架随手记--ORM查询数据集合 二
    介绍 Scratch 3.0:扩展编码创造力
    微服务架构:引领数字化转型的基石
    网易云技术开放日 云安全专场分享圆满结束
    JVM调优推荐
    springboot + mybatis + 多数据源
  • 原文地址:https://www.cnblogs.com/studyshufei/p/12190132.html
Copyright © 2011-2022 走看看