常用的代码片段(JS篇)

截取url多个参数(包括中文,中文传输需要使用encodeURI()方法包裹url)

getUrlRequest(url=window.location.href) {
            url = decodeURI(url);
            let theRequest = {};
            if (url.indexOf("?") != -1) {
                let str = url.substring(url.indexOf("?")+1);
                let strs = str.split("&");
                for(let i = 0; i < strs.length; i ++) {
                    theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }

设置rem

window.onresize=function(){
    setRem();
}
function setRem(){
    document.documentElement.style.fontSize =     document.documentElement.clientWidth/3.75+"px";//图纸375px;1rem=100px
}
setRem();

原生Ajax封装

// 原生ajax的封装(params里面有三个属性type,url,data)
        function myAjax(params,fn) {
            let xhr = new XMLHttpRequest();
            if (params.type=='get'){
                xhr.open('GET', params.url, true);
                xhr.send(null);
            }else if(type=='post'){
                xhr.open("POST", params.url, true);
                xhr.send(params.data);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && (xhr.status == 200)) {
                    fn.call(this,xhr.responseText)
                }
            };
        }

判断当前时间是否再某个时间段

compareTime() {
    let date = new Date();
    let hour = parseInt(date.getHours());
    let minute = parseInt(date.getMinutes());
    if ((17 > hour && hour>=9) || (hour == 17 &&  minute< 30)){
      //在9-17:30时间段
    }else{
      //不在9-17:30时间段   
    }
  }

vue中引入图片

 { label: "最大风速", key: "ws_max",icon:require('../assets/images/icon_fengsu.png')},

封装正则校验工具及使用

/**
 * 正则校验工具
 */
import Vue from 'vue';
import { Toast } from 'vant';
const regexCheck=(rege,value,errTip)=>{
    if(!value || value==''){
        Toast(`请输入${errTip}` || "请您输入");
        return false
    }
    if(rege.test){
        if(rege.test(value)){
            return true
        }else{
            Toast(`请输入正确的${errTip}` || "输入错误");
            return false
        }
    }
}
//校验车牌号
export const ckCarNo=(value,errTip)=>{
    let newRegex = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
    return regexCheck(newRegex,value,errTip)
}
//校验手机号
export const ckPhone=(value,errTip)=>{
    let newRegex = /^1[34578]\d{9}$/;
    return regexCheck(newRegex,value,errTip)
}

//使用------------------------
if(!ckPhone(this.inputInfo.phoneno,"手机号") || !ckCarNo(this.inputInfo.licenseno,"车牌号"))return;

根据秒数计时方法

        formatTime(second){
            let hour = 0;
            let min =0;
            let minStr = '';
            let sec = 0;
            let secStr = '';
            if(second>60){
                min = Math.floor(second/60);
                sec = Math.floor(second%60);
                secStr = sec<10?'0'+sec:''+sec;
                if(min>60){
                    hour = Math.floor(min/60);
                    min = Math.floor(min%60);
                    minStr = min<10?'0'+min:''+min;                    
                    return hour+':'+minStr+':'+secStr;          
                }else{
                    minStr = min<10?'0'+min:''+min;                    
                    return minStr+':'+secStr;
                }
            }else{
                let str = second<10?'00:0'+second:'00:'+second;
                return str
            }
        }

str.replace(/-/g,'/')
//替换所有的"-"符号为"/"符号

用迭代器来处理递归

                // 处理方法
                let changeItem = function (item) {
                    // 更改字段名称
                    if(item.buildingId){
                        item.value = item.buildingId
                        item.label = item.buildingName
                        item.children = item.floorList;
                        delete item.buildingId;
                        delete item.buildingName;
                        delete item.floorList;
                    }
                    if(item.children){
                        iterator(item.children, changeItem)
                    }
                }
                
                // 迭代器
                let iterator = function (arr, doSomething) {
                    for (let i = 0; i < arr.length; i++) {
                        if(typeof arr[i]==='string'){
                            let newObj = {
                                value:arr[i],
                                label:arr[i],
                                children:[]
                            }
                            arr[i] = newObj;
                        }
                        doSomething.call(arr[i], arr[i])
                    }
                }
                //调用
                iterator(ladderList, changeItem)

字符串转数字类型方法

const strToNum = str=>{
    const type = typeof (str);
    switch (type){
        case 'string':
            if (!parseFloat(str)) { throw 'strToNum方法的入参不是number类型的字符串'; }
            const point = str.indexOf('.');
            const floatingNum = Math.pow(10, (str.length - 1 - point));
            const toNum = str * floatingNum / floatingNum;
            return toNum;
        case 'number':
            return str;
        default:
            throw 'strToNum方法的入参必须是string类型或者number类型';
    }
};

/** 自定义useState,修改时回调函数 */
const useStateCallBack = (initValue)=>{
    const [state,setState] = useState(initValue);
    const callBackRef = useRef(initValue);
    
    useEffect(()=>{
        callBackRef.current && callBackRef.current(state);
    },[state])

    return [state,function(newValue,callBack){
        callBackRef.current = callBack;
        setState(newValue)
    }]
}

//const [count,setCount] = useStateCallBack(0);

包装扩展原有Hooks

/** 自定义CheckboxGroup */
const CheckboxGroup = (props)=>{
    const { onChange, onReduction } = props;
    const beforeVal = useRef([]);
    const newProps = {
        ...props,
        onChange:(checkedValue)=>{
            onChange?.(checkedValue);
            if (_.isEmpty(checkedValue)){
                Message.error('请至少选中1条');
                onReduction(_.isEmpty(beforeVal.current) ? false : beforeVal.current);
            } else {
                beforeVal.current = checkedValue;
            }
        }
    };
    return (<Checkbox.Group {...newProps}/>);
};