來源 | http://www.fly63.com/article/detial/10362

這是我在實際開發(fā)中常用的一些js函數(shù)方法，今天總結(jié)了一下，以便以后查詢，有需要的小伙伴可以參考下。

有些人或許會覺得忘了百度就完事兒，No no no！這事兒我真的親自實踐過好多次，百度一次記住了還好，記不住下次碰著了還得找度娘簡直是拉低工作效率。

1、加載js || css || style

  const loadRes = function(name, type, fn) { // 加載js || css || style  let ref  if (type === 'js') { // 外部js    ref = document.createElement('script')    ref.setAttribute('type', 'text/JavaScript')    ref.setAttribute('src', name)  } else if (type === 'css') { // 外部css    ref = document.createElement('link')    ref.setAttribute('rel', 'stylesheet')    ref.setAttribute('type', 'text/css')    ref.setAttribute('href', name)  } else if (type === 'style') { // style    ref = document.createElement('style')    ref.innerhtml = name  }  if (typeof ref !== 'undefined') {    document.getElementsByTagName('head')[0].appendChild(ref)    ref.onload = function() { // 加載完成執(zhí)行      typeof fn === 'function' && fn()    }  }}

2、獲取url參數(shù)

const getUrlParam = function(name) { // 獲取url參數(shù)  let reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i')  let r = window.location.href.substr(1).match(reg)  if (r != null) {    return decodeURI(r[2])  }  return undefined}

3、本地存儲

const store = { // 本地存儲  set: function(name, value, day) { // 設(shè)置    let d = new Date()    let time = 0    day = (typeof(day) === 'undefined' || !day) ? 1 : day // 時間,默認存儲1天    time = d.setHours(d.getHours() + (24 * day)) // 毫秒    localStorage.setItem(name, JSON.stringify({      data: value,      time: time    }))  },  get: function(name) { // 獲取    let data = localStorage.getItem(name)    if (!data) {      return null    }    let obj = JSON.parse(data)    if (new Date().getTime() > obj.time) { // 過期      localStorage.removeItem(name)      return null    } else {      return obj.data    }  },  clear: function(name) { // 清空    if (name) { // 刪除鍵為name的緩存      localStorage.removeItem(name)    } else { // 清空全部      localStorage.clear()    }  }}

4、cookie操作【set，get，del】

const cookie = { // cookie操作【set，get，del】  set: function(name, value, day) {    let oDate = new Date()    oDate.setDate(oDate.getDate() + (day || 30))    document.cookie = name + '=' + value + ';expires=' + oDate + "; path=/;"  },  get: function(name) {    let str = document.cookie    let arr = str.split('; ')    for (let i = 0; i < arr.length; i++) {      let newArr = arr[i].split('=')      if (newArr[0] === name) {        return newArr[1]      }    }  },  del: function(name) {    this.set(name, '', -1)  }}

5、Js獲取元素樣式【支持內(nèi)聯(lián)】

const getRealStyle = function(obj, styleName) { // Js獲取元素樣式【支持內(nèi)聯(lián)】  var realStyle = null  if (obj.currentStyle) {    realStyle = obj.currentStyle[styleName]  } else if (window.getComputedStyle) {    realStyle = window.getComputedStyle(obj, null)[styleName]  }  return realStyle}

6、時間格式化

const formatDate = function(fmt, date) { // 時間格式化 【'yyyy-MM-dd hh:mm:ss',時間】  if (typeof date !== 'object') {    date = !date ? new Date() : new Date(date)  }  var o = {    'M+': date.getMonth() + 1, // 月份    'd+': date.getDate(), // 日    'h+': date.getHours(), // 小時    'm+': date.getMinutes(), // 分    's+': date.getSeconds(), // 秒    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度    'S': date.getMilliseconds() // 毫秒  }  if (/(y+)/.test(fmt)) {    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))  }  for (var 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}

7、原生ajax操作

const ajax = function(conf) { // ajax操作  let url = conf.url,    data = conf.data,    senData = [], // 封裝后的數(shù)據(jù)    async = conf.async !== undefined ? conf.async : true, // ture為異步請求      type = conf.type || 'get', // 默認請求方式get      dataType = conf.dataType || 'json',      contenType = conf.contenType || 'application/x-www-form-urlencoded',      success = conf.success,      error = conf.error,      isForm = conf.isForm || false, // 是否formdata      header = conf.header || {}, // 頭部信息      xhr = '' // 創(chuàng)建ajax引擎對象  if (data == null) {    senData = ''  } else if (typeof data === 'object' && !isForm) { // 如果data是對象，轉(zhuǎn)換為字符串    for (var k in data) {      senData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]))    }    senData = senData.join('&')  } else {    senData = data  }  try {    xhr = new ActiveXObject('microsoft.xmlhttp') // IE內(nèi)核系列瀏覽器  } catch (e1) {    try {      xhr = new XMLHttpRequest() // 非IE內(nèi)核瀏覽器    } catch (e2) {      if (error != null) {        error('不支持ajax請求')      }    }  };  xhr.open(type, type !== 'get' ? url : url + '?' + senData, async)  if (type !== 'get' && !isForm) {    xhr.setRequestHeader('content-type', contenType)  }  for (var h in header) {    xhr.setRequestHeader(h, header[h])  }  xhr.send(type !== 'get' ? senData : null)  xhr.onreadystatechange = function() {    if (xhr.readyState === 4) {      if (xhr.status >= 200 && xhr.status < 300) {        if (dataType === 'json' && success != null) {          let res = ''          try {            res = eval('(' + xhr.responseText + ')')          } catch (e) {            console.log(e)          }          success(res) // 將json字符串轉(zhuǎn)換為js對象        };      } else {        if (error != null) {          error('通訊失敗!' + xhr.status)        }      }    }  }}

8、fetch請求的封裝

const fetch = function(url, setting) { // fetch請求的封裝  let opts = { // 設(shè)置參數(shù)的初始值    method: (setting.method || 'GET').toUpperCase(), // 請求方式    headers: setting.headers || {}, // 請求頭設(shè)置    credentials: setting.credentials || true, // 設(shè)置cookie是否一起發(fā)送    body: setting.body || {},    mode: setting.mode || 'no-cors', // 可以設(shè)置 cors, no-cors, same-origin    redirect: setting.redirect || 'follow', // follow, error, manual    cache: setting.cache || 'default' // 設(shè)置 cache 模式 (default, reload, no-cache)  }  let dataType = setting.dataType || 'json' // 解析方式  let data = setting.data || '' // 參數(shù)  let paramsFormat = function(obj) { // 參數(shù)格式    var str = ''    for (var i in obj) {      str += `${i}=${obj[i]}&`    }    return str.split('').slice(0, -1).join('')  }
  if (opts.method === 'GET') {    url = url + (data ? `?${paramsFormat(data)}` : '')  } else {    setting.body = data || {}  }  return new Promise((resolve, reject) => {    fetch(url, opts).then(async res => {      let data = dataType === 'text' ? await res.text() : dataType === 'blob' ? await res.blob() : await res.json()      resolve(data)    }).catch(e => {      reject(e)    })  })}

9、設(shè)備判斷：android、ios、web

const isDevice = function() { // 判斷是android還是ios還是web  var ua = navigator.userAgent.toLowerCase()  if (ua.match(/iPhone\sOS/i) === 'iphone os' || ua.match(/iPad/i) === 'ipad') { // ios    return 'iOS'  }  if (ua.match(/Android/i) === 'android') {    return 'Android'  }  return 'Web'}

10、判斷是否為微信

const isWx = function() { // 判斷是否為微信  var ua = window.navigator.userAgent.toLowerCase()  if (ua.match(/MicroMessenger/i) === 'micromessenger') {    return true  }  return false}

11、文本復(fù)制功能

const copyTxt = function(text, fn) { // 復(fù)制功能  if (typeof document.execCommand !== 'function') {    console.log('復(fù)制失敗，請長按復(fù)制')    return  }  var dom = document.createElement('textarea')  dom.value = text  dom.setAttribute('style', 'display: block;width: 1px;height: 1px;')  document.body.appendChild(dom)  dom.select()  var result = document.execCommand('copy')  document.body.removeChild(dom)  if (result) {    console.log('復(fù)制成功')    typeof fn === 'function' && fn()    return  }  if (typeof document.createRange !== 'function') {    console.log('復(fù)制失敗，請長按復(fù)制')    return  }  var range = document.createRange()  var div = document.createElement('div')  div.innerhtml = text  div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;')  document.body.appendChild(div)  range.selectNode(div)  var selection = window.getSelection()  console.log(selection)  if (selection.rangeCount > 0) {    selection.removeAllRanges()  }  selection.addRange(range)  document.execCommand('copy')  typeof fn === 'function' && fn()  console.log('復(fù)制成功')}

12、判斷是否是一個數(shù)組

const isArray = function(arr) { // 判斷是否是一個數(shù)組  return Object.prototype.toString.call(arr) === '[object Array]'}

13、判斷兩個數(shù)組是否相等

const arrayEqual = function(arr1, arr2) { //判斷兩個數(shù)組是否相等  if (arr1 === arr2) return true;  if (arr1.length != arr2.length) return false;  for (let i = 0; i < arr1.length; ++i) {    if (arr1[i] !== arr2[i]) return false;  }  return true;}

14、時間與時間戳轉(zhuǎn)換

const stamp = { // 時間，時間戳轉(zhuǎn)換  getTime: function(time) { // 時間轉(zhuǎn)10位時間戳    let date = time ? new Date(time) : new Date()    return Math.round(date.getTime() / 1000)  },  timeToStr: function(time, fmt) { // 10位時間戳轉(zhuǎn)時間    return new Date(time * 1000).pattern(fmt || 'yyyy-MM-dd')  }}

15、常用正則驗證

const checkStr = function(str, type) { // 常用正則驗證，注意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之間，只能包含字母、數(shù)字和下劃線      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': // 金額(小數(shù)點2位)      return /^\d*(?:\.\d{0,2})?$/.test(str)    case 'URL': // 網(wǎng)址      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': // 數(shù)字      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  }}

16、是否為PC端

const isPC = function() { // 是否為PC端  let userAgentInfo = navigator.userAgent  let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']  let flag = true  for (let v = 0; v < Agents.length; v++) {    if (userAgentInfo.indexOf(Agents[v]) > 0) {      flag = false      break    }  }  return flag}

17、去除字符串空格

const trim = function(str, type) { // 去除空格， type:  1-所有空格  2-前后空格  3-前空格 4-后空格  type = type || 1  switch (type) {    case 1:      return str.replace(/\s+/g, '')    case 2:      return str.replace(/(^\s*)|(\s*$)/g, '')    case 3:      return str.replace(/(^\s*)/g, '')    case 4:      return str.replace(/(\s*$)/g, '')    default:      return str  }}

18、字符串大小寫轉(zhuǎn)換

const changeCase = function(str, type) { // 字符串大小寫轉(zhuǎn)換 type:  1:首字母大寫  2：首頁母小寫  3：大小寫轉(zhuǎn)換  4：全部大寫  5：全部小寫  type = type || 4  switch (type) {    case 1:      return str.replace(/\b\w+\b/g, function(word) {        return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()      })    case 2:      return str.replace(/\b\w+\b/g, function(word) {        return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()      })    case 3:      return str.split('').map(function(word) {        if (/[a-z]/.test(word)) {          return word.toUpperCase()        } else {          return word.toLowerCase()        }      }).join('')    case 4:      return str.toUpperCase()    case 5:      return str.toLowerCase()    default:      return str  }}

19、過濾html代碼

const filterTag = function(str) { // 過濾html代碼(把<>轉(zhuǎn)換)  str = str.replace(/&/ig, '&')  str = str.replace(/</ig, '<')  str = str.replace(/>/ig, '>')  str = str.replace(' ', ' ')  return str}

20、生成隨機數(shù)范圍

const random = function(min, max) { // 生成隨機數(shù)范圍  if (arguments.length === 2) {    return Math.floor(min + Math.random() * ((max + 1) - min))  } else {    return null  }}

21、阿拉伯數(shù)字轉(zhuǎn)中文大寫數(shù)字

const numberToChinese = function(num) { // 將阿拉伯數(shù)字翻譯成中文的大寫數(shù)字  let AA = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十')  let BB = new Array('', '十', '百', '仟', '萬', '億', '點', '')  let a = ('' + num).replace(/(^0*)/g, '').split('.')  let k = 0  let re = ''  for (let i = a[0].length - 1; i >= 0; i--) {    switch (k) {      case 0:        re = BB[7] + re        break      case 4:        if (!new RegExp('0{4}//d{' + (a[0].length - i - 1) + '}$').test(a[0])) {          re = BB[4] + re        }        break      case 8:        re = BB[5] + re        BB[7] = BB[5]        k = 0        break    }    if (k % 4 === 2 && a[0].charAt(i + 2) !== 0 && a[0].charAt(i + 1) === 0) {      re = AA[0] + re    }    if (a[0].charAt(i) !== 0) {      re = AA[a[0].charAt(i)] + BB[k % 4] + re    }    k++  }  if (a.length > 1) { // 加上小數(shù)部分(如果有小數(shù)部分)    re += BB[6]    for (let i = 0; i < a[1].length; i++) {      re += AA[a[1].charAt(i)]    }  }  if (re === '一十') {    re = '十'  }  if (re.match(/^一/) && re.length === 3) {    re = re.replace('一', '')  }  return re}

22、原生dom操作

const dom = {  $: function(selector) {    let type = selector.substring(0, 1)    if (type === '#') {      if (document.querySelecotor) return document.querySelector(selector)      return document.getElementById(selector.substring(1))    } else if (type === '.') {      if (document.querySelecotorAll) return document.querySelectorAll(selector)      return document.getElementsByClassName(selector.substring(1))    } else {      return document['querySelectorAll' ? 'querySelectorAll' : 'getElementsByTagName'](selector)    }  },  hasClass: function(ele, name) { /* 檢測類名 */    return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'))  },  addClass: function(ele, name) { /* 添加類名 */    if (!this.hasClass(ele, name)) ele.className += ' ' + name  },  removeClass: function(ele, name) { /* 刪除類名 */    if (this.hasClass(ele, name)) {      let reg = new RegExp('(\\s|^)' + name + '(\\s|$)')      ele.className = ele.className.replace(reg, '')    }  },  replaceClass: function(ele, newName, oldName) { /* 替換類名 */    this.removeClass(ele, oldName)    this.addClass(ele, newName)  },  siblings: function(ele) { /* 獲取兄弟節(jié)點 */    console.log(ele.parentNode)    let chid = ele.parentNode.children,      eleMatch = []    for (let i = 0, len = chid.length; i < len; i++) {      if (chid[i] !== ele) {        eleMatch.push(chid[i])      }    }    return eleMatch  },  getByStyle: function(obj, name) { /* 獲取行間樣式屬性 */    if (obj.currentStyle) {      return obj.currentStyle[name]    } else {      return getComputedStyle(obj, false)[name]    }  },  domToStirng: function(htmlDOM) { /* DOM轉(zhuǎn)字符串 */    var div = document.createElement('div')    div.appendChild(htmlDOM)    return div.innerHTML  },  stringToDom: function(htmlString) { /* 字符串轉(zhuǎn)DOM */    var div = document.createElement('div')    div.innerHTML = htmlString    return div.children[0]  }}

23、判斷圖片加載完成

const imgLoadAll = function(arr, callback) { // 圖片加載  let arrImg = []  for (let i = 0; i < arr.length; i++) {    let img = new Image()    img.src = arr[i]    img.onload = function() {      arrImg.push(this)      if (arrImg.length == arr.length) {        callback && callback()      }    }  }}

24、音頻加載完成操作

const loadAudio = function(src, callback) { // 音頻加載  var audio = new Audio(src)  audio.onloadedmetadata = callback  audio.src = src}

25、光標所在位置插入字符

const insertAtCursor = function(dom, val) { // 光標所在位置插入字符  if (document.selection) {    dom.focus()    let sel = document.selection.createRange()    sel.text = val    sel.select()  } else if (dom.selectionStart || dom.selectionStart == '0') {    let startPos = dom.selectionStart    let endPos = dom.selectionEnd    let restoreTop = dom.scrollTop    dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length)    if (restoreTop > 0) {      dom.scrollTop = restoreTop    }    dom.focus()    dom.selectionStart = startPos + val.length    dom.selectionEnd = startPos + val.length  } else {    dom.value += val    dom.focus()  }}

26、圖片地址轉(zhuǎn)base64

const getBase64 = function(img) { //傳入圖片路徑，返回base64，使用getBase64(url).then(function(base64){},function(err){});   let getBase64Image = function(img, width, height) { //width、height調(diào)用時傳入具體像素值，控制大小,不傳則默認圖像大小    let canvas = document.createElement("canvas");    canvas.width = width ? width : img.width;    canvas.height = height ? height : img.height;    let ctx = canvas.getContext("2d");    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);    let dataURL = canvas.toDataURL();    return dataURL;  }  let image = new Image();  image.crossOrigin = '';  image.src = img;  let deferred = $.Deferred();  if (img) {    image.onload = function() {      deferred.resolve(getBase64Image(image));    }    return deferred.promise();  }}

27、base64圖片下載功能

const downloadFile = function(base64, fileName) { //base64圖片下載功能  let base64ToBlob = function(code) {    let parts = code.split(';base64,');    let contentType = parts[0].split(':')[1];    let raw = window.atob(parts[1]);    let rawLength = raw.length;    let uInt8Array = new Uint8Array(rawLength);    for (let i = 0; i < rawLength; ++i) {      uInt8Array[i] = raw.charCodeAt(i);    }    return new Blob([uInt8Array], {      type: contentType    });  };  let aLink = document.createElement('a');  let blob = base64ToBlob(base64); //new Blob([content]);  let evt = document.createEvent("HTMLEvents");  evt.initEvent("click", true, true); //initEvent不加后兩個參數(shù)在FF下會報錯  事件類型，是否冒泡，是否阻止瀏覽器的默認行為  aLink.download = fileName;  aLink.href = URL.createObjectURL(blob);  aLink.click();}

28、瀏覽器是否支持webP格式圖片

const isSupportWebP = function() { //判斷瀏覽器是否支持webP格式圖片  return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;}

29、url參數(shù)轉(zhuǎn)對象

const parseQueryString = function(url) { //url參數(shù)轉(zhuǎn)對象  url = !url ? window.location.href : url;  if (url.indexOf('?') === -1) {    return {};  }  let search = url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1);  if (search === '') {    return {};  }  search = search.split('&');  let query = {};  for (let i = 0; i < search.length; i++) {    let pair = search[i].split('=');    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');  }  return query;}

30、對象序列化【對象轉(zhuǎn)url參數(shù)】

const stringfyQueryString = function(obj) { //對象序列化【對象轉(zhuǎn)url參數(shù)】  if (!obj) return '';  let pairs = [];  for (let key in obj) {    let value = obj[key];    if (value instanceof Array) {      for (let i = 0; i < value.length; ++i) {        pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));      }      continue;    }    pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));  }  return pairs.join('&');}

31、H5軟鍵盤縮回、彈起回調(diào)

const h5Resize = function(downCb, upCb) { //當軟件鍵盤彈起會改變當前 window.innerHeight，監(jiān)聽這個值變化 [downCb 當軟鍵盤彈起后，縮回的回調(diào),upCb 當軟鍵盤彈起的回調(diào)]  var clientHeight = window.innerHeight;  downCb = typeof downCb === 'function' ? downCb : function() {}  upCb = typeof upCb === 'function' ? upCb : function() {}  window.addEventListener('resize', () => {    var height = window.innerHeight;    if (height === clientHeight) {      downCb();    }    if (height < clientHeight) {      upCb();    }  });}

32、函數(shù)防抖

const debounce = function(func, wait, immediate) { //函數(shù)防抖[func 函數(shù),wait 延遲執(zhí)行毫秒數(shù),immediate true 表立即執(zhí)行,false 表非立即執(zhí)行,立即執(zhí)行是觸發(fā)事件后函數(shù)會立即執(zhí)行，然后n秒內(nèi)不觸發(fā)事件才能繼續(xù)執(zhí)行函數(shù)的效果]  let timeout;  return function() {    let context = this;    let args = arguments;    if (timeout) clearTimeout(timeout);    if (immediate) {      var callNow = !timeout;      timeout = setTimeout(() => {        timeout = null;      }, wait)      if (callNow) func.apply(context, args)    } else {      timeout = setTimeout(function() {        func.apply(context, args)      }, wait);    }  }}

33、函數(shù)節(jié)流

const throttle = function(func, wait ,type) { //函數(shù)節(jié)流 [func 函數(shù) wait 延遲執(zhí)行毫秒數(shù) type 1 表時間戳版，2 表定時器版]    if(type===1){        let previous = 0;    }else if(type===2){        let timeout;    }    return function() {        let context = this;        let args = arguments;        if(type===1){            let now = Date.now();            if (now - previous > wait) {                func.apply(context, args);                previous = now;            }        }else if(type===2){            if (!timeout) {                timeout = setTimeout(() => {                    timeout = null;                    func.apply(context, args)                }, wait)            }        }    }}

學(xué)習(xí)更多技能

請點擊下方公眾號