js方法封装汇总

男娘i 2022-12-09 02:51 153阅读 0赞

//根据文件路径获取扩展名
    getKzName(str){//获取文件路径的扩展名
    	var url = str
    	var pos = url.lastIndexOf(".");
    	if(pos == -1){
    		pos = url.lastIndexOf("\\")
    	}
    	ar filename = url.substr(pos +1);
    	eturn filename
    },
    getKzName("xxxxx.mp4") //mp4
    
    //判断是否手机号码
    export function isPhone(str) {
        const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
        if (!reg.test(str)) {
          return false;
        } else {
          return true;
        }
    }
    
    //根据key截取url传参
    export const getQueryString = (name) => {
        let urlArr = window.location.href.split('?');
        let str = null
        if (urlArr.length == 1) {
            str = null
            return str
        } else {
            urlArr = urlArr[1]
            urlArr = urlArr.split('&')
            urlArr.forEach(v => {
                if (v.indexOf(name) != -1) {
                    str = v.split('=')[1] != undefined ? v.split('=')[1] : null
                }
            })
            return str;
        }
    }
    
    //将url上的参数转为json对象
    export const getUrlParams=(str="?")=>{
        let urlstr = location.href;
        console.log(str.split(str)[1])
        let obj = {};
        if(urlstr.split(str)[1]){
            let arr = urlstr.split(str)[1].split("&");   //先通过？分解得到？后面的所需字符串，再将其通过&分解开存放在数组里
            for (let i of arr) {
                obj[i.split("=")[0]] = i.split("=")[1];  //对数组每项用=分解开，=前为对象属性名，=后为属性值
            }
            console.log("obj",obj);
        }else{
            console.log("无");
        }
        return obj
    }
    
    //时间格式化
    export const formatDate = (date, fmt) => {
        date = date || new Date();
        fmt = fmt || 'yyyy-MM-dd hh:mm:ss';
        if (Object.prototype.toString.call(date).slice(8, -1) !== 'Date') {
            date = new Date(date)
        }
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        }
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + ''
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : (("00" + o[k]).substr(("" + o[k]).length)))
            }
        }
        return fmt
    }
    formatDate("时间戳",'YYYY-MM-dd HH:dd:ss')
    
    //防抖
    export const antiShake= (fn, t) => {
        let delay = t || 1000
        let timer
        return function () {
            let args = arguments;
            if (timer) {
                clearTimeout(timer)
            }
            let callNow = !timer
            timer = setTimeout(() => {
                timer = null
            }, delay)
            if (callNow) fn.apply(this, args)
        }
    }
    eventName:antiShake(function(){
        //do thing
    })

自定义全局指令

//main.js中
    //自定义指令，价钱保存两位小数（每三位加逗号）
    封装法一：
    Vue.filter('moneyTwo', function(val) {
    	val = Number(val)
    	if(isNaN(val)) {
    	  val = 0;  
    	} 
    	return	Number(val.toFixed(2)).toLocaleString('zh-CN', { minimumFractionDigits: 2 })
    })
    封装法二：
    Vue.filter('moneyTwo', function(val) {
    	val = Number(val) 
        val = val.toString().replace(/\$|\,/g,'');
        if(isNaN(val)) {
          val = "0";  
        } 
        let sign = (val == (val = Math.abs(val)));
        val = Math.floor(val*100+0.50000000001);
        let cents = val%100;
        val = Math.floor(val/100).toString();
        if(cents<10) {
           cents = "0" + cents
        }
        for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
            val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
        }
        return (((sign)?'':'-') + val + '.' + cents);
    })
    
    //使用
    {
       {Numvalue | moneyTwo}}

js文档：

[js文档][js]

[js]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects