• 33个常用JavaScript功能已封装成方法

    1、加载js ||css || style

    1. const loadRes = function(name, type, fn) { // 加载js || css || style
    2.  let ref
    3.  if (type === 'js') { // 外部js
    4.    ref = document.createElement('script')
    5.    ref.setAttribute('type', 'text/javascript')
    6.    ref.setAttribute('src', name)
    7. } else if (type === 'css') { // 外部css
    8.    ref = document.createElement('link')
    9.    ref.setAttribute('rel', 'stylesheet')
    10.    ref.setAttribute('type', 'text/css')
    11.    ref.setAttribute('href', name)
    12. } else if (type === 'style') { // style
    13.    ref = document.createElement('style')
    14.    ref.innerhtml = name
    15. }
    16.  if (typeof ref !== 'undefined') {
    17.    document.getElementsByTagName('head')[0].appendChild(ref)
    18.    ref.onload = function() { // 加载完成执行
    19.      typeof fn === 'function' && fn()
    20.   }
    21. }
    22. }

    2、获取url参数

    1. const getUrlParam = function(name) { // 获取url参数
    2.  let reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i')
    3.  let r = window.location.href.substr(1).match(reg)
    4.  if (r != null) {
    5.    return decodeURI(r[2])
    6. }
    7.  return undefined
    8. }

    3、本地存储

    1. const store = { // 本地存储
    2.  set: function(name, value, day) { // 设置
    3.    let d = new Date()
    4.    let time = 0
    5.    day = (typeof(day) === 'undefined' || !day) ? 1 : day // 时间,默认存储1天
    6.    time = d.setHours(d.getHours() + (24 * day)) // 毫秒
    7.    localStorage.setItem(name, JSON.stringify({
    8.      data: value,
    9.      time: time
    10.   }))
    11. },
    12.  get: function(name) { // 获取
    13.    let data = localStorage.getItem(name)
    14.    if (!data) {
    15.      return null
    16.   }
    17.    let obj = JSON.parse(data)
    18.    if (new Date().getTime() > obj.time) { // 过期
    19.      localStorage.removeItem(name)
    20.      return null
    21.   } else {
    22.      return obj.data
    23.   }
    24. },
    25.  clear: function(name) { // 清空
    26.    if (name) { // 删除键为name的缓存
    27.      localStorage.removeItem(name)
    28.   } else { // 清空全部
    29.      localStorage.clear()
    30.   }
    31. }
    32. }

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

    1. const cookie = { // cookie操作【set，get，del】
    2.  set: function(name, value, day) {
    3.    let oDate = new Date()
    4.    oDate.setDate(oDate.getDate() + (day || 30))
    5.    document.cookie = name + '=' + value + ';expires=' + oDate + "; path=/;"
    6. },
    7.  get: function(name) {
    8.    let str = document.cookie
    9.    let arr = str.split('; ')
    10.    for (let i = 0; i < arr.length; i++) {
    11.      let newArr = arr[i].split('=')
    12.      if (newArr[0] === name) {
    13.        return newArr[1]
    14.     }
    15.   }
    16. },
    17.  del: function(name) {
    18.    this.set(name, '', -1)
    19. }
    20. }

    5、Js获取元素样式【支持内联】

    1. const getRealStyle = function(obj, styleName) { // Js获取元素样式【支持内联】
    2.  var realStyle = null
    3.  if (obj.currentStyle) {
    4.    realStyle = obj.currentStyle[styleName]
    5. } else if (window.getComputedStyle) {
    6.    realStyle = window.getComputedStyle(obj, null)[styleName]
    7. }
    8.  return realStyle
    9. }

    6、时间格式化

    1. const formatDate = function(fmt, date) { // 时间格式化 【'yyyy-MM-dd hh:mm:ss',时间】
    2.  if (typeof date !== 'object') {
    3.    date = !date ? new Date() : new Date(date)
    4. }
    5.  var o = {
    6.    'M+': date.getMonth() + 1, // 月份
    7.    'd+': date.getDate(), // 日
    8.    'h+': date.getHours(), // 小时
    9.    'm+': date.getMinutes(), // 分
    10.    's+': date.getSeconds(), // 秒
    11.    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    12.    'S': date.getMilliseconds() // 毫秒
    13. }
    14.  if (/(y+)/.test(fmt)) {
    15.    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    16. }
    17.  for (var k in o) {
    18.    if (new RegExp('(' + k + ')').test(fmt)) {
    19.      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    20.   }
    21. }
    22.  return fmt
    23. }

    7、原生ajax操作

    1. const ajax = function(conf) { // ajax操作
    2.  let url = conf.url,
    3.    data = conf.data,
    4.    senData = [], // 封装后的数据
    5.    async = conf.async !== undefined ? conf.async : true, // ture为异步请求
    6.      type = conf.type || 'get', // 默认请求方式get
    7.      dataType = conf.dataType || 'json',
    8.      contenType = conf.contenType || 'application/x-www-form-urlencoded',
    9.      success = conf.success,
    10.      error = conf.error,
    11.      isForm = conf.isForm || false, // 是否formdata
    12.      header = conf.header || {}, // 头部信息
    13.      xhr = '' // 创建ajax引擎对象
    14.  if (data == null) {
    15.    senData = ''
    16. } else if (typeof data === 'object' && !isForm) { // 如果data是对象，转换为字符串
    17.    for (var k in data) {
    18.      senData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]))
    19.   }
    20.    senData = senData.join('&')
    21. } else {
    22.    senData = data
    23. }
    24.  try {
    25.    xhr = new ActiveXObject('microsoft.xmlhttp') // IE内核系列浏览器
    26. } catch (e1) {
    27.    try {
    28.      xhr = new XMLHttpRequest() // 非IE内核浏览器
    29.   } catch (e2) {
    30.      if (error != null) {
    31.        error('不支持ajax请求')
    32.     }
    33.   }
    34. };
    35.  xhr.open(type, type !== 'get' ? url : url + '?' + senData, async)
    36.  if (type !== 'get' && !isForm) {
    37.    xhr.setRequestHeader('content-type', contenType)
    38. }
    39.  for (var h in header) {
    40.    xhr.setRequestHeader(h, header[h])
    41. }
    42.  xhr.send(type !== 'get' ? senData : null)
    43.  xhr.onreadystatechange = function() {
    44.    if (xhr.readyState === 4) {
    45.      if (xhr.status >= 200 && xhr.status < 300) {
    46.        if (dataType === 'json' && success != null) {
    47.          let res = ''
    48.          try {
    49.            res = eval('(' + xhr.responseText + ')')
    50.         } catch (e) {
    51.            console.log(e)
    52.         }
    53.          success(res) // 将json字符串转换为js对象
    54.       };
    55.     } else {
    56.        if (error != null) {
    57.          error('通讯失败!' + xhr.status)
    58.       }
    59.     }
    60.   }
    61. }
    62. }

    8、fetch请求的封装

    1. const fetch = function(url, setting) { // fetch请求的封装
    2.  let opts = { // 设置参数的初始值
    3.    method: (setting.method || 'GET').toUpperCase(), // 请求方式
    4.    headers: setting.headers || {}, // 请求头设置
    5.    credentials: setting.credentials || true, // 设置cookie是否一起发送
    6.    body: setting.body || {},
    7.    mode: setting.mode || 'no-cors', // 可以设置 cors, no-cors, same-origin
    8.    redirect: setting.redirect || 'follow', // follow, error, manual
    9.    cache: setting.cache || 'default' // 设置 cache 模式 (default, reload, no-cache)
    10. }
    11.  let dataType = setting.dataType || 'json' // 解析方式
    12.  let data = setting.data || '' // 参数
    13.  let paramsFormat = function(obj) { // 参数格式
    14.    var str = ''
    15.    for (var i in obj) {
    16.      str += `${i}=${obj[i]}&`
    17.   }
    18.    return str.split('').slice(0, -1).join('')
    19. }
    20.  
    21.  if (opts.method === 'GET') {
    22.    url = url + (data ? `?${paramsFormat(data)}` : '')
    23. } else {
    24.    setting.body = data || {}
    25. }
    26.  return new Promise((resolve, reject) => {
    27.    fetch(url, opts).then(async res => {
    28.      let data = dataType === 'text' ? await res.text() : dataType === 'blob' ? await res.blob() : await res.json()
    29.      resolve(data)
    30.   }).catch(e => {
    31.      reject(e)
    32.   })
    33. })
    34. }

    9、设备判断：android、ios、web

    1. var isDevice = function() {  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    2.    return 'iOS';
    3. } else if (/(Android)/i.test(navigator.userAgent)) {
    4.     return 'Android'; }  return 'Web';};

    10、判断是否为微信

    1. const isWx = function() { // 判断是否为微信
    2.  var ua = window.navigator.userAgent.toLowerCase()
    3.  if (ua.match(/MicroMessenger/i) === 'micromessenger') {
    4.    return true
    5. }
    6.  return false
    7. }

    11、文本复制功能

    1. const copyTxt = function(text, fn) { // 复制功能
    2.  if (typeof document.execCommand !== 'function') {
    3.    console.log('复制失败，请长按复制')
    4.    return
    5. }
    6.  var dom = document.createElement('textarea')
    7.  dom.value = text
    8.  dom.setAttribute('style', 'display: block;width: 1px;height: 1px;')
    9.  document.body.appendChild(dom)
    10.  dom.select()
    11.  var result = document.execCommand('copy')
    12.  document.body.removeChild(dom)
    13.  if (result) {
    14.    console.log('复制成功')
    15.    typeof fn === 'function' && fn()
    16.    return
    17. }
    18.  if (typeof document.createRange !== 'function') {
    19.    console.log('复制失败，请长按复制')
    20.    return
    21. }
    22.  var range = document.createRange()
    23.  var div = document.createElement('div')
    24.  div.innerHTML = text
    25.  div.setAttribute('style', 'height: 1px;fontSize: 1px;overflow: hidden;')
    26.  document.body.appendChild(div)
    27.  range.selectNode(div)
    28.  var selection = window.getSelection()
    29.  console.log(selection)
    30.  if (selection.rangeCount > 0) {
    31.    selection.removeAllRanges()
    32. }
    33.  selection.addRange(range)
    34.  document.execCommand('copy')
    35.  typeof fn === 'function' && fn()
    36.  console.log('复制成功')
    37. }

    12、判断是否是一个数组

    1. const isArray = function(arr) { // 判断是否是一个数组
    2.  return Object.prototype.toString.call(arr) === '[object Array]'
    3. }

    13、判断两个数组是否相等

    1. const arrayEqual = function(arr1, arr2) { //判断两个数组是否相等
    2.  if (arr1 === arr2) return true;
    3.  if (arr1.length != arr2.length) return false;
    4.  for (let i = 0; i < arr1.length; ++i) {
    5.    if (arr1[i] !== arr2[i]) return false;
    6. }
    7.  return true;
    8. }

    14、时间与时间戳转换

    1. const stamp = { // 时间，时间戳转换
    2.  getTime: function(time) { // 时间转10位时间戳
    3.    let date = time ? new Date(time) : new Date()
    4.    return Math.round(date.getTime() / 1000)
    5. },
    6.  timeToStr: function(time, fmt) { // 10位时间戳转时间
    7.    return new Date(time * 1000).pattern(fmt || 'yyyy-MM-dd')
    8. }
    9. }

    15、常用正则验证

    1. const checkStr = function(str, type) { // 常用正则验证，注意type大小写
    2.  switch (type) {
    3.    case 'phone': // 手机号码
    4.      return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str)
    5.    case 'tel': // 座机
    6.      return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str)
    7.    case 'card': // 身份证
    8.      return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str)
    9.    case 'pwd': // 密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线
    10.      return /^[a-zA-Z]\w{5,17}$/.test(str)
    11.    case 'postal': // 邮政编码
    12.      return /[1-9]\d{5}(?!\d)/.test(str)
    13.    case 'QQ': // QQ号
    14.      return /^[1-9][0-9]{4,9}$/.test(str)
    15.    case 'email': // 邮箱
    16.      return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str)
    17.    case 'money': // 金额(小数点2位)
    18.      return /^\d*(?:\.\d{0,2})?$/.test(str)
    19.    case 'URL': // 网址
    20.      return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
    21.    case 'IP': // IP
    22.      return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str)
    23.    case 'date': // 日期时间
    24.      return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) ||
    25.        /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
    26.    case 'number': // 数字
    27.      return /^[0-9]$/.test(str)
    28.    case 'english': // 英文
    29.      return /^[a-zA-Z]+$/.test(str)
    30.    case 'chinese': // 中文
    31.      return /^[\u4E00-\u9FA5]+$/.test(str)
    32.    case 'lower': // 小写
    33.      return /^[a-z]+$/.test(str)
    34.    case 'upper': // 大写
    35.      return /^[A-Z]+$/.test(str)
    36.    case 'HTML': // HTML标记
    37.      return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str)
    38.    default:
    39.      return true
    40. }
    41. }

    16、是否为PC端

    1. const isPC = function() { // 是否为PC端
    2.  let userAgentInfo = navigator.userAgent
    3.  let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
    4.  let flag = true
    5.  for (let v = 0; v < Agents.length; v++) {
    6.    if (userAgentInfo.indexOf(Agents[v]) > 0) {
    7.      flag = false
    8.      break
    9.   }
    10. }
    11.  return flag
    12. }

    17、去除字符串空格

    1. const trim = function(str, type) { // 去除空格， type: 1-所有空格 2-前后空格 3-前空格 4-后空格
    2.  type = type || 1
    3.  switch (type) {
    4.    case 1:
    5.      return str.replace(/\s+/g, '')
    6.    case 2:
    7.      return str.replace(/(^\s*)|(\s*$)/g, '')
    8.    case 3:
    9.      return str.replace(/(^\s*)/g, '')
    10.    case 4:
    11.      return str.replace(/(\s*$)/g, '')
    12.    default:
    13.      return str
    14. }
    15. }

    18、字符串大小写转换

    1. const changeCase = function(str, type) { // 字符串大小写转换 type: 1:首字母大写 2：首页母小写 3：大小写转换 4：全部大写 5：全部小写
    2.  type = type || 4
    3.  switch (type) {
    4.    case 1:
    5.      return str.replace(/\b\w+\b/g, function(word) {
    6.        return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()
    7.     })
    8.    case 2:
    9.      return str.replace(/\b\w+\b/g, function(word) {
    10.        return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()
    11.     })
    12.    case 3:
    13.      return str.split('').map(function(word) {
    14.        if (/[a-z]/.test(word)) {
    15.          return word.toUpperCase()
    16.       } else {
    17.          return word.toLowerCase()
    18.       }
    19.     }).join('')
    20.    case 4:
    21.      return str.toUpperCase()
    22.    case 5:
    23.      return str.toLowerCase()
    24.    default:
    25.      return str
    26. }
    27. }

    19、过滤html代码

    1. const filterTag = function(str) { // 过滤html代码(把<>转换)
    2.  str = str.replace(/&/ig, '&')
    3.  str = str.replace(/</ig, '<')
    4.  str = str.replace(/>/ig, '>')
    5.  str = str.replace(' ', ' ')
    6.  return str
    7. }

    20、生成随机数范围

    1. const random = function(min, max) { // 生成随机数范围
    2.  if (arguments.length === 2) {
    3.    return Math.floor(min + Math.random() * ((max + 1) - min))
    4. } else {
    5.    return null
    6. }
    7. }

    21、阿拉伯数字转中文大写数字

    1. const numberToChinese = function(num) { // 将阿拉伯数字翻译成中文的大写数字
    2.  let AA = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十')
    3.  let BB = new Array('', '十', '百', '仟', '萬', '億', '点', '')
    4.  let a = ('' + num).replace(/(^0*)/g, '').split('.')
    5.  let k = 0
    6.  let re = ''
    7.  for (let i = a[0].length - 1; i >= 0; i--) {
    8.    switch (k) {
    9.      case 0:
    10.        re = BB[7] + re
    11.        break
    12.      case 4:
    13.        if (!new RegExp('0{4}//d{' + (a[0].length - i - 1) + '}$').test(a[0])) {
    14.          re = BB[4] + re
    15.       }
    16.        break
    17.      case 8:
    18.        re = BB[5] + re
    19.        BB[7] = BB[5]
    20.        k = 0
    21.        break
    22.   }
    23.    if (k % 4 === 2 && a[0].charAt(i + 2) !== 0 && a[0].charAt(i + 1) === 0) {
    24.      re = AA[0] + re
    25.   }
    26.    if (a[0].charAt(i) !== 0) {
    27.      re = AA[a[0].charAt(i)] + BB[k % 4] + re
    28.   }
    29.    k++
    30. }
    31.  if (a.length > 1) { // 加上小数部分(如果有小数部分)
    32.    re += BB[6]
    33.    for (let i = 0; i < a[1].length; i++) {
    34.      re += AA[a[1].charAt(i)]
    35.   }
    36. }
    37.  if (re === '一十') {
    38.    re = '十'
    39. }
    40.  if (re.match(/^一/) && re.length === 3) {
    41.    re = re.replace('一', '')
    42. }
    43.  return re
    44. }

    22、原生dom操作

    1. const dom = {
    2.  $: function(selector) {
    3.    let type = selector.substring(0, 1)
    4.    if (type === '#') {
    5.      if (document.querySelecotor) return document.querySelector(selector)
    6.      return document.getElementById(selector.substring(1))
    7.   } else if (type === '.') {
    8.      if (document.querySelecotorAll) return document.querySelectorAll(selector)
    9.      return document.getElementsByClassName(selector.substring(1))
    10.   } else {
    11.      return document['querySelectorAll' ? 'querySelectorAll' : 'getElementsByTagName'](selector)
    12.   }
    13. },
    14.  hasClass: function(ele, name) { /* 检测类名 */
    15.    return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'))
    16. },
    17.  addClass: function(ele, name) { /* 添加类名 */
    18.    if (!this.hasClass(ele, name)) ele.className += ' ' + name
    19. },
    20.  removeClass: function(ele, name) { /* 删除类名 */
    21.    if (this.hasClass(ele, name)) {
    22.      let reg = new RegExp('(\\s|^)' + name + '(\\s|$)')
    23.      ele.className = ele.className.replace(reg, '')
    24.   }
    25. },
    26.  replaceClass: function(ele, newName, oldName) { /* 替换类名 */
    27.    this.removeClass(ele, oldName)
    28.    this.addClass(ele, newName)
    29. },
    30.  siblings: function(ele) { /* 获取兄弟节点 */
    31.    console.log(ele.parentNode)
    32.    let chid = ele.parentNode.children,
    33.      eleMatch = []
    34.    for (let i = 0, len = chid.length; i < len; i++) {
    35.      if (chid[i] !== ele) {
    36.        eleMatch.push(chid[i])
    37.     }
    38.   }
    39.    return eleMatch
    40. },
    41.  getByStyle: function(obj, name) { /* 获取行间样式属性 */
    42.    if (obj.currentStyle) {
    43.      return obj.currentStyle[name]
    44.   } else {
    45.      return getComputedStyle(obj, false)[name]
    46.   }
    47. },
    48.  domToStirng: function(htmlDOM) { /* DOM转字符串 */
    49.    var div = document.createElement('div')
    50.    div.appendChild(htmlDOM)
    51.    return div.innerHTML
    52. },
    53.  stringToDom: function(htmlString) { /* 字符串转DOM */
    54.    var div = document.createElement('div')
    55.    div.innerHTML = htmlString
    56.    return div.children[0]
    57. }
    58. }

    23、判断图片加载完成

    1. const imgLoadAll = function(arr, callback) { // 图片加载
    2.  let arrImg = []
    3.  for (let i = 0; i < arr.length; i++) {
    4.    let img = new Image()
    5.    img.src = arr[i]
    6.    img.onload = function() {
    7.      arrImg.push(this)
    8.      if (arrImg.length == arr.length) {
    9.        callback && callback()
    10.     }
    11.   }
    12. }
    13. }

    24、音频加载完成操作

    1. const loadAudio = function(src, callback) { // 音频加载
    2.  var audio = new Audio(src)
    3.  audio.onloadedmetadata = callback
    4.  audio.src = src
    5. }

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

    1. const insertAtCursor = function(dom, val) { // 光标所在位置插入字符
    2.  if (document.selection) {
    3.    dom.focus()
    4.    let sel = document.selection.createRange()
    5.    sel.text = val
    6.    sel.select()
    7. } else if (dom.selectionStart || dom.selectionStart == '0') {
    8.    let startPos = dom.selectionStart
    9.    let endPos = dom.selectionEnd
    10.    let restoreTop = dom.scrollTop
    11.    dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length)
    12.    if (restoreTop > 0) {
    13.      dom.scrollTop = restoreTop
    14.   }
    15.    dom.focus()
    16.    dom.selectionStart = startPos + val.length
    17.    dom.selectionEnd = startPos + val.length
    18. } else {
    19.    dom.value += val
    20.    dom.focus()
    21. }
    22. }

    26、图片地址转base64

    1. const getBase64 = function(img) { //传入图片路径，返回base64，使用getBase64(url).then(function(base64){},function(err){});
    2.  let getBase64Image = function(img, width, height) { //width、height调用时传入具体像素值，控制大小,不传则默认图像大小
    3.    let canvas = document.createElement("canvas");
    4.    canvas.width = width ? width : img.width;
    5.    canvas.height = height ? height : img.height;
    6.    let ctx = canvas.getContext("2d");
    7.    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    8.    let dataURL = canvas.toDataURL();
    9.    return dataURL;
    10. }
    11.  let image = new Image();
    12.  image.crossOrigin = '';
    13.  image.src = img;
    14.  let deferred = $.Deferred();
    15.  if (img) {
    16.    image.onload = function() {
    17.      deferred.resolve(getBase64Image(image));
    18.   }
    19.    return deferred.promise();
    20. }
    21. }

    27、base64图片下载功能

    1. const downloadFile = function(base64, fileName) { //base64图片下载功能
    2.  let base64ToBlob = function(code) {
    3.    let parts = code.split(';base64,');
    4.    let contentType = parts[0].split(':')[1];
    5.    let raw = window.atob(parts[1]);
    6.    let rawLength = raw.length;
    7.    let uInt8Array = new Uint8Array(rawLength);
    8.    for (let i = 0; i < rawLength; ++i) {
    9.      uInt8Array[i] = raw.charCodeAt(i);
    10.   }
    11.    return new Blob([uInt8Array], {
    12.      type: contentType
    13.   });
    14. };
    15.  let aLink = document.createElement('a');
    16.  let blob = base64ToBlob(base64); //new Blob([content]);
    17.  let evt = document.createEvent("HTMLEvents");
    18.  evt.initEvent("click", true, true); //initEvent不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
    19.  aLink.download = fileName;
    20.  aLink.href = URL.createObjectURL(blob);
    21.  aLink.click();
    22. }

    28、浏览器是否支持webP格式图片

    1. const isSupportWebP = function() { //判断浏览器是否支持webP格式图片
    2.  return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
    3. }

    29、url参数转对象

    1. const parseQueryString = function(url) { //url参数转对象
    2.  url = !url ? window.location.href : url;
    3.  if (url.indexOf('?') === -1) {
    4.    return {};
    5. }
    6.  let search = url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1);
    7.  if (search === '') {
    8.    return {};
    9. }
    10.  search = search.split('&');
    11.  let query = {};
    12.  for (let i = 0; i < search.length; i++) {
    13.    let pair = search[i].split('=');
    14.    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    15. }
    16.  return query;
    17. }

    30、对象序列化【对象转url参数】

    1. const stringfyQueryString = function(obj) { //对象序列化【对象转url参数】
    2.  if (!obj) return '';
    3.  let pairs = [];
    4.  for (let key in obj) {
    5.    let value = obj[key];
    6.    if (value instanceof Array) {
    7.      for (let i = 0; i < value.length; ++i) {
    8.        pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
    9.     }
    10.      continue;
    11.   }
    12.    pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    13. }
    14.  return pairs.join('&');
    15. }

    31、H5软键盘缩回、弹起回调

    1. const h5Resize = function(downCb, upCb) { //当软件键盘弹起会改变当前 window.innerHeight，监听这个值变化 [downCb 当软键盘弹起后，缩回的回调,upCb 当软键盘弹起的回调]
    2.  var clientHeight = window.innerHeight;
    3.  downCb = typeof downCb === 'function' ? downCb : function() {}
    4.  upCb = typeof upCb === 'function' ? upCb : function() {}
    5.  window.addEventListener('resize', () => {
    6.    var height = window.innerHeight;
    7.    if (height === clientHeight) {
    8.      downCb();
    9.   }
    10.    if (height < clientHeight) {
    11.      upCb();
    12.   }
    13. });
    14. }

    32、函数防抖

    1. const debounce = function(func, wait, immediate) { //函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果]
    2.  let timeout;
    3.  return function() {
    4.    let context = this;
    5.    let args = arguments;
    6.    if (timeout) clearTimeout(timeout);
    7.    if (immediate) {
    8.      var callNow = !timeout;
    9.      timeout = setTimeout(() => {
    10.        timeout = null;
    11.     }, wait)
    12.      if (callNow) func.apply(context, args)
    13.   } else {
    14.      timeout = setTimeout(function() {
    15.        func.apply(context, args)
    16.     }, wait);
    17.   }
    18. }
    19. }

    33、函数节流

    1. const throttle = function(func, wait ,type) { //函数节流 [func 函数 wait 延迟执行毫秒数 type 1 表时间戳版，2 表定时器版]
    2.    if(type===1){
    3.        let previous = 0;
    4.   }else if(type===2){
    5.        let timeout;
    6.   }
    7.    return function() {
    8.        let context = this;
    9.        let args = arguments;
    10.        if(type===1){
    11.            let now = Date.now();
    12.            if (now - previous > wait) {
    13.                func.apply(context, args);
    14.                previous = now;
    15.           }
    16.       }else if(type===2){
    17.            if (!timeout) {
    18.                timeout = setTimeout(() => {
    19.                    timeout = null;
    20.                    func.apply(context, args)
    21.               }, wait)
    22.           }
    23.       }
    24.   }
    25. }
  • 相关阅读:
    ELF文件结构
    基础组件-流量回放(全链路流量回放预研)
    树莓派高级开发------总线地址、物理地址和虚拟地址的认识
    状态定义与深度优先搜索、广度优先搜索
    行人重识别reid
    卷积核的形象化解释
    【译】.NET 7 中的性能改进（六）
    java基于springboot医疗器材管理系统
    Stable Diffusion 绘画入门教程（webui）-ControlNet(Recolor）
    转转回收的持久层架构演进
  • 原文地址：https://blog.csdn.net/huang714/article/details/128180894