阅读 147

JavaScript 工具函数大全

1.前言

\

总结下项目中经常使用到的一些js方法,以帮助自己的及别人的回顾

\

在开发的时候应该知道,有很多常见的实例操作。比如数组去重,关键词高亮,打乱数组等。这些操作,代码一般不会很多,实现的逻辑也不会很难,下面的代码,我解释就不解释太多了,打上注释,相信大家就会懂了。但是,用的地方会比较,如果项目有哪个地方需要用,如果重复写的话,就是代码沉余,开发效率也不用,复用基本就是复制粘贴!这样是一个很不好的习惯,大家可以考虑一下把一些常见的操作封装成函数,调用的时候,直接调用就好!

\

区分开发与生产环境[该方案已淘汰]

\

module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
复制代码

\

生产环境[推荐]

\

module.exports = file => () => import("@/views/" + file + ".vue");
复制代码

\

来源:路由懒加载

\

是否支持重复定义

\

x=1
var x=2
let x =3  //Identifier 'x' has already been declaredat <anonymous>
const x //Uncaught SyntaxError: Unexpected identifier
复制代码

\

常用的正则表达式

\

/* 邮箱地址 */
export const validatEmail = /^[\w.-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*.)+[a-z]{2,3}$/
/* 手机号码 */
export const validatPhone = /^(^(([0+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
/* 身份证号 */
export const validatidNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
/* 银行卡号 */
export const validateAccount = /^([1-9]{1})(\d{15}|\d{18})$/
/* 密码 */
export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/
/* 微信号 */
export const validateWxreg = /^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/
export const validatBalance = /^(([1-9]\d*)(.\d{1,2})?)$|(0.0?([1-9]\d?))$/
复制代码

\

判断是否是中文

\

isChine(str) {
    if (/^([u4E00-u9FA5]|[uFE30-uFFA0])*$/.test(str)) {
      return false
    }
    return true
  }
复制代码

\

保留两位小数的价格

\

fmoney(s, n = 2) {
    n = n > 0 && n <= 20 ? n : 2
    s = parseFloat((s + '').replace(/[^\d.-]/g, '')).toFixed(n) + ''
    var l = s.split('.')[0].split('').reverse(); var r = s.split('.')[1]
    var t = ''
    for (let i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 === 0 && (i + 1) !== l.length ? ',' : '')
    }
    return t.split('').reverse().join('') + '.' + r
  }
复制代码

\

拼接url

\

splicingURL(params) {
    let url = ''
    for (const key in params) {
      const value = params[key] !== undefined ? params[key] : ''
      url += `&${key}=${encodeURIComponent(value)}`
    }
    return url ? `?${url.substr(1)}` : ''
  }
复制代码

\

解析url 参数

\

urlParse() {
    const url = window.location.search
    const obj = {}
    const reg = /[?&][^?&]+=[^?&]+/g
    const arr = url.match(reg)
    // ["?id=123456", "&a=b"]
    if (arr) {
      arr.forEach(item => {
        const tempArr = item.substr(1).split('=')
        const key = decodeURIComponent(tempArr[0])
        const val = decodeURIComponent(tempArr[1])
        obj[key] = val
      })
    }
    return obj
  }
复制代码

\

过滤数组中对象

\

filterArr(newArr, oldArr, key) {
    return oldArr.filter(item => {
      return !newArr.map(v => v[key]).includes(item[key])
    })
  }
复制代码

\

判断一个元素是否在数组中

\

 contains(arr, val) {
    return arr.indexOf(val) !== -1
  }
复制代码

\

生成指定范围随机数

\

randomNum(min = 1, max = 10) {
    return Math.floor(min + Math.random() * (max - min))
  }
复制代码

\

生成指定范围随机数

\

randomNum(min = 1, max = 10) {
    return Math.floor(min + Math.random() * (max - min))
  }
复制代码

\

存储验证比如数字;用于验证需要输入的input表单,检测它是否只能输入(正)整数和2位小数,如果满足就OK,否则不

\

function checkInputText(text) {
  const reg = /^(.*)(\d+)(.?)(\d{0,2}).*$/g
  if (reg.test(text)) {
    text = Number(text.replace(reg, '$2$3$4'))
  } else {
    text = 0
  }
  return text
}
function rebate(args, val, self) {
  if (self[args]) {
    self.$nextTick(() => {
      self[args] = checkInputText(val)
    })
  }
}
复制代码

\

权限部分进行关闭标签导航的逻辑

\

export function goClose(self, tag = null, cb = null, permission = 403) {
  if (permission) {
    self.$store.dispatch('tagsView/delView', tag).then(() => {
      self.$nextTick(() => {
        if (typeof cb !== 'function' && !cb) {
          return false
        } else {
          return cb
        }
      })
    })
  }
}
复制代码

\

最后

\

下次见!!!!
文章分类
前端
文章标签