1. 程式人生 > >前端開發專案中 常用到的 方法(整理)

前端開發專案中 常用到的 方法(整理)

前端開發專案中 常用到的 方法

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

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