Javascript 常用封装（一）

1.获取URL的query参数

• 作用：根据传入的属性名输出对应的值，没有则输出null
• 注意：url传参中包含中文时，默认的获取结果会乱码，需要进行解码

//解析query传参 url参数中含有中文时将decode设为true
getQueryVal(key,decode = false) {
    var searchObj = {}
    //截取参数字符串
    var searchStr = window.location.search.substring(1)
    //转换成数组
    var arr = searchStr.split('&')
    //转换成对象
    arr.forEach(str =>{
        var mark_index = str.indexOf('=')
        var key = str.substring(0,mark_index)
        var val = str.substring(mark_index + 1)
        searchObj[key] = val
    })

    //根据属性名输出对应的值
   if (Object.prototype.hasOwnProperty.call(searchObj, key)) {
      //如果传入true 则进行解码
      if(decode){
           return decodeURI(searchObj[key])
      }else{
           return searchObj[key]
      }
    } else {
        return null
    }
},

2.生成最近N天的日期数组

• 由来：在做图表的时候经常需要生成最近日期列表（最近7天/15天/30天），在此封装一个，免得重复造轮子
• 语法：getDateList(天数,结束时间)
• 依赖：函数依赖moment.js，使用前请先引入

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

getDateList(length = 15, end_time = new Date()) {
    //日期数组
    var date_list = []

    //结束时间 日期对象
    var temp_date = end_time
    for (var i = 0; i < length; i++) {
        //加入到数组中
        date_list.unshift(`${moment(temp_date).format('MM-DD')}`)
        //日期减一
        temp_date.setDate(temp_date.getDate() - 1)
    }

    return date_list
},

3.生成最近的月份列表

• 由来：在做图表的时候经常需要生成最近月份列表（最近6个月/12个月），在此封装一个，免得重复造轮子。
• 语法：getMonthList(天月数,结束时间)
• 依赖：函数依赖moment.js，使用前请先引入函数依赖moment.js，使用前请先引入

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

getMonthList(length = 6, end_time = new Date()) {
    //日期数组
    var month_list = []

    //结束时间 日期对象
    var temp_date = end_time
    for (var i = 0; i < length; i++) {
        //加入到数组中
        date_list.unshift(`${moment(temp_date).format('YYYY-MM')}`)
        //月份减一
        temp_date.setMonth(temp_date.getMonth() - 1)
    }

    return month_list
},

4.根据年月输出每月天数

• 由来：制作月报表时，需要渲染当月每天的数据，就需要知道当前月有多少天
• 思路：除了2月，每个月天数都是固定的，只要判断是否是闰年还是平年即可确定2月份的天数（判断是否是闰年:年份如果是整百 则除以400取余 否则除以4取余）

//根据年月输出当月天数
getDaysByMonth(year,month){
                var year = Number(year)
                var month = Number(month) - 1
                //平年每月天数
                var days_arr = [31,28,31,30,31,30,31,31,30,31,30,31]
                //判断是否是闰年 如果是整百 则除以400取余  否则除以4取余
                if ( (year%100 == 0 && year%400 == 0) || (year%100 != 0 && year%4 == 0)) {
                    console.log('闰年')
                    days_arr[1] = 29
                }
                return days_arr[month]
}

5.节流和防抖

• 节流含义：当一个事件被频繁触发时（滚动条滚动，鼠标移动事件），为了节省性能，降低其触发频率
• 实现方式：设定一个时间周期，一个周期内只能触发一次，以此降低其触发频率

<script>
    //记录上次回调执行的时间，再对比本次触发的时间，超过周期则执行回调，并记录最新的回调执行时间
    function throttle(cb,delay){
        //记录上次回调执行时的时间戳
        var prev = 0
        //定义内部函数并返回，形成闭包，缓存prev
        return function(){
            //事件触发时上下文
            var context = this
            //事件触发时的参数
            var args = arguments
            //对比时间差 超过时间间隔则执行回调
           if(Date.now() - prev >= delay){
               //执行回调（绑定this，传递参数）
               cb && cb.apply(context,args)
               //更新prev
               prev = Date.now()
           }
        }

    }

    //事件回调
    function handle(e){
        console.log(e)
    }

    //事件监听并设置节流
    window.addEventListener('scroll', throttle(handle,200))
</script>

• 防抖含义：当事件频繁触发时，不执行回调，直到事件触发告一段落才执行回调，通俗的说，就是只在最后一次触发时才执行，一般用于实时输入搜索
• 实现方式：每次触发都将回调放入延时定时器中，如果定时器范围内接着触发，则清除这个定时器，并开启新的，保证永远只有一个最新的定时器执行，如果后续不再触发，则执行这个延时定时器的回调，在执行回调时，需要绑定事件发生时的context和参数

<script>
   //当事件频繁触发时，只在最后一次触发时执行回调
   function debounce(fn, delay){
        // 声明计时器
        var timer = null
        // 定义内部函数并返回，形成闭包,缓存 timer
        return function() {
            //事件触发时上下文
            var context = this
            //事件触发时的参数
            var args = arguments
            //清除定时器
            clearTimeout(timer)
            //开启新定时器
            timer = setTimeout(function () {
                //给回调绑定this,传入事件参数并执行
                fn.apply(context, args)
            }, delay)
        }
    }

    //事件回调
    function handle(e){
        console.log('handle',e)
    }

    //监听事件并设置防抖
    window.addEventListener('resize', debounce(handle,200))
</script>

6.数组的最大值与最小值

• 实现思路：先进行数组排序，然后数组的第一个和最后一个元素就是最大值与最小值
• 注意：排序使用sort()方法进行，如果数组元素是对象，可以将p1-p2替换成p1[key]-p2[key],这样排序时可以根据数组元素的某个属性值进行比较

<script>
    function getMaxMin(arr){
        var max = null
        var min = null
        if(arr.length > 0){
            //先对数组进行排序
            var tem_arr = arr.sort((p1,p2)=>{
                //p1-p2就是升序
                //p2-p1就是降序
                return p2-p1
            })
            max = tem_arr[0]
            min = tem_arr[tem_arr.length-1]
        }
        return {
            max,min
        }
    }
</script>

7.文件大小转换

• 作用：根据文件大小，为其适配一个合适的单位输出
• 实现方式：循环取商，依次提升单位（"B"->"K"->"M"->"G"），直到找到最后的单位为止

<script>
    //根据文件大小，为其适配一个合适的单位输出
    //传入的文件大小单位字节B
    function formatterSize(cellValue){
        //当前尺寸
        var size = cellValue
        //当前单位（B代表字节）
        var unit = "B"
        //单位列表(B代表字节，1024进位)
        var units = ["B","K","M","G"]
        //循环取商(如果除以进位后，仍然大于1024，则接着除，并提升单位，一直到最后的单位为止)
        while(units.length > 0 && size >= 1024){
            //单位进位(移除过小的单位)
            units.shift()
            //单位更新
            unit = units[0]
            //取商
            size = size / 1024
        }
        //保留小数点后2位
        size = Math.floor(size*100) / 100
        return size + " " + unit
    }

    //500B
    console.log(formatterSize(500)) //500 B
    //1KB
    console.log(formatterSize(1024)) //1 K
    //1k + 100B
    console.log(formatterSize(1024 + 100)) //1.09 K
    //2M
    console.log(formatterSize(1024 * 1024 * 2)) //2 M
</script>
                    

8.复制内容到粘贴版

• 核心API：document.execCommand()

function copyUrl_oz(val){
        //创建元素
        var node_textarea = document.createElement('textarea')
        //隐藏该元素
        node_textarea.style.opacity = 0
        //写入元素内容（要复制的文本）
        node_textarea.value = val
        //将元素加入Dom中
        document.body.appendChild(node_textarea)
        //选中该元素
        node_textarea.select()
        //复制以选中元素的内容到粘贴板
        document.execCommand("Copy")
        //复制完毕，移除该元素
        document.body.removeChild(node_textarea)
    }

• 兼容性：在PC端中，测试了Chrome/火狐/edge/IE11浏览器都没问题，在手机端，测试了IOS13种的Chrome/火狐/edge浏览器，也没问题