前端开发项目中 常用到的 方法（整理）

前端开发项目中 常用到的 方法##

1. 获取URL参数

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null; //返回参数值
  };

2.设置cookie

  function setCookie(cname, cvalue, path, options, domain) {
    var d = new Date();
    var exdays = 30;
    if (options) {
      exdays = options;
    };
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    if (domain) {
      expires = expires + ";domain=" + domain
    }
    document.cookie = cname + "=" + cvalue + ";path=" + path + ";" + expires;
  };//

3.谷歌统计

  (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
  ga('create', 'UA-16260521-4', 'auto');
  ga('send', 'pageview');

4.百度统计

   //1
	var _hmt = _hmt || [];
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?e9add3503553870155de901fff7a27f0";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);

	//2 事件添加统计
	if(_hmt) _hmt.push(['_trackEvent','key1','key2','key3'])

5.常用的正则rxg

let telRex =/^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/ //手机
let qqRex = /^[1-9][0-9]{4,11}$/;   //QQ
let getHtml = /<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g;;;/<[^>]+>/g //匹配标签名

6.class操作

function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}
function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }
  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}
function removeClass( el,className){ 
  if( hasClass( el,className) ){ 
    el.className = el.className.replace( new RegExp( "(\\s|^)" + className+ "(\\s|$)" ), " " );
  }; 
};

7.获取data-后面属性值

function getData(el, name, val) {
  const prefix = 'data-'
  if (val) {
    return el.setAttribute(prefix + name, val)
  }
  return el.getAttribute(prefix + name)
}

8.随机打乱数组

//获取随机数
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
//打乱数组
function shuffle(arr) {
  let _arr = arr.slice()
  for (let i = 0; i < _arr.length; i++) {
    let j = getRandomInt(0, i)
    let t = _arr[i]
    _arr[i] = _arr[j]
    _arr[j] = t
  }
  return _arr
}

9.定时器防抖动

function debounce(func, delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}