前端开发常用的方法封装

1. 截取地址栏里携带的参数

/**
 * 解析地址
 * @param url
 * @param name
 * @returns {string|null}
 */
export function getQueryString(url, name) {
   
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  let r = ("?" + url.split("?")[1]).substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

2.时间转换工具

/**
 * 时间戳转换工具
 * @param timestamp 时间戳
 * @returns {string} yy-mm-dd
 */
export function formatDate(timestamp) {
   
  if (!timestamp) {
   
    return "";
  }
  let date = new Date(timestamp);
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
   
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
   
    strDate = "0" + strDate;
  }
  let dateStr = date.getFullYear() + "-" + month + "-" + strDate;
  return dateStr;
}
/**
 * 时间戳转换工具
 * @param timestamp 毫秒时间戳
 * @returns {string} yy-mm-dd-hh-mm-ss
 */
export function formatTime(timestamp) {
   
  if (!timestamp) {
   
    return "";
  }
  let date = new Date(timestamp);
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  if (month >= 1 && month <= 9) {
   
    month = "0" + month;
  }
  let strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  let min =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  let sec =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  let dateStr =
    year + "-" + month + "-" + strDate + " " + hours + ":" + min + ":" + sec;
  return dateStr;
}
/**
 * 时间戳转换工具
 * @param timestamp 毫秒时间戳
 * @returns {string} yy-mm-dd-hh-mm-ss
 */
export function formatTime(timestamp) {
   
  if (!timestamp) {
   
    return "";
  }
  let date = new Date(timestamp);
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
   
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
   
    strDate = "0" + strDate;
  }
  let dateStr =
    date.getFullYear() +
    "-" +
    month +
    "-" +
    strDate +
    " " +
    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
    ":" +
    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    ":" +
    (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
  return dateStr;
}
/**
 * 获取当前时间
 * @returns {string} yyyy-MM-dd格式
 */
export function newDate() {
   
  let date = new Date();
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
   
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
   
    strDate = "0" + strDate;
  }
  let dateStr = date.getFullYear() + "-" + month + "-" + strDate;
  return dateStr;
}
/**
 * n天前的时间
 * @param n 时间差
 * @returns {string} yyyy-MM-dd格式
 */
export function beforeDate(n) {
   
  let date = new Date().getTime();
  date = date - n * 24 * 60 * 60 * 1000;
  return formatDate(date);
}
Date.prototype.format = function (fmt) {
   
  let o = {
   
    "M+": this.getMonth() + 1, //月份
    "d+": this.getDate(), //日
    "h+": this.getHours(), //小时
    "m+": this.getMinutes(), //分
    "s+": this.getSeconds(), //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  for (let k in o)
    if (new RegExp("(" + k + ")").test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
  return fmt;
};
export default Date;

3. 字符串的截取

/**
 * 字符串截取
 * @param str 字符串
 * @param n 截至字符的下标
 * @returns {*}
 */
export function subString(str, n) {
   
  if (!n) return str;
  let sign = str.length <= n ? "" : "...";
  return str.substring(0, n) + sign;
}

4.判断当前元素是否是数组

 *
 * @param {
   constructor} value
 * @returns
 */
// 1，通过 constructor 判断
function isArray(value) {
   
  return value && typeof value == "object" && value.constructor === Array;
}
/**
 *
 * @param {instanceof} value
 * @returns
 */
//  2，通过instanceof 判断判断

function isArray(value) {
   
  return value && typeof value == "object" && value instanceof Array;
}
/**
 *
 * @param toString value
 * @returns
 */
//  3，通过 toString 判断
function isArray(value) {
   
  return (
    Array.isArray(value) ||
    (typeof value == "object" &&
      Object.prototype.toString.call(value) === "[object Array]")
  );
}

5.判断是否是对象

/**
 *
 * @param {isObject} value
 * @returns
 */
function isObject(value) {
   
  return (
    value != null &&
    typeof value === "object" &&
    Object.prototype.toString.call(value) === "[object Object]"
  );
}

6.判断浏览器环境

// 1，判断是否安卓
/**
 *
 * @returns isAndroid
 */
function isAndroid() {
   
  return (
    /Android/i.test(navigator.userAgent) || /Linux/i.test(navigator.appVersion)
  );
}
// 2，判断是否ios
/**
 *
 * @returns isIOS
 */
function isIOS() {
   
  return /ipad|iphone/i.test(navigator.userAgent);
}
// 3，判断是否是Safari
/**
 *
 * @returns isSafari
 */

function isSafari() {
   
  return /msie|applewebkit.+safari/i.test(navigator.userAgent);
}
// 4，判断是否在微信
/**
 *
 * @returns isWeixin
 */

function isWeixin() {
   
  return /MicroMessenger/i.test(navigator.userAgent);
}

7.使用promise封装ajax(对jq的ajax的封装)

/**
 *
 * @param {$ajax} config
 * @returns
 */
function $ajax(config) {
   
  return new Promise(function (resolve, reject) {
   
    $.ajax(
      $.extend({
   }, config, {
   
        success: function (data) {
   
          if (data && data.success === false) {
   
            reject(data);
          } else {
   
            resolve(data);
          }
        },
        error: function (...args) {
   
          console.error(config, ...args);
          reject(...args);
        },
      })
    );
  });
}
// 2，添加跨域的ajax
/**
 *
 * @param {ajax} config
 * @returns
 */
function ajax(config) {
   
  return new Promise(function (resolve, reject) {
   
    $.ajax(
      $.extend(
        {
   
          xhrFields: {
   
            withCredentials: true,
          },
          crossDomain: true,
        },
        config,
        {
   
          success: function (data) {
   
            if (data && data.success === false) {
   
              reject(data);
            } else {
   
              resolve(data);
            }
          },
          error: function (...args) {
   
            console.error(config, ...args);
            reject(...args);
          },
        }
      )
    );
  });
}
//对于ajax请求，我们可能直接将后续的一些业务逻辑直接写在了ajax的会调里，如果业务逻辑比较复杂，就会造成代码嵌套层级较深，不好阅读与维护。这里我们用promise对ajax进行简单的封装，这样我们将后续的业务写在then()里，可以避免‘回调地狱’的产生

8.获取滚动的高度

export const getScrollPosition = (el = window) => ({
   
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
});
// 33.滚动到顶部
export const scrollToTop = () => {
   
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
   
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
// 是否在视口的范围内
export const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
   
  const {
    top, left, bottom, right } = el.getBoundingClientRect();
  const {
    innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

9.洗牌算法随机

/**
 *
 * @param {shuffle} arr
 * @returns
 */
export const shuffle = (arr) => {
   
  let result = [],
    random;
  while (arr.length > 0) {
   
    random = Math.floor(Math.random() * arr.length);
    result.push(arr[random]);
    arr.splice(random, 1);
  }
  return result;
};

10.劫持粘贴板

export const copyTextToClipboard = (value) => {
   
  let textArea = document.createElement("textarea");
  textArea.style.background = "transparent";
  textArea.value = value;
  document.body.appendChild(textArea);
  textArea.select();
  try {
   
    let successful = document.execCommand("copy");
  } catch (err) {
   
    console.log("Oops, unable to copy");
  }
  document.body.removeChild(textArea);
};

11.判断类型集合

export const checkStr = (str, type) => {
   
  switch (type) {
   
    case "phone": //手机号码
      return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);
    case "tel": //座机
      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
    case "card": //身份证
      return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
    case "pwd": //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
      return /^[a-zA-Z]\w{5,17}$/.test(str);
    case "postal": //邮政编码
      return /[1-9]\d{5}(?!\d)/.test(str);
    case "QQ": //QQ号
      return /^[1-9][0-9]{4,9}$/.test(str);
    case "email": //邮箱
      return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
    case "money": //金额(小数点2位)
      return /^\d*(?:\.\d{0,2})?$/.test(str);
    case "URL": //网址
      return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(
        str
      );
    case "IP": //IP
      return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(
        str
      );
    case "date": //日期时间
      return (
        /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(
          str
        ) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
      );
    case "number": //数字
      return /^[0-9]$/.test(str);
    case "english": //英文
      return /^[a-zA-Z]+$/.test(str);
    case "chinese": //中文
      return /^[\\u4E00-\\u9FA5]+$/.test(str);
    case "lower": //小写
      return /^[a-z]+$/.test(str);
    case "upper": //大写
      return /^[A-Z]+$/.test(str);
    case "HTML": //HTML标记
      return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);
    default:
      return true;
  }
};

12.严格的身份证校验和身份证城市

export const isCardID = (sId) => {
   
  if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {
   
    console.log("你输入的身份证长度或格式错误");
    return false;
  }
  //身份证城市
  let aCity = {
   
    11: "北京",
    12: "天津",
    13: "河北",
    14: "山西",
    15: "内蒙古",
    21: "辽宁",
    22: "吉林",
    23: "黑龙江",
    31: "上海",
    32: "江苏",
    33: "浙江",
    34: "安徽",
    35: "福建",
    36: "江西",
    37: "山东",
    41: "河南",
    42: "湖北",
    43: "湖南",
    44: "广东",
    45: "广西",
    46: "海南",
    50: "重庆",
    51: "四川",
    52: "贵州",
    53: "云南",
    54: "西藏",
    61: "陕西",
    62: "甘肃",
    63: "青海",
    64: "宁夏",
    65: "新疆",
    71: "台湾",
    81: "香港",
    82: "澳门",
    91: "国外",
  };
  if (!aCity[parseInt(sId.substr(0, 2))]) {
   
    console.log("你的身份证地区非法");
    return false;
  }

13.出生日期验证和身份证号码校验

let sBirthday = (
      sId.substr(6, 4) +
      "-" +
      Number(sId.substr(10, 2)) +
      "-" +
      Number(sId.substr(12, 2))
    ).replace(/-/g, "/"),
    d = new Date(sBirthday);
  if (
    sBirthday !=
    d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()
  ) {
   
    console.log("身份证上的出生日期非法");
    return false;
  }

  // 身份证号码校验
  let sum = 0,
    weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
    codes = "10X98765432";
  for (let i = 0; i < sId.length - 1; i++) {
   
    sum += sId[i] * weights[i];
  }
  let last = codes[sum % 11]; //计算出来的最后一位身份证号码
  if (sId[sId.length - 1] != last) {
   
    console.log("你输入的身份证号非法");
    return false;
  }

  return true;
};

14.随机数范围

export const random = (min, max) => {
   
  if (arguments.length === 2) {
   
    return Math.floor(min + Math.random() * (max + 1 - min));
  } else {
   
    return null;
  }
};