欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

能夠讓你事半功倍的JS?utils工具函數(shù)詳解

 更新時(shí)間：2022年05月31日 11:00:55   作者：南城大前端  
js-utils封裝了常用的工具函數(shù),開箱即用,下面這篇文章主要給大家介紹了關(guān)于能夠事半功倍的JS?utils工具函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

今日分享一篇積累和收集了很久的JS utils工具函數(shù)，文章代碼量較多，建議收藏起來慢慢看，當(dāng)哪一天需要用到的時(shí)候，打開你塵封已久的收藏夾，相信能讓你的業(yè)務(wù)代碼開發(fā)事半功倍。

匯集了時(shí)間相關(guān)，DOM相關(guān)，URL相關(guān)，判斷相關(guān)，圖片相關(guān)，緩存相關(guān)等。部分邏輯處理較為簡單，如果是業(yè)務(wù)量較為復(fù)雜的情況建議要斟酌使用，但對(duì)于大部分的項(xiàng)目應(yīng)該是綽綽有余。接下來就進(jìn)入代碼部分吧～

時(shí)間相關(guān)

時(shí)間戳轉(zhuǎn)自定義格式時(shí)間

export const dateRegExp = (time, strText) => {
  const date = new Date(time)
  if (/(y+)/.test(strText)) {
    strText = strText.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  const dataType = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (const typeKey in dataType) {
    if (new RegExp(`(${typeKey})`).test(strText)) {
      const typeValue = dataType[typeKey] + ''
      strText = strText.replace(RegExp.$1, (RegExp.$1.length === 1 ? typeValue : padLeftZero(typeValue)))
    }
  }
  return strText
}

格式化距離現(xiàn)在已過去的時(shí)間

export function formatPassTime(startTime) {
    var currentTime = Date.parse(new Date()),
        time = currentTime - startTime,
        day = parseInt(time / (1000 * 60 * 60 * 24)),
        hour = parseInt(time / (1000 * 60 * 60)),
        min = parseInt(time / (1000 * 60)),
        month = parseInt(day / 30),
        year = parseInt(month / 12);
    if (year) return year + "年前"
    if (month) return month + "個(gè)月前"
    if (day) return day + "天前"
    if (hour) return hour + "小時(shí)前"
    if (min) return min + "分鐘前"
    else return '剛剛'
}

判斷兩個(gè)不同格式的日期是否為同一天

export function isSameDay(d1, d2) {
    if (!d2) {
        d2 = new Date();
    }
    var d1_year = d1.getFullYear(),
        d1_month = d1.getMonth() + 1,
        d1_date = d1.getDate();
    var d2_year = d2.getFullYear(),
        d2_month = d2.getMonth() + 1,
        d2_date = d2.getDate()

    return d1_date === d2_date && d1_month === d2_month && d1_year === d2_year;
}

判斷時(shí)間是不是今天

export function isTodayDate(time) {
    if (new Date(time).toDateString() === new Date().toDateString()) {
        return true;
    }
    return false;
}

URL 相關(guān)

URL 參數(shù)轉(zhuǎn)對(duì)象

export function parseQueryString(url) {
    url = url ? url:window.location.search ;
    let search = url[0] === '?' ? url : url.substring(url.lastIndexOf('?')); 
    let q = {};
    search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => q[k] = decodeURIComponent(v));
    return q;
}

獲取URL參數(shù)

export function getQueryString(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  const r = window.location.search.substr(1).match(reg)
  if (r !== null) {
    return decodeURI(r[2])
  }
  return null
}

獲取URL hash后面的參數(shù)

export getHashQueryString = (key) => {
  const after = window.location.href.split('?')[1]
  if (after) {
    const reg = new RegExp(`(^|&)${  key  }=([^&]*)(&|$)`)
    const r = after.match(reg)
    if (r != null) {
      return decodeURIComponent(r[2])
    }
    return null
  }
  return null
}

對(duì)象序列化

export function serialize(query, encode = false) {
  return Object.keys(query)
    .map((key) => `${key}=${encode ? encodeURIComponent(query[key]) : query[key]}`)
    .join('&')
}

判斷相關(guān)

判斷是否支持 Intersection

export function isSupportIntersection() {
  return (
    'IntersectionObserver' in window &&
    'IntersectionObserverEntry' in window &&
    'intersectionRatio' in window.IntersectionObserverEntry.prototype
  )
}

判斷是否IOS

export const isIOS = (() => {
  return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
})()

判斷是否安卓

export const isAndroid = (() {
  return /android/.test(navigator.userAgent.toLowerCase())
})()

判斷微信內(nèi)置瀏覽器

export function isWeixin() {
  var ua = navigator.userAgent.toLowerCase();
  return (ua.match(/MicroMessenger/i) == "micromessenger")
}

判斷是否支持webp格式 2種方式

export function checkSupportWebp() {
  return (
    document
      .createElement('canvas')
      .toDataURL('image/webp')
      .indexOf('data:image/webp') === 0
  )
}
export function checkSupportWebp2() {
  var img = new Image();
  img.onload = img.onerror = (event) => {
    return event && event.type === "load" ? img.width == 1 : false;
  };
  img.src = "data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=";
}

判斷瀏覽器是否是移動(dòng)端

export function isMobile() {
    const agent = navigator.userAgent;
    const k = ["android", "iphone", "ipod", "ipad", "windows phone", "mqqbrowser"];
    let flag = false;
    // Windows
    if (agent.indexOf("Windows NT") < 0 || (agent.indexOf("Windows NT") >= 0 && agent.indexOf("compatible; MSIE 9.0;") >= 0)) {
        // Mac PC
        if (agent.indexOf("Windows NT") < 0 && agent.indexOf("Macintosh") < 0) {
            for (let item of k) {
                if (agent.indexOf(item) >= 0) {
                    flag = true;
                    break;
                }
            }
        }
    }
    return flag;
}

文件類型判斷

export function checkFileName(fileName, list) {
    if (typeof fileName !== 'string') return;
    let name = fileName.toLowerCase();
    return list.some(i => name.endsWith(`.${i}`) === true)
}

export function isImage(fileName) {
    return checkFileName(fileName, ['png', 'jpeg', 'jpg', 'png', 'bmp'])
}

export function isH5Video(fileName) {
    return checkFileName(fileName, ['mp4', 'webm', 'ogg'])
}
export function isPdf(fileName) {
    return checkFileName(fileName, ['pdf'])
}

export function isWord(fileName) {
    return checkFileName(fileName, ['doc', 'docx'])
}

export function isExcel(fileName) {
    return checkFileName(fileName, ['xlsx', 'xls'])
}

數(shù)據(jù)類型判斷

export function is(subject, type) {
  return Object.prototype.toString.call(subject).substr(8, type.length).toLowerCase() === type
}
export function isArray(subject) {
  return Array.isArray(subject)
}
export function isObject(subject) {
  return is(subject, 'object')
}

...

export function isNum(subject) {
  return !isNaN(subject) && is(subject, 'number')
}

DOM 相關(guān)

查詢?cè)厥欠翊嬖谀硞€(gè) class

export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
  return reg.test(el.className);
}

給某個(gè)元素添加 class

export function addClass(el, className) {
  if (hasClass(el, className)) {
    return;
  }
  let curClass = el.className.split(' ');
  curClass.push(className);
  el.className = curClass.join(' ');
}

刪除某個(gè)元素的 class

export function removeClass(el, className) {
  if (!hasClass(el, className)) {
    return;
  }

  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g');
  el.className = el.className.replace(reg, ' ');
}

獲取頁面滾動(dòng)距離

export function getScrollTop() {
  let e = 0
  return (
    document.documentElement && document.documentElement.scrollTop
      ? (e = document.documentElement.scrollTop)
      : document.body && (e = document.body.scrollTop),
    e
  )
}

滾動(dòng)到某個(gè)位置回調(diào)

export function distanceScroll(distance, callback) {
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  const docHeight = document.body.clientHeight
  const screenHeight = window.screen.availHeight
  const differ = scrollTop > docHeight - screenHeight - distance
  if (differ) {
    callback && callback()
  }
}

撥打電話

export const callPhone = (phone) => {
  const aElement = document.createElement('a')
  aElement.setAttribute('href', `tel:${phone}`)
  document.body.appendChild(aElement)
  aElement.click()
  document.body.removeChild(aElement)
}

復(fù)制文本

export function copy(value, callback) {
  if (!document.queryCommandSupported('copy')) {
    callback('暫不支持復(fù)制')
    return
  }
  const textarea = document.createElement('textarea')
  textarea.value = value
  textarea.readOnly = Boolean('readOnly')
  document.body.appendChild(textarea)
  textarea.select()
  textarea.setSelectionRange(0, value.length)
  document.execCommand('copy')
  textarea.remove()
  callback('復(fù)制成功')
}

動(dòng)態(tài)加載第三方j(luò)s

export function asyncLoadScript(url) {
  return new Promise(function (resolve, reject) {
    const tag = document.getElementsByTagName('script')
    for (const i of tag) {
      if (i.src === url) {
        resolve()
        return
      }
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = url
    script.onerror = reject
    document.body.appendChild(script)
    script.onload = () => {
      resolve()
    }
  })
}

解決 requestAnimationFrame 的兼容問題

export function requestAnimationFrame() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
    return setTimeout(callback, (callback.interval || （100 / 60) / 2);
  };
}()

動(dòng)態(tài)創(chuàng)建form表單導(dǎo)出數(shù)據(jù)(POST)

const postExport = (url, data = {}) => {
  const form = document.createElement("form");
  form.style.display = "none";
  form.action = `${Config.baseURL}${url}`;
  form.method = "post";
  document.body.appendChild(form);
  // 動(dòng)態(tài)創(chuàng)建input并給value賦值
  for (const key in data) {
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = key;
    input.value = data[key];
    form.appendChild(input);
  }
  form.submit();
  form.remove();
}

圖片相關(guān)

base64轉(zhuǎn)Buffer

export function dataURItoBuffer(dataURI) {
  var byteString = atob(dataURI.split(',')[1]);
  var buffer = new ArrayBuffer(byteString.length);
  var view = new Uint8Array(buffer);

  for (var i = 0; i < byteString.length; i++) {
    view[i] = byteString.charCodeAt(i);
  }

  return buffer;
}

base64轉(zhuǎn)Blob

export function dataURItoBlob(dataURI) {
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var buffer = dataURItoBuffer(dataURI);
  return new Blob([buffer], {
    type: mimeString
  });
}

調(diào)整拍照?qǐng)D片方向

export function orientationHelper(canvas, ctx, orientation) {
  var w = canvas.width;
  var h = canvas.height;

  if (orientation > 4) {
    canvas.width = h;
    canvas.height = w;
  }

  switch (orientation) {
    case 2:
      ctx.translate(w, 0);
      ctx.scale(-1, 1);
      break;

    case 3:
      ctx.translate(w, h);
      ctx.rotate(Math.PI);
      break;

    case 4:
      ctx.translate(0, h);
      ctx.scale(1, -1);
      break;

    case 5:
      ctx.rotate(0.5 * Math.PI);
      ctx.scale(1, -1);
      break;

    case 6:
      ctx.rotate(0.5 * Math.PI);
      ctx.translate(0, -h);
      break;

    case 7:
      ctx.rotate(0.5 * Math.PI);
      ctx.translate(w, -h);
      ctx.scale(-1, 1);
      break;

    case 8:
      ctx.rotate(-0.5 * Math.PI);
      ctx.translate(-w, 0);
      break;
  }
}

緩存相關(guān)

獲取指定 Cookie 值

export const getCookie = (k) => {
  const res = RegExp('(^|; )' + encodeURIComponent(k) + '=([^;]*)').exec(document.cookie)
  return res && res[2]
}

設(shè)置 Cookie 值

export function setCookie(name, value, expriesDays, encode = false) {
  var Days = expriesDays || 10
  var exp = new Date()
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
  const val = encode ? escape(value) : value
  document.cookie = name + '=' + val + ';domain=zhuanzhuan.com;path=/;expires=' + exp.toUTCString()
}

簡易版 Storage 操作，sessionStorage 及 localStorage 類似

const prefix = '_XXX_'
export function getStorage(key) {
  const content = sessionStorage.getItem(`${prefix}${key}`)
  if (content) {
    try {
      const params = JSON.parse(content)
      const expires = params.expires
      // 未設(shè)置過期 及 未過期
      if (!expires || (expires && Date.now() <= expires)) {
        return params.data
      }
    } catch (e) {
      console.log(e)
    }
  }
}

export function setStorage(key, data = {}, expires) {
  try {
    const params = { data }
    if (expires) {
      params.expires = expires
    }
    sessionStorage.setItem(`${prefix}${key}`, JSON.stringify(params))
  } catch (e) {
    console.log(e)
  }
}

數(shù)字相關(guān)

數(shù)字四舍五入，保留n位小數(shù)

export function round(number, n) {
    n = n ? parseInt(n) : 0
    if (n <= 0) return Math.round(number)
    number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n)
    return number
}

數(shù)字每千位加逗號(hào)

export function toThousands(num) {
  return num && num.toString()
    .replace(/\d+/, function(s){
         return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
     })
}

隨機(jī)數(shù)

export function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

字符串相關(guān)

手機(jī)號(hào)碼中間4位隱藏星號(hào)

export function hideMobile(mobile) {
  return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
}

檢測密碼強(qiáng)度 1：密碼弱 2：密碼中等 3：密碼強(qiáng) 4：密碼很強(qiáng)

export function checkPassWord(str) {
    let level = 0;
    if (str.length < 6) {
        return level
    };
    if (/[0-9]/.test(str)) {
        level++
    };
    if (/[a-z]/.test(str)) {
        level++
    };
    if (/[A-Z]/.test(str)) {
        level++
    };
    if(/\W/.test(str)){
        level++
    }
    return level
}

隨機(jī)產(chǎn)生某個(gè)顏色

export function randomColor() {
  return `rgb(${this.random(0, 255)}, ${this.random(0, 255)}, ${this.random(0, 255)})`
}

字符串替換全部

export function replaceAll(s0, s1, s2){
  return s0.replace(new RegExp(s1, "gm"), s2);
}

版本號(hào)比較

傳入兩個(gè)版本號(hào)，格式如：4.3.2，返回結(jié)果，小于-1，等于0，大于1。

export function compareVersion(v1, v2) {
  var s1 = v1.split(".").map(v => parseInt(v));
  var s2 = v2.split(".").map(v => parseInt(v));

  var len1 = s1.length, len2 = s2.length, commonLen = Math.min(len1, len2);
  for (var i = 0; i < commonLen; ++i) {
    if (seq1[i] != seq2[i])
      return seq1[i]<seq2[i] ? -1 : 1;
  }

  return len1 === len2 ? 0 : (len1 < len2 ? -1 : 1);
}

對(duì)象轉(zhuǎn)url字符串供導(dǎo)出接口(GET)使用

const objectToQueryString = (paramObj) => {
  const tmpArray = []
  // 特殊字符轉(zhuǎn)義
  const filter = (str) => {
    str += '' // 隱式轉(zhuǎn)換
    str = str.replace(/%/g, '%25')
    str = str.replace(/\+/g, '%2B')
    str = str.replace(/ /g, '%20')
    str = str.replace(/\//g, '%2F')
    str = str.replace(/\?/g, '%3F')
    str = str.replace(/&/g, '%26')
    str = str.replace(/\=/g, '%3D')
    str = str.replace(/#/g, '%23')
    return str
  }
  for (const attr in paramObj) {
    tmpArray.push(`${attr}=${filter(paramObj[attr])}`)
  }
  return tmpArray.join('&')
}

其他

函數(shù)防抖

export function debounce(fn, delay) {
  delay = delay || 1000;
  let timer = null;
  return function () {
    let context = this;
    let arg = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(context, arg);
    }, delay);
  };
}

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

export function throttle(fn, delay = 300) {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        fn.apply(context, args);
        clearTimeout(timer);
      }, delay);
    }
  };
}

最后

除開本文所示的場景，也還有很多沒有列舉到的情況，如果你有認(rèn)為很不錯(cuò)的工具函數(shù)，歡迎留言交流～

到此這篇關(guān)于能夠事半功倍的JS utils工具函數(shù)的文章就介紹到這了,更多相關(guān)JS utils工具函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Bootstrap模態(tài)框水平垂直居中與增加拖拽功能

    Bootstrap模態(tài)框水平垂直居中與增加拖拽功能

    最近開發(fā)一個(gè)CMS系統(tǒng)使用上了Bootstrap，在開發(fā)一個(gè)添加某些選項(xiàng)時(shí)，打算彈出一個(gè)模態(tài)框，但是發(fā)現(xiàn)，模態(tài)框不會(huì)垂直居中到屏幕上，而是在屏幕上方,通過查閱資料才解決此問題，下面小編給大家分享解決思路
    2016-11-11
  • js改變文章字體大小的實(shí)例代碼

    js改變文章字體大小的實(shí)例代碼

    這篇文章主要介紹了js改變文章字體大小的實(shí)例代碼，有需要的朋友可以參考一下
    2013-11-11
  • Angular組件拿不到@Input輸入屬性問題探究解決方法

    Angular組件拿不到@Input輸入屬性問題探究解決方法

    最近在工作中實(shí)現(xiàn)一個(gè)feature的時(shí)候，碰到一個(gè)小問題：Angular組件拿不到@Input輸入屬性的問題，盡管對(duì)這些問題都比較了解，但是找問題是需要一個(gè)過程的，所以還是把這個(gè)問題總結(jié)記錄了下
    2023-01-01
  • JavaScript錯(cuò)誤處理

    JavaScript錯(cuò)誤處理

    這篇文章主要介紹了JavaScript錯(cuò)誤處理的相關(guān)資料,需要的朋友可以參考下
    2015-02-02
  • Javascript 判斷函數(shù)類型完美解決方案

    Javascript 判斷函數(shù)類型完美解決方案

    在判斷函數(shù)類型時(shí)，我們通常使用typeof方法，一般情況下，它會(huì)得到我們所預(yù)想的效果。
    2009-09-09
  • js動(dòng)態(tài)設(shè)置div的值下例子

    js動(dòng)態(tài)設(shè)置div的值下例子

    設(shè)置div的值想必大家都會(huì)吧，按要說動(dòng)態(tài)設(shè)置想必知道的人及寥寥無幾了，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助
    2013-10-10
  • JavaScript JSON數(shù)據(jù)處理全集(小結(jié))

    JavaScript JSON數(shù)據(jù)處理全集(小結(jié))

    這篇文章主要介紹了JavaScript JSON數(shù)據(jù)處理全集，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 中止javascript執(zhí)行的方法

    中止javascript執(zhí)行的方法

    本篇文章主要是對(duì)中止javascript執(zhí)行的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
    2014-02-02
  • 用javascript關(guān)閉本窗口不彈出詢問框的方法

    用javascript關(guān)閉本窗口不彈出詢問框的方法

    ie中用close關(guān)閉非open打開的窗口時(shí)回彈出一個(gè)對(duì)話框詢問用戶，怎么去掉這個(gè)框呢，在window.close之前加上window.top.opener = null就可以了
    2014-09-09
  • Echarts基本用法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    Echarts基本用法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    這篇文章主要介紹了Echarts基本用法，詳解的介紹了Echarts的基本用法和實(shí)例，有興趣的可以了解一下
    2017-08-08

最新評(píng)論