该博客用来收藏一些好用的js方法和ui库

红太狼 2023-07-18 12:37 7阅读 0赞

# 一、UI库和交互 #

1.[sweetalert][]

网址：[https://sweetalert.js.org/guides/\#installation][sweetalert]（交互体验很好）

2.moment

网址：[http://momentjs.cn/][http_momentjs.cn] （时间格式化）

[https://dayjs.gitee.io/zh-CN/][https_dayjs.gitee.io_zh-CN]

3.validatejs

网址：[http://validatejs.org][http_validatejs.org](表单验证)

4.[g][]it提交规范

网址:[https://www.npmjs.com/package/commitizen][g]

5.数据统计微量级

网址[https://f2.antv.vision/zh/docs/api/chart/legend][https_f2.antv.vision_zh_docs_api_chart_legend]

6.压缩图片

[https://tinypng.com/][https_tinypng.com]

7.pdf转word

[https://smallpdf.com/cn/pdf-to-word][https_smallpdf.com_cn_pdf-to-word]

# 二、好用的js方法 #

1.倒计时方法

export const getCountdownFunc = ({start_timeStamp, end_timeStamp, current = (new Date()).getTime()} = {}) => {
    
        let {d = 0, h = 0, m = 0, s = 0} = {};
    
    
        //时间戳格式转换
        current = parseInt(current / 1000)
    
        // console.log(end_timeStamp,current)
        let countTime = 0, is_start = false,is_end=false;
    
    
        //还没开始
        if (start_timeStamp > current && end_timeStamp > current) {
            //console.log('还没开始')
            countTime = start_timeStamp - current;
    
        } else if (end_timeStamp > current && start_timeStamp < current) {
            //还在进行中
            //console.log('还在进行中')
            is_start = true;
            countTime = end_timeStamp - current;
        } else {
            is_end = true
            //console.warn('活动信息无效');
            // throw "活动信息无效";
        }
    
        d = parseInt(countTime / (60 * 60 * 24))
        h = parseInt((countTime - d * 60 * 60 * 24) / (60 * 60))
        m = parseInt((countTime - d * 60 * 60 * 24 - h * 60 * 60) / 60)
        s = countTime - d * 60 * 60 * 24 - h * 60 * 60 - m * 60
    
        return {d, h, m, s, is_start,is_end}
    }

2. 从指定的数组(对象组成的数组)，根据键值和值找到下标

/**
     * 查看对象1中的所有属性在obj2中都有
     * @param obj1
     * @param obj2
     */
    export const compare_obj = (obj1, obj2) => {
        for (var i in obj1) {
            if (!obj1.hasOwnProperty(i)) continue;
            if (!obj2.hasOwnProperty(i) || obj1[i] != obj2[i]) {
                return false
            }
        }
        return true
    
    }
    
    /**
     * 从指定的数组(对象组成的数组)，根据键值和值找到下标
     * @param arr
     * @param key
     * @param val
     * @param full 是否返回值和下标，默认只返回下标
     */
    export const findArrayIdx = (arr, key_val_arr, full) => {
    
        for (var i in arr) {
            if (typeof arr[i] != 'object') continue
            //用来比较对象
            if (compare_obj(key_val_arr, arr[i])) {
                if (!full) return parseInt(i);
                return {val: arr[i], idx: parseInt(i)}
            }
    
        }
        return false
    }

3.指定key，铺平二维数组，一般用于将树状的菜单、分类（数据结构一致，但是利用child这种来标识上下级)

/**
     * 对象=>字符串=>对象
     * 一般用于console.log立即显示（有时候虽然在前面打印，但是会由于引用的问题，打印的不是即时结果)
     * 同时可以用于简单粗暴的避免引用传递的对象copy，但是注意这种写法只保留值，会丢失方法
     * @param obj
     */
    export const objTranslate = obj=>JSON.parse(JSON.stringify(obj))
    /**
     * 指定key，铺平二维数组，一般用于将树状的菜单、分类（数据结构一致，但是利用child这种来标识上下级)
     * 使平铺城1维数组
     */
    
    export const plainArray = (arr,key,newArr)=>{
    
      if(!arr || !key)return false;
    
      for(var item of arr){
        let tempObj = objTranslate(item)
        if(tempObj.hasOwnProperty(key)){
          tempObj[key] = null
        }
        newArr.push(tempObj)
    
        if(item && item[key] && _.isArray(item[key])){
          plainArray(item[key],key,newArr);
        }
    
      }
    
    }

4.多维数组的笛卡尔积

/**
     * 多维数组的笛卡尔乘积
     * @param array
     */
    export const calcDescartes = (array)=>{
      // console.log(array)
      if (array.length < 1) return [];
      if (array.length < 2){
        //if(array[0].length) return []
        return [array[0]]
      }
      return [].reduce.call(array, function (col, set) {
        var res = [];
        col.forEach(function (c) {
          set.forEach(function (s) {
            var t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          })
        });
        console.log(res)
        return res;
      });
    }

5.从元素是对象的一维数组中，获取指定的键名对应的值组成的简单值一维数组

/**
     * 从元素是对象的一维数组中，获取指定的键名对应的值组成的简单值一维数组
     * arr = [{name:'wwww',age:2332,'city':'shanghai'},{name:'wwww2',age:2332,'city':'shanghai'}，{name:'wwww3',age:2332,'city':'shanghai'}]
     * get_arr_column(arr,'name')
     * ====>['wwww'，'wwww2'，'wwww3']
     * @param arr
     * @param column
     */
    export const get_arr_column = (arr,column)=>{
      if(!_.isArray(arr)){
        throw new Error('数据必传')
      }
      if(typeof column !='string'){
        throw new Error('键名为字符串')
      }
      if(!column){
        throw new Error('键名必传')
      }
      let rt = []
      for(var k in arr){
        if(typeof arr[k] != 'object'){
          throw new Error('获取的数值为简单值')
        }
        rt.push(arr[k][column])
      }
      return rt
    }

/**
     * 从元素是对象的一维数组中，获取指定的键名对应的值组成的简单值一维数组
     * @param arr
     * @param column
     * @returns {[]}
     */
    export const getArrColumn = (arr, column) => {
      if (!Array.isArray(arr)) {
        throw new Error('数据必传')
      }
      if (typeof column !== 'string') {
        throw new Error('键名为字符串')
      }
      if (!column) {
        throw new Error('键名必传')
      }
      let rt = []
      for (var k in arr) {
        if (typeof arr[k] !== 'object') {
          throw new Error('获取的数值为简单值')
        }
        rt.push(arr[k][column])
      }
      return rt
    }

[sweetalert]: https://sweetalert.js.org/guides/#installation
[http_momentjs.cn]: http://momentjs.cn/
[https_dayjs.gitee.io_zh-CN]: https://dayjs.gitee.io/zh-CN/
[http_validatejs.org]: http://validatejs.org/
[g]: https://www.npmjs.com/package/commitizen
[https_f2.antv.vision_zh_docs_api_chart_legend]: https://f2.antv.vision/zh/docs/api/chart/legend
[https_tinypng.com]: https://tinypng.com/
[https_smallpdf.com_cn_pdf-to-word]: https://smallpdf.com/cn/pdf-to-word