JS常用方法封装

JS常用方法封装

1. 封装ajax请求

function ajax(url,type, dataJson, suc, fal,isDecipher=0) {
    let contentType = "application/json",dataType = "json"
    if(isDecipher == DES){
        contentType = "text/html";
        dataType = "text"
    }
    $.ajax({
        type : type,
        contentType : contentType,
        dataType : dataType,
        url : url,
        data : dataJson,
        success : function(res) {
            let data = decipherData(res,isDecipher)
            const code = data.code;
            if (code === 0 || code === 200) {
                suc(data);
            } else {
                if(data.msg){
                    layer.msg(data.msg,{icon:2,time:2000})
                }else{
                    if(data.message){
                        layer.msg(data.message,{icon:2,time:2000})
                    }else{
                        layer.msg(data.msg,{icon:2,time:2000})
                    }

                }
            }
        },
        error : function (err){
            if(fal){
                fal(err)
            }
        }
    });
}

调用：

 $.ajax({
             type: "GET",
             url: ".....",
             dataType: "json",
             success: function (res) {
                 console.log(res)
             }
        })

2. 封装ajax请求（下载文件）

function ajaxDown(url,type, dataJson, suc, fal,type1='down') {
    let contentType = "blob",dataType = "json"

    if(type1 == "load"){
        contentType = 'multipart/form-data;charset=utf-8'
    }
    $.ajax({
        type : type,
        contentType : contentType,
        dataType : dataType,
        url : url,
        data : dataJson,
        success : function(data) {
            console.log(data)
            suc(data);
        },
        error : function (err){
            if(fal){
                fal(err)
            }
        }
    });
}

3. 根据id和pid构造树型数据

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * *data传入的数据格式为单层数组对象格式[{},{}...]
 */
function handleTree(data, id, parentId, children) {
    let config = {
        id: id || 'id',
        parentId: parentId || 'parentId',
        childrenList: children || 'children'
    };

    var childrenListMap = {};
    var nodeIds = {};
    var tree = [];

    for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
            childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
    }

    for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
            tree.push(d);
        }
    }

    for (let t of tree) {
        adaptToChildrenList(t);
    }

    function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
            o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
            for (let c of o[config.childrenList]) {
                adaptToChildrenList(c);
            }
        } else {
            o[config.childrenList]=[]
        }
    }
    return tree;
}

调用：treePersonSelData=handleTree(res.data);

4. 判断数据为空的话返回“–”

function isEmpty(str,str1='--'){
    if ((!str || str == "undefined" || str == "null")&&str!=0) {
        return str1;
    }
    return str;
}

5. 处理时间为自己想要的格式

function parseTime(dateTime = null, fmt = 'yyyy-mm-dd'){
    // 如果为null,则格式化当前时间
    if (!dateTime) dateTime = Number(new Date());
    // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
    if (dateTime.toString().length == 10) dateTime *= 1000;
    let date = new Date(dateTime);
    let ret;
    let opt = {
        "y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "h+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "s+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;

}

调用：

let monthDate = parseTime(new Date(),'yyyy-mm');

6. 数值保留两位小数，如果为空显示"–"

/**
 * num:传递的数值
 * num1：保留小数的位数
 */
function mathRound(num,num1=2){
    if( num === ""){
        return "--"
    }
    if((!num || num == "--"|| num == "null")&&num!==0){
        return "--"
    }
    return (num*1).toFixed(num1)
}

7. 设置html窗体内容等比缩放

/*WindowResize.js*/
 // body宽高
 let cw = 1920, ch = 1080
 let body = document.getElementById('body')
 body.style.width = `${cw}px`
 body.style.height = `${ch}px`
 // 对body进行缩放
 function windowResize() {
     // 窗口宽高
     let w = window.innerWidth, h = window.innerHeight
     // 缩放比例
     let r = w / cw < h / ch ? w / cw : h / ch
     body.style.transform = `scale( ${r})`
     // 因为scale是以body的原中心点为基准进行缩放，所以缩放之后需要调整外边距，使其位于窗口的中心位置
     body.style.marginLeft = (-(cw - r * cw) / 2 + (w - r * cw) / 2) + 'px'
     body.style.marginTop = (-(ch - r * ch) / 2 + (h - r * ch) / 2) + 'px'
     body.style.marginBottom = (-(h > ch ? h : ch - r * ch)) + 'px'
     body.style.marginRight = (-(w > cw ? w : cw - r * cw)) + 'px'
 }
 windowResize()
 // 监听窗口尺寸变化
 window.addEventListener('resize', windowResize);

.html中引入使用

  <script src="../js/WindowResize.js"></script>
  <script>
        $(document).ready(function () {
        ...
         window.addEventListener('resize', function () {
                windowResize();
                ...
            })
         })
  </script>

8. Js将两个一维数组合并成一个二维数组

// 将两个数组合并成一个二维数组
        mergeArray(x, y) {
            // let x = [1, 2, 3, 4, 5];
            // let y = [6, 7, 8, 9, 10];
            // return [[1,6],[2,7]...]
            let newArr = [];
            x.forEach((item, i) => {
                let arr1 = [];
                arr1.push(item);
                arr1.push(y[i]);
                newArr.push(arr1);
            })
            return newArr;
        },

9. 处理时间格式： 202307242001->2023-07-24 20:01

// 处理x轴的数据为指定时间格式
        selgetXdata(type, val) {
            let newTime = val.toString();
            if (type == 0) {//分 202307242001->2023-07-24 20:01
                newTime = this.timeTrim2(newTime);
            } else if (type == 1) {//时2023072319->2023-07-23 19
                // newTime = this.timeTrim3(newTime);
                newTime = newTime.slice(0, 4) + "-" + newTime.slice(4, 6) + "-" + newTime.slice(6, 8) + " " + newTime.slice(8, 10)
            } else if (type == 2) {//日20230712->2023-01-12
                // newTime = this.timeTrim4(newTime);
                newTime = newTime.slice(0, 4) + "-" + newTime.slice(4, 6) + "-" + newTime.slice(6, 8)
            } else if (type == 3) {//周202326->2023年第26周
                // newTime = this.timeTrim5(newTime);
                newTime = newTime.slice(0, 4) + "年第" + newTime.slice(4, 6) + "周"
            } else if (type == 4) {//月202302->2023-02
                newTime = newTime.slice(0, 4) + "-" + newTime.slice(4, 6)
            }
            return newTime;
        },

10. 获取当前日期往前7天的日期列表

 getDateList() {
      let dates = [];
      let today = new Date();
      for (let i = 0; i < 7; i++) {
        let date = new Date();
        date.setDate(today.getDate() - i);
        let month =
          date.getMonth() + 1 > 10
            ? date.getMonth() + 1
            : "0" + date.getMonth() + 1;
        let itemdate =
          date.getDate() > 10 ? date.getDate() : "0" + date.getDate();
        date = month + "-" + itemdate;
        dates.push(date);
      }
this.dateList=dates//['11-09', '11-08', '11-07', '11-06', '11-05', '11-04', '11-03']
    },

11. 获取当前周前一周往前七周的周列表

 // 获取当前日期往前七周的列表
    getWeekList() {
      let date = new Date();
      // 获取当前日期是一年中的第几周
      let weekNum = this.getWeekNumber(date);
      // 创建一个数组存储当前周及其前7周的周数
      let weeks = [];
      for (let i = -6; i <= 0; i++) {
        weeks.push(weekNum + i);
      }
      console.log(weeks, "周列表"); // 输出：[52, 1, ... , 2]
    },
    getWeekNumber(d) {
      // （注意：由于一年的第一周可能是跨年的，因此这里可能包含上一年的最后一周和下一年的第一周）,这个方法假设每周从周一到周日计算，并将一年的第一天视为一周的一部分
      d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
      let dayNum = d.getUTCDay() || 7;
      d.setUTCDate(d.getUTCDate() + 4 - dayNum);
      var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
      return Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
    },

12. 值5秒变一次，html文本中增加或减少0.3

 // 生成+3到-3的随机数
        function getRandomNumber() {
            return (Math.random() * (0.3 - (-0.3))) + (-0.3);
        }
        // 机房实时EER/今年综合平均EER- 每5秒变一次 加减0.3
        let eerVal = parseFloat($("#eer").text()) || 0;
        let copSystemNowVal = parseFloat($("#copSystemNow").text()) || 0;
        function update2() {
            eerVal += getRandomNumber();
            copSystemNowVal += getRandomNumber();
            $("#eer").text(mathRound(eerVal));
            $("#copSystemNow").text(mathRound(copSystemNowVal));
        }
        let update2Timer = setInterval(update2, 5000);

13. 拼接请求参数(param)，数据为空的时候不拼接

 function tansParams(params) {
                let result = ''
                for (const propName of Object.keys(params)) {
                    const value = params[propName];
                    var part = encodeURIComponent(propName) + "=";
                    if (value !== null && value !== "" && typeof (value) !== "undefined") {
                        if (typeof value === 'object') {
                            for (const key of Object.keys(value)) {
                                if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
                                    let params = propName + '[' + key + ']';
                                    var subPart = encodeURIComponent(params) + "=";
                                    result += subPart + encodeURIComponent(value[key]) + "&";
                                }
                            }
                        } else {
                            result += part + encodeURIComponent(value) + "&";
                        }
                    }
                }
                return result
            }

调用：

let jsonData={
                    timeValue:date,
                    energyType:energyType,
                    page:pageNum,
                    limit:pageSize,
                    factory:10,
                    factoryids:null
                }
tansParams(jsonData)//timeValue=202402&energyType=2&page=1&limit=10&factory=10&      
window.location.href='/tmUnitConsumptionAnalysis/export'+'?'+tansParams(jsonData);