前端常用方法封装
2018-11-27 本文已影响0人
暖年的咆哮
1.url解析
//es6的箭头函数封装,需要
parseRoute = (path) => {
var arr = (path || "").split("?"),
modules = arr[0].split("/"),
search = [],
route = {};
route.root = modules[1] || "";
route.app = modules[2] || "";
if (arr.length > 1) {
search = arr[1].split("&");
search.forEach(function (it) {
var keys = it.split("=");
if(keys.length > 0){
route[keys[0]] = keys[1];
}
});
}
return route;
}
2.时间转换成毫秒数
slewTime(msd) {
var time = parseFloat(msd) / 1000;
if (null != time && "" != time) {
if (time > 60 && time < 60 * 60) {
time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) -
parseInt(time / 60.0)) * 60) + "秒";
} else if (time >= 60 * 60 && time < 60 * 60 * 24) {
time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60) + "分钟" +
parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
} else {
time = parseInt(time) + "秒";
}
}
return time;
}
3.原生Ajax封装
var commonAjax = function (commonurl,ServiceId, ServiceMethod, id, success, fail) {
var ajax = new XMLHttpRequest();
// 使用post请求,请求地址使用参数传进来,如果为和后台商量好的固定参数,可直接定义写死,不用每次都传。
ajax.open('post',commonurl);
// 如果 使用post发送数据 必须 设置 如下内容
// 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
ajax.setRequestHeader("Content-type","application/json");
ajax.setRequestHeader("X-Service-Id",ServiceId); //接口服务ID
ajax.setRequestHeader("X-Service-Method",ServiceMethod); //接口方法名
// 发送post请求 发送的数据 写在 send方法中,其中具体的参数格式需要和后台约定好。
ajax.send(id);
// 注册事件
ajax.onreadystatechange = function () {
if(ajax.readyState == 4) {
if (ajax.status >=200 && ajax.status < 400) {
var res = JSON.parse(ajax.response);
if(res.code == 200) {
success(res);
} else {
fail(res.msg || '服务器内部错误');
}
} else {
fail(res.msg || '服务器内部错误');
}
}
}
}
4.60s倒计时 (vue写法)
getTimeOut() {
const TIME_COUNT = 60; //定义一个60s的常量
if (!this.timer) {
this.count = TIME_COUNT; //重新赋值
this.disabled = false; //启用按钮
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
this.disabled = true;
this.getMsgText = `(${this.count}s)重发`;//定义按钮内显示文本
} else {
this.disabled = false;
this.getMsgText = "获取验证码";
clearInterval(this.timer);//倒计时到0之后,删除定时器
this.timer = null;
}
}, 1000)
}
},
5.微信小程序请求promise异步封装
const BASE_URL = 'http://www.xxxx.com'
export function postAjax (url, params) {
return new Promise((resolve, reject) => {
wx.request({
url: BASE_URL + url, // 拼接完整的 url
data: params,
method: 'POST',
header: {
'Content-Type': 'application/json;charset=UTF-8',
token: token
},
success (res) {
resolve(res.data) // 把返回的数据传出去
},
fail (ret) {
reject(ret) // 把错误信息传出去
}
})
})
}
6、常用页面实时计时器
// 时间补零
//补位 当某个字段不是两位数时补0
function fnW(str){
let num;
str > 9 ? num = str : num ="0"+str;
return num;
}
// 获取当前时间
function getCurrentTime() {
let oDiv=document.getElementById("timer");
let date=new Date();
let year=date.getFullYear();//当前年份
let month=date.getMonth();//当前月份
let data=date.getDate();//天
let hours=date.getHours();//小时
let minute=date.getMinutes();//分
let second=date.getSeconds();//秒
let time=year+"-"+fnW((month+1))+"-"+fnW(data)+"
"+fnW(hours)+":"+fnW(minute)+":"+fnW(second);
oDiv.innerHTML = time
console.log(time)
}
function dsq() {
// 定义一个定时器,获取当前时间,然后拼接成字符串赋值给显示的字段,再销毁定时器
let timer = setInterval(function(){
// 获取当前时间
getCurrentTime()
console.log(2)
},500)
//
}
7.对象key值替换
replaceObjKey(keyName,val) {
let params = {
name:val,
isCheck:'1'
}
// 替换params的key值,是params传入接口需要的字段
var keyMap = {
name:keyName,
isCheck:'type'
}
for(let key in params){
let newKey = keyMap[key];
if(newKey){
params[newKey] = params[key];
delete params[key];
}
}
console.log(params)
}
//params:{keyName:val,type:'1'}