IT评测·应用市场-qidao123.com技术社区
标题:
前端项目常用方法
[打印本页]
作者:
祗疼妳一个
时间:
2024-9-2 22:26
标题:
前端项目常用方法
1. 地址栏参数操作
1.1 获取参数
/**
* 根据地址栏参数名获取地址栏参数对象
**/
const getParams = () => {
let oldUrl = window.location.href;
let maodiaoInd = oldUrl.length;
let arr = oldUrl.substring(oldUrl.indexOf("?") + 1, maodiaoInd).split("&");
let obj = {};
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("=");
obj[arr[i][0]] = arr[i][1];
}
return obj;
};
复制代码
1.2 修改参数
/**
* 修改指定的url中指定的参数名对应的参数值
* @param {string} url 待修改url
* @param {string} name 待修改的参数名
* @param {string} value 准备赋值给指定参数的值
* @returns {string} 修改完成的url
*/
function changeUrlParam(url, name, value) {
let pattern = name + "=([^&]*)";
let replaceText = name + "=" + value;
if (url.match(pattern)) {
let tmp = "/(" + name + "=)([^&]*)/gi";
tmp = url.replace(eval(tmp), replaceText);
return tmp;
} else {
if (url.match("[?]")) {
return url + "&" + replaceText;
} else {
return url + "?" + replaceText;
}
}
}
复制代码
1.3 不刷新页面修改URL参数
www.cnblogs.com/wuting/p/89…
1.4 URL编码解码
JavaScript 提供四个 URL 的编码/解码方法。
encodeURI()
encodeURIComponent()
decodeURI()
decodeURIComponent()
2. 判断程序运行情况
2.1 PC 还是移动端
/**
* 判断当前程序运行环境为PC端还是移动端
**/
function judgeEquipment() {
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
console.log("当前处于移动端");
} else {
console.log("当前处于PC");
}
return;
}
复制代码
2.2 是否为 IOS
/**
* 判断当前程序运行环境是否为ios
**/
function isIos() {
let flag = navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
if (flag && flag[0] == "iPhone") {
console.log("当前处于IOS系统");
}
return;
}
复制代码
2.3 是否为微信浏览器
//是否微信浏览器
function isWeixin() {
if (
navigator.userAgent.toLowerCase().match(/MicroMessenger/i) ==
"micromessenger"
)
return true;
else return false;
}
复制代码
3. 验证手机号码
/**
* 验证输入的手机号码是否合规
* @param {string} mobile 输入的手机号码
* @return {boolean} 手机号码是否合规
**/
function mobileAvailable(mobile) {
let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(mobile)) {
return false;
} else {
return true;
}
}
复制代码
4. 隐藏手机号
/**
* 隐藏手机号码中间四位数字
* @param {string} mobile 手机号码
* @return {string} 隐藏后的手机号码
**/
function hideMobile(mobile) {
let reg = /^(\d{3})\d{4}(\d{4})$/;
mobile = mobile.replace(reg, "$1****$2");
return mobile;
}
复制代码
5. 隐藏身份证
/**
* 隐藏身份证中间几位数字
* @param {string} id 身份证号
* @return {string} 隐藏后的身份证号
**/
function hideIdCard(id) {
id = id.replace(/^(.{4})(?:\d+)(.{4})$/, "$1******$2");
return id;
}
复制代码
6. 页面滚动指定位置
/**
* 页面滚动到指定位置，(0,0)为顶部
* @param {number} x 横轴坐标
* @param {number} y 纵轴坐标
**/
function scrollTo(x, y) {
window.scrollTo(x, y);
}
复制代码
7. 时间戳格式化
/**
* @description 时间戳转化为年 月 日 时 分 秒
* @method formatTime(timestap,format)
* @param {number} [timestap = new Date().getTime()] 时间戳,默认使用当前时间戳, new Date().getTime(); 获取当前时间戳（毫秒）
* @param {string} [format='YYYY-mm-dd HH:MM:SS'] 时间格式,不填时默认使用'YYYY-mm-dd HH:MM:SS'格式,更改只需替换中间连接符号就行'YYYY年mm月dd日 HH时MM分SS秒'
* @example
* var sjc = 1472048779952; //js一般获取的时间戳是13位，PHP一般是10位
formatTime(sjc, 'YYYY-mm-dd HH:MM:SS')
*/
const formatTime = (timestap, format = 'YYYY-MM-DD hh:mm:ss') => {
let ret; let date; let renum;
// 处理时间戳，将10位的时间戳处理为13位
if (timestap.toString().length === 10) {
date = new Date(parseInt(timestap.toString()) * 1000);
} else {
date = new Date(parseInt(timestap.toString()));
}
const option = {
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 key in option) {
ret = new RegExp(`(${key}+)`).exec(format);
if (ret) {
renum = ret[1].length === 1 ? option[key] : option[key].padStart(ret[1].length, '0'); // 根据复数前面是否补零,如“mm”补零，单“m”前面不补零
format = format.replace(ret[1], renum); // 替换
}
}
return format;
};
复制代码
8. 保留小数
/**
* 保留小数
* @param {number} num 要保留小数的数字
* @param {number} bit 要保留小数的位数，默认保留两位
* @return {number} 完成保留小数的数字，如果不是数字则返回"--"
**/
function keepDecimal(num, bit = 2) {
let number = Number(num);
if (!isNaN(number)) return number.toFixed(bit);
return "--";
}
复制代码
9.保留小数并加单元
/**
* 保留小数，并根据传入数字添加单位
* @param {number} num 要保留小数的数字
* @param {number} bit 要保留小数的位数，默认保留两位
* @return {number} 完成保留小数的数字，如果不是数字则返回"--"
**/
function keepDecimal(num, bit = 2) {
let number = Number(num);
if (!isNaN(number)) {
// 万级别
if (Math.abs(number) >= 10000 && Math.abs(number) < 100000000) {
number = (number / 10000).toFixed(bit) + "万";
}
// 亿级别
else if (Math.abs(num) > 100000000) {
number = (number / 100000000).toFixed(bit) + "亿";
}
// 其他
else {
number = number.toFixed(bit);
}
return number;
} else {
return "--";
}
}
复制代码
10. 去除空格
/**
* 去除字符串中的空格
* @param {string} value 要去除空格的字符串
* @param {number} trim 去除空格的方式，trim: 1-所有空格 2-前后空格 3-前空格 4-后空格
* @return {string} 去除空格后的字符串
**/
function trim(value, trim) {
switch (trim) {
case 1:
return value.replace(/\s+/g, "");
case 2:
return value.replace(/(^\s*)|(\s*$)/g, "");
case 3:
return value.replace(/(^\s*)/g, "");
case 4:
return value.replace(/(\s*$)/g, "");
default:
return value;
}
},
复制代码
11. 范例判断
/**
* 判断传入的变量是什么数据类型
* @param {任意类型} variable 任意数据类型的变量
* @return {string} 对应的数据类型，['object','array','number','string','boolean','null','undefined','date','math','regex']
**/
function type(variable){
let s = Object.prototype.toString.call(o);
return s.match(/[object (.*?)]/)[1].toLowerCase();
}
复制代码
12. 防抖与节流
防抖和节流的作用都是在高频变乱中防止函数被多次调用，是一种性能优化的方案。
区别在于，防抖函数只会在高频变乱结束后 n 毫秒调用一次函数，节流函数会在高频变乱触发过程当中每隔 n 毫秒调用一次函数。
12.1 防抖函数
触发高频变乱后一段时间（wait）只会实行一次函数，假如指定时间（wait）内高频变乱再次被触发，则重新计算时间。
应用场景：
scroll 变乱滚动触发变乱
搜索框输入查询，假如用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户制止输入的时间，再调用，设置一个符合的时间隔断，有效减轻服务端压力。
表单验证
按钮提交变乱。
浏览器窗口缩放，resize 变乱(如窗口制止改变巨细之后重新计算结构)等。
/**
* 防抖，高频事件结束后 n 毫秒调用一次函数
* @param {function} func 要调用防抖的函数
* @param {number} wait 间隔调用的毫秒数
* @return {function} 返回的执行函数
**/
function debounce(func, wait) {
let timeout = null;
return function() {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
复制代码
12.2 节流函数
规定在一个单元时间内，只能触发一次函数。假如这个单元时间内触发多次函数，只有一次生效。
常见的应用场景都是利用高频变乱来调用函数的过程当中，好比应用于 window 对象的 resize、scroll 变乱，拖拽时的 mousemove 变乱，文字输入、自动完成的 keyup 变乱。
应用场景：
DOM 元素的拖拽功能实现（mousemove）
搜索遐想（keyup）
计算鼠标移动的距离（mousemove）
Canvas 模仿画板功能（mousemove）
射击游戏的 mousedown/keydown 变乱（单元时间只能发射一颗子弹）
监听滚动变乱判断是否到页面底部自动加载更多
[/code] [code]/**
* 节流，在高频事件触发过程当中每隔 n 毫秒调用一次函数
* @param {function} func 要调用防抖的函数
* @param {number} wait 间隔调用的毫秒数
* @return {function} 返回的执行函数
**/
function throttle(func, wait) {
let timeout = null;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args);
}, wait);
}
};
}
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)
Powered by Discuz! X3.4