【菜鸟互啄】前端基础知识记录（一）

1. 函数多形参，用对象包裹，并赋予默认值，以防止类型出错导致报错，如：

// 初始化弹窗
initShow(
  params = {
    ids: [],
    form: {},
    fkStockIn: '',
    filterForm: {}
  }
) {
  this.visible = true
  this.spinning = false
  this.ids = params.ids || []
  this.form = params.form || {}
  this.fkStockIn = params.fkStockIn || ''
  this.filterForm = params.filterForm || {}
}

2.新建提交表单数据formData，如：

const formData = new FormData()
// 新建值
formData.append('key', value)
// 获取值
formData.get('key', value)
// 修改值
formData.set('key', value)
// 判断值
formData.has('key')
// 删除值
formData.delete('key')
// 遍历值
const data = formData.entries()
data.next()

3.富文本转纯文本

convertHtmlToText(html) {
  const text = html.replace(/<[^>]+>/g, '').replace(/ /ig, '').replace(/\s/g, '')
  return text
}

4.纯文本根据关键字转富文本

// 区分字母大小写
formatterColor(text) {
  const str = `<span class="keyword">${this.keyword}</span>`
  text = text.replace(new RegExp(this.keyword, 'g'), str)
  return text
}

// 不区分字母大小写
formatterColor(text) {
  const newT = text.replace(new RegExp(this.searchParams.keyword, 'gi'), str => `<span class="keyword">${str}</span>`)
  return newT
}

5.浏览器跳转路由新开标签页

// 方法1：浏览器自带方法
const url = `${hostIp}/url`
window.open(url, '_blank')

// 方法2：vuejs提供的方法
// <router-link>组件的属性有：
// to 、replace、 append、  tag、  active-class、 exact 、 event、  exact-active-class

<router-link to='/url' target="_blank" />

router-link 具体可以查看vue官方文档

// 方法3：vuejs提供的方法
const routeData = this.$router.resolve({
  path: '/front/home/downloadCenter',
  query: {},
  params: {}
})
window.open(routeData.href, '_blank')

6.对象数组根据某个属性去重

uniqueArr(arr, attrName) {
  const res = new Map()
  return arr.filter(
    item => !res.has(item[attrName]) && res.set(item[attrName], 1)
  )
}

7.全屏切换事件

toggleFullScreen(dom, callback) {
  // 1.进入全屏
  function fullIn(ele) {
    if (ele.requestFullscreen) {
      ele.requestFullscreen()
    } else if (ele.mozRequestFullScreen) {
      ele.mozRequestFullScreen()
    } else if (ele.webkitRequestFullscreen) {
      ele.webkitRequestFullscreen()
    } else if (ele.msRequestFullscreen) {
      ele.msRequestFullscreen()
    }
  }
  // 2.exitFullScreen退出全屏
  function exitFullscreen() {
    if (document.exitFullScreen) {
      document.exitFullScreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
  // 3.获取当前全屏的节点
  function getFullscreenElement() {
    return (
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullScreenElement ||
      document.webkitFullscreenElement ||
      null
    )
  }
  // 4.判断当前是否全屏
  function isFullScreen() {
    return !!(
      document.fullscreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen ||
      document.webkitFullScreen ||
      document.msFullScreen
    )
  }
  // 5.判断当前文档是否能切换到全屏
  function isFullscreenEnabled() {
    return (
      document.fullscreenEnabled ||
      document.mozFullScreenEnabled ||
      document.webkitFullscreenEnabled ||
      document.msFullscreenEnabled
    )
  }
  if (isFullscreenEnabled() && !isFullScreen()) {
    fullIn(dom)
  } else {
    exitFullscreen()
  }
  callback && callback(!isFullScreen())
  console.log(!isFullScreen() ? '进入全屏啦！' : '退出全屏啦!')
}

8.校验数值是否为整数n位以内（包含n位），小数m位以内（包含m位）数值

isNIntegerMDecimal(n, m, s, isReg) {
  const k = parseInt(n) - 1
  let str =
    '(^[1-9](\\d{0,k})?(\\.\\d{1,m})?$)|(^0\\.\\d{1,m}?$)|(^0)$'
  str = str
    .toString()
    .replace(/k/g, k)
    .replace(/m/g, m)
  str = new RegExp(str)
  if (isReg) {
    return str
  }
  return str.test(s)
}

以上内容如有纰漏或更优解，望不吝赐教~