前端项目常用方法

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);
    }
  };
}