当前位置：首页 > news >正文

前端项目常用方法

news 2025/6/7 0:43:28

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 事件（单位时间只能发射一颗子弹）
监听滚动事件判断是否到页面底部自动加载更多

/*** 节流，在高频事件触发过程当中每隔 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);}};
}

查看全文

http://www.mrgr.cn/news/17480.html