在Vue中封装自己常用的函数库


前言

在日常开发中,每次项目都无法避免一些常用而又简单的函数,如果每次项目都要重新写的话,一方面会浪费时间,另一方面经常修改可能会引起不必要bug。所以希望通过公共的方法来封装这些常用的函数,提高效率。


提示:以下是本篇文章正文内容,下面案例可供参考

一、构建一个public.js文件

新建一个名为public.js的文件

//这里示例一个判断是否为PC端的方法,如需加入自定义的,可自行加入
//原理:
//1.创建一个方法
//2.然后将方法名抛出

//创建一个方法
function isPC(){
 var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}


export default {
	isPC,//抛出方法名
}

二、使用步骤

1.引入public.js

在main.js中引入public.js,代码如下(示例):

import PublicFn from './libs/public.js';
Vue.prototype.PublicFn=PublicFn;

2.在组件中使用方法

通过自定义的全局变量名来调用对应的方法名,代码如下(示例):

this.PublicFn.isPC()

三、常用的方法集合

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

//范围随机数
function random(min, max){
	 if (arguments.length === 2) {
			 return Math.floor(min + Math.random() * ((max + 1) - min))
		} else {
			 return null;
	}
}


//字符转换,
//type: 1:首字母大写 2:首字母小写 3:大小写转换 4:全部大写 5:全部小写
function changeCase  (str, type)  {
	type = type || 4
	 switch (type) {
	      case 1:
			    return str.replace(/\b\w+\b/g, function (word) {
			            return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
			      });
	      case 2:
			    return str.replace(/\b\w+\b/g, function (word) {
			           return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
			      });
		  case 3:
			    return str.split('').map(function (word) {
			        if (/[a-z]/.test(word)) {
			            return word.toUpperCase();
			        } else {
			            return word.toLowerCase()
			        }
			    }).join('')
		  case 4:
			    return str.toUpperCase();
		  case 5:
			    return str.toLowerCase();
		  default:
			    return str;
		}
}


//获取当前url中的参数
function getWindonHref() {
	 var sHref = window.location.href;
	 var args = sHref.split('?');
     if (args[0] === sHref) {
		    return '';
	 }
	 var hrefarr = args[1].split('#')[0].split('&');
	 var obj = {};
	 for (var i = 0; i < hrefarr.length; i++) {
		    hrefarr[i] = hrefarr[i].split('=');
		    obj[hrefarr[i][0]] = hrefarr[i][1];
	 }
    return obj;
 }

//格式化内存单位(传入为字节)
function DiskSize(num) {
		if(num == 0) return '0 B';
		var k = 1024; //设定基础容量大小
		var sizeStr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; //容量单位
		var i = 0; //单位下标和次幂
		for(var l = 0; l < 8; l++) { //因为只有8个单位所以循环八次	  
			if(num / Math.pow(k, l) < 1) { //判断传入数值 除以 基础大小的次幂 是否小于1,这里小于1 就代表已经当前下标的单位已经不合适了所以跳出循环
						break; //小于1跳出循环		  
			}  
					i = l; //不小于1的话这个单位就合适或者还要大于这个单位 接着循环
		}      // 例: 900 / Math.pow(1024, 0)  1024的0 次幂 是1 所以只要输入的不小于1 这个最小单位就成立了;
				      //     900 / Math.pow(1024, 1)  1024的1次幂 是1024  900/1024 < 1 所以跳出循环 下边的 i = l;就不会执行  所以 i = 0; sizeStr[0] = 'B';
				      //     以此类推 直到循环结束 或 条件成立
				    
		return(num / Math.pow(k, i)).toFixed(2) + ' ' + sizeStr[i]; //循环结束 或 条件成立 返回字符

}

//计算天数差的函数,通用  
function  Datediff(sDate1,  sDate2){ 
	//sDate1和sDate2是2006-12-18格式  
	 var  aDate,  oDate1,  oDate2,  iDays  
		aDate  =  sDate1.split("-")  
		oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为12-18-2006格式  
		aDate  =  sDate2.split("-")  
		oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
		iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)    //把相差的毫秒数转换为天数  
	  return  iDays  
 }
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值