前端项目常用方法

1. 地址栏参数操作

1.1 获取参数

1. /**
2. * 根据地址栏参数名获取地址栏参数对象
3. **/
4. const getParams = () => {
5.   let oldUrl = window.location.href;
6.   let maodiaoInd = oldUrl.length;
7.   let arr = oldUrl.substring(oldUrl.indexOf("?") + 1, maodiaoInd).split("&");
8.   let obj = {};
9.   for (var i = 0; i < arr.length; i++) {
10.     arr[i] = arr[i].split("=");
11.     obj[arr[i][0]] = arr[i][1];
12.   }
13.   return obj;
14. };

复制代码

1.2 修改参数

1. /**
2. * 修改指定的url中指定的参数名对应的参数值
3. * @param {string} url 待修改url
4. * @param {string} name 待修改的参数名
5. * @param {string} value 准备赋值给指定参数的值
6. * @returns {string} 修改完成的url
7. */
8. function changeUrlParam(url, name, value) {
9.  let pattern = name + "=([^&]*)";
10.  let replaceText = name + "=" + value;
11.  if (url.match(pattern)) {
12.    let tmp = "/(" + name + "=)([^&]*)/gi";
13.    tmp = url.replace(eval(tmp), replaceText);
14.    return tmp;
15.   } else {
16.    if (url.match("[?]")) {
17.      return url + "&" + replaceText;
18.    } else {
19.      return url + "?" + replaceText;
20.    }
21.   }
22. }

复制代码

1.3 不刷新页面修改URL参数

www.cnblogs.com/wuting/p/89…
1.4 URL编码解码

JavaScript 提供四个 URL 的编码/解码方法。

• encodeURI()
  
• encodeURIComponent()
  
• decodeURI()
  
• decodeURIComponent()
  

2. 判断程序运行情况

2.1 PC 还是移动端

1. /**
2. * 判断当前程序运行环境为PC端还是移动端
3. **/
4. function judgeEquipment() {
5.  if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
6.    console.log("当前处于移动端");
7.   } else {
8.    console.log("当前处于PC");
9.   }
10.  return;
11. }

复制代码

2.2 是否为 IOS

1. /**
2. * 判断当前程序运行环境是否为ios
3. **/
4. function isIos() {
5.  let flag = navigator.userAgent.match(
6.    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
7.   );
8.  if (flag && flag[0] == "iPhone") {
9.    console.log("当前处于IOS系统");
10.   }
11.  return;
12. }

复制代码

2.3 是否为微信浏览器

1. //是否微信浏览器
2. function isWeixin() {
3.  if (
4.    navigator.userAgent.toLowerCase().match(/MicroMessenger/i) ==
5.    "micromessenger"
6.   )
7.    return true;
8.  else return false;
9. }

复制代码

3. 验证手机号码

1. /**
2. * 验证输入的手机号码是否合规
3. * @param {string} mobile 输入的手机号码
4. * @return {boolean} 手机号码是否合规
5. **/
6. function mobileAvailable(mobile) {
7.  let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
8.  if (!myreg.test(mobile)) {
9.    return false;
10.   } else {
11.    return true;
12.   }
13. }

复制代码

4. 隐藏手机号

1. /**
2. * 隐藏手机号码中间四位数字
3. * @param {string} mobile 手机号码
4. * @return {string} 隐藏后的手机号码
5. **/
6. function hideMobile(mobile) {
7.  let reg = /^(\d{3})\d{4}(\d{4})$/;
8.  mobile = mobile.replace(reg, "$1****$2");
9.  return mobile;
10. }

复制代码

5. 隐藏身份证

1. /**
2. * 隐藏身份证中间几位数字
3. * @param {string} id 身份证号
4. * @return {string} 隐藏后的身份证号
5. **/
6. function hideIdCard(id) {
7.  id = id.replace(/^(.{4})(?:\d+)(.{4})$/, "$1******$2");
8.  return id;
9. }

复制代码

6. 页面滚动指定位置

1. /**
2. * 页面滚动到指定位置，(0,0)为顶部
3. * @param {number} x 横轴坐标
4. * @param {number} y 纵轴坐标
5. **/
6. ​
7. function scrollTo(x, y) {
8.  window.scrollTo(x, y);
9. }

复制代码

7. 时间戳格式化

1. /**
2. * @description 时间戳转化为年 月 日 时 分 秒
3. * @method formatTime(timestap,format)
4. * @param {number} [timestap = new Date().getTime()] 时间戳,默认使用当前时间戳, new Date().getTime(); 获取当前时间戳（毫秒）
5. * @param {string} [format='YYYY-mm-dd HH:MM:SS'] 时间格式,不填时默认使用'YYYY-mm-dd HH:MM:SS'格式,更改只需替换中间连接符号就行'YYYY年mm月dd日 HH时MM分SS秒'
6. * @example
7. *  var sjc = 1472048779952; //js一般获取的时间戳是13位，PHP一般是10位
8.    formatTime(sjc, 'YYYY-mm-dd HH:MM:SS')
9. */
10. ​
11. const formatTime = (timestap, format = 'YYYY-MM-DD hh:mm:ss') => {
12.  let ret; let date; let renum;
13.  // 处理时间戳，将10位的时间戳处理为13位
14.  if (timestap.toString().length === 10) {
15.    date = new Date(parseInt(timestap.toString()) * 1000);
16.   } else {
17.    date = new Date(parseInt(timestap.toString()));
18.   }
19.  const option = {
20.    Y: date.getFullYear().toString(),    // 年
21.    M: (date.getMonth() + 1).toString(),    // 月
22.    D: date.getDate().toString(),    // 日
23.    h: date.getHours().toString(),    // 时
24.    m: date.getMinutes().toString(),    // 分
25.    s: date.getSeconds().toString()    // 秒
26.   };
27. ​
28.  for (let key in option) {
29.    ret = new RegExp(`(${key}+)`).exec(format);
30.    if (ret) {
31.      renum = ret[1].length === 1 ? option[key] : option[key].padStart(ret[1].length, '0');   // 根据复数前面是否补零,如“mm”补零，单“m”前面不补零
32.      format = format.replace(ret[1], renum);  // 替换
33.    }
34.   }
35. ​
36.  return format;
37. };

复制代码

8. 保留小数

1. /**
2. * 保留小数
3. * @param {number} num 要保留小数的数字
4. * @param {number} bit 要保留小数的位数，默认保留两位
5. * @return {number} 完成保留小数的数字，如果不是数字则返回"--"
6. **/
7. function keepDecimal(num, bit = 2) {
8.  let number = Number(num);
9.  if (!isNaN(number)) return number.toFixed(bit);
10.  return "--";
11. }

复制代码

9.保留小数并加单元

1. /**
2. * 保留小数，并根据传入数字添加单位
3. * @param {number} num 要保留小数的数字
4. * @param {number} bit 要保留小数的位数，默认保留两位
5. * @return {number} 完成保留小数的数字，如果不是数字则返回"--"
6. **/
7. function keepDecimal(num, bit = 2) {
8.    let number = Number(num);
9.    if (!isNaN(number)) {
10.      // 万级别
11.      if (Math.abs(number) >= 10000 && Math.abs(number) < 100000000) {
12.        number = (number / 10000).toFixed(bit) + "万";
13.      }
14.      // 亿级别
15.      else if (Math.abs(num) > 100000000) {
16.        number = (number / 100000000).toFixed(bit) + "亿";
17.      }
18.      // 其他
19.      else {
20.        number = number.toFixed(bit);
21.      }
22.      return number;
23.    } else {
24.      return "--";
25.    }
26.   }

复制代码

10. 去除空格

1. /**
2. * 去除字符串中的空格
3. * @param {string} value 要去除空格的字符串
4. * @param {number} trim 去除空格的方式，trim: 1-所有空格 2-前后空格 3-前空格 4-后空格
5. * @return {string} 去除空格后的字符串
6. **/
7.  function trim(value, trim) {
8.    switch (trim) {
9.      case 1:
10.        return value.replace(/\s+/g, "");
11.      case 2:
12.        return value.replace(/(^\s*)|(\s*$)/g, "");
13.      case 3:
14.        return value.replace(/(^\s*)/g, "");
15.      case 4:
16.        return value.replace(/(\s*$)/g, "");
17.      default:
18.        return value;
19.    }
20.   },

复制代码

11. 范例判断

1. /**
2. * 判断传入的变量是什么数据类型
3. * @param {任意类型} variable 任意数据类型的变量
4. * @return {string} 对应的数据类型，['object','array','number','string','boolean','null','undefined','date','math','regex']
5. **/
6. function type(variable){
7.    let s = Object.prototype.toString.call(o);
8.     return s.match(/[object (.*?)]/)[1].toLowerCase();
9. }

复制代码

12. 防抖与节流

防抖和节流的作用都是在高频变乱中防止函数被多次调用，是一种性能优化的方案。
区别在于，防抖函数只会在高频变乱结束后 n 毫秒调用一次函数，节流函数会在高频变乱触发过程当中每隔 n 毫秒调用一次函数。
12.1 防抖函数

触发高频变乱后一段时间（wait）只会实行一次函数，假如指定时间（wait）内高频变乱再次被触发，则重新计算时间。
应用场景：

• scroll 变乱滚动触发变乱
  
• 搜索框输入查询，假如用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户制止输入的时间，再调用，设置一个符合的时间隔断，有效减轻服务端压力。
  
• 表单验证
  
• 按钮提交变乱。
  
• 浏览器窗口缩放，resize 变乱(如窗口制止改变巨细之后重新计算结构)等。
  

1. /**
2. * 防抖，高频事件结束后 n 毫秒调用一次函数
3. * @param {function} func 要调用防抖的函数
4. * @param {number} wait 间隔调用的毫秒数
5. * @return {function} 返回的执行函数
6. **/
7. function debounce(func, wait) {
8.  let timeout = null;
9.  return function() {
10.    let context = this;
11.    let args = arguments;
12.    if (timeout) clearTimeout(timeout);
13.    timeout = setTimeout(() => {
14.      func.apply(context, args);
15.    }, wait);
16.   };
17. }

复制代码

12.2 节流函数

规定在一个单元时间内，只能触发一次函数。假如这个单元时间内触发多次函数，只有一次生效。
常见的应用场景都是利用高频变乱来调用函数的过程当中，好比应用于 window 对象的 resize、scroll 变乱，拖拽时的 mousemove 变乱，文字输入、自动完成的 keyup 变乱。
应用场景：

• DOM 元素的拖拽功能实现（mousemove）
  
• 搜索遐想（keyup）
  
• 计算鼠标移动的距离（mousemove）
  
• Canvas 模仿画板功能（mousemove）
  
• 射击游戏的 mousedown/keydown 变乱（单元时间只能发射一颗子弹）
  
• 监听滚动变乱判断是否到页面底部自动加载更多
  

1. [/code] [code]/**
2. * 节流，在高频事件触发过程当中每隔 n 毫秒调用一次函数
3. * @param {function} func 要调用防抖的函数
4. * @param {number} wait 间隔调用的毫秒数
5. * @return {function} 返回的执行函数
6. **/
7. function throttle(func, wait) {
8.  let timeout = null;
9.  return function() {
10.    let context = this;
11.    let args = arguments;
12.    if (!timeout) {
13.      timeout = setTimeout(() => {
14.        timeout = null;
15.        func.apply(context, args);
16.      }, wait);
17.    }
18.   };
19. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。