33个前端常用的JavaScript函数封装方法

女爷i 2022-10-17 11:19 162阅读 0赞

星标公众号 前端开发博客，回复“交流”

加入我们一起学习，天天进步

这是我在实际开发中常用的一些js函数方法，总结一下，以后可以，有需要的小伙伴可以参考下百度就完事了，不不不！我亲自实践过好真的多次，百度一次还好，记不住一次碰着了还得找性娘干净是拉低工作效率。

### **01、加载js || css || 风格** ###

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() { // 加载完成执行      typeof fn === 'function' && fn()    }  }}

### **02、获取url参数** ###

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

### **03、本地** ###

const store = { // 本地存储  set: function(name, value, day) { // 设置    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()    }  }}

### **04、cookie 操作【设置，获取，删除】** ###

### **05、Js获取元素样式【支持内联】** ###

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

### **06、时间格式化** ###

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}

### **07、原生ajax操作** ###

const ajax = function(conf) { // ajax操作  let url = conf.url,    data = conf.data,    senData = [], // 封装后的数据    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 = '' // 创建ajax引擎对象  if (data == null) {    senData = ''  } else if (typeof data === 'object' && !isForm) { // 如果data是对象，转换为字符串    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内核系列浏览器  } catch (e1) {    try {      xhr = new XMLHttpRequest() // 非IE内核浏览器    } 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字符串转换为js对象        };      } else {        if (error != null) {          error('通讯失败!' + xhr.status)        }      }    }  }}

### **08、fetch请求的封装** ###

const fetch = function(url, setting) { // fetch请求的封装  let opts = { // 设置参数的初始值    method: (setting.method || 'GET').toUpperCase(), // 请求方式    headers: setting.headers || {}, // 请求头设置    credentials: setting.credentials || true, // 设置cookie是否一起发送    body: setting.body || {},    mode: setting.mode || 'no-cors', // 可以设置 cors, no-cors, same-origin    redirect: setting.redirect || 'follow', // follow, error, manual    cache: setting.cache || 'default' // 设置 cache 模式 (default, reload, no-cache)  }  let dataType = setting.dataType || 'json' // 解析方式  let data = setting.data || '' // 参数  let paramsFormat = function(obj) { // 参数格式    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)    })  })}

### **09、设备判断：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、文本复制功能** ###

### **12、判断是否是一个数组** ###

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

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

const arrayEqual = function(arr1, arr2) { //判断两个数组是否相等  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、时间与时间转换** ###

const stamp = { // 时间，时间戳转换  getTime: function(time) { // 时间转10位时间戳    let date = time ? new Date(time) : new Date()    return Math.round(date.getTime() / 1000)  },  timeToStr: function(time, fmt) { // 10位时间戳转时间    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之间，只能包含字母、数字和下划线      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': // 金额(小数点2位)      return /^\d*(?:\.\d{0,2})?$/.test(str)    case 'URL': // 网址      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': // 数字      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、字符串大小写转换** ###

const changeCase = function(str, type) { // 字符串大小写转换 type:  1:首字母大写  2：首页母小写  3：大小写转换  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代码(把<>转换)  str = str.replace(/&/ig, '&')  str = str.replace(/</ig, '<')  str = str.replace(/>/ig, '>')  str = str.replace(' ', ' ')  return str}

### **20、生成随机数范围** ###

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

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

### **22、原生世界操作** ###

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) { /* 获取兄弟节点 */
        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转字符串 */
        var div = document.createElement('div')
        div.appendChild(htmlDOM)
        return div.innerHTML
      },
      stringToDom: function(htmlString) { /* 字符串转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、图片地址转base64** ###

### **27、base64图片下载功能** ###

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

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

### **29、url参数转对象** ###

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

### **31、H5软键盘缩回、弹起键盘** ###

### **32、函数防抖** ###

### **33、函数节流** ###

关于本文

http://www.fly63.com/article/detial/10362

\- EOF -