前端项目中公共方法汇总utils.js

目录

1. 判断手机类型IOS Android
2. 格式化金钱
3. 金钱字符串变回数字
4. 用aa替换中文 并返回
5. 去除文件后缀，得到文件名称（不带后缀）
6. 获取浏览器类型（名称）
7. post方式下载文件流
8. 动态设置img的大小
9. 获取页面参数
10. 判断是否为微信
11. css方式控制元素无法点击
12. 简单封装localStorage setItem getItem

1.判断手机类型IOS Android

因为判断是否为Android个别手机会有问题，所以判断是否为IOS，其余的为Android

//判断是不是IOS
function isIOS() {
    let u = navigator.userAgent
    let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/) //IOS终端
    return isIOS
}

2.格式化金钱

数字转成带逗号的金钱字符串

//格式化金钱
function toMoney(val) { //val 数字number
    var str = (val / 100 * 100).toFixed(2) + ''
    var intSum = str.substring(0, str.indexOf(".")).replace(/B(?=(?:d{3})+$)/g, ',') //取到整数部分
    var dot = str.substring(str.length, str.indexOf(".")) //取到小数部分搜索
    var ret = intSum + dot
    return ret
}

3.金钱字符串变回数字

带逗号的金钱字符串转成数字number

//金钱变回数字number
function moneyStrToNum(str) { //str 金钱字符串
    if (str) {
      let strTemp = str.replace(",", "")
      return Number(strTemp)
    } else {
      return str
    }
}

4.用aa替换中文 并返回

因为中文算2个字符，计算字符长度之前，先用aa替换汉字，再计算value长度

function wordLengthTrans(value) {
    return value ? value.replace(/[u4e00-u9fa5|，|。]/g, 'aa') : ""
}

5.网站与域名（不带后缀）

传入完整文件名

function getFileNameStr(name) { //name 完整文件名
    let dotIndex = name.lastIndexOf(".")
    let nameStr = name.slice(0, dotIndex)
    return nameStr
}

6.获取浏览器类型（名称）

这里面的判断顺序不能变

function getBrowserType() {
    let str = window.navigator.userAgent
    let name
    if (str.indexOf("Opera") > -1 || str.indexOf("OPR") > -1) {
      name = "Opera"
      return name
    }
    if (str.indexOf("Edge") > -1) {
      name = "Edge"
      return name
    }
    if (str.indexOf("Firefox") > -1) {
      name = "Firefox"
      return name
    }
    if (str.indexOf("Chrome") > -1 && str.indexOf("Safari") > -1) {
      name = "Chrome"
      return name
    }
    if (str.indexOf("Chrome") === -1 && str.indexOf("Safari") > -1) {
      name = "Safari"
      return name
    }
    if ((str.indexOf("Opera") === -1 && str.indexOf("MSIE") > -1) || str.indexOf("Trident") > -1) {
      name = "IE"
      return name
    }
}

7.post方式下载文件流

如果接口的type为post，并且返回的是文件流，想要实现下载

//ajax post 获取流，下载file文件
function downloadFilePostStream(apiStr, option) { //option为 传给后台的参数
    let body = document.body || document.getElementsByTagName("body")[0]
    let form = document.createElement("form")
    form.className = "myDownloadForm"
    form.setAttribute("action", `${globalHost}${apiStr}`) //配置
    form.setAttribute("method", "post")
    form.setAttribute("name", "downloadForm")
    form.setAttribute("target", "_blank")
      for (let key in option) {
        if (option[key] !== undefined && option[key] !== null) { //form表单的形式传undefined 会被转成字符串'undefined'，干脆直接不传了
          let input = document.createElement("input")
          input.setAttribute("name", key)
          input.value = option[key]
          form.appendChild(input)
        }
      }
    body.appendChild(form)
    form.submit()
    setTimeout(() => {
      body.removeChild(form)
    }, 50)
}

8.动态设置img的大小

根据img的容器（imgBox）的宽高比，来确定img的'100%'(auto)等属性

注：不能给img设置初始固定宽高

//根据img大小和容器的宽高比，设置img的css
function setImgCssByBox(img, num) { //img元素element, num imgBox宽高比 width/height
    let imgW = img.width
    let imgH = img.height
    if ((imgW / imgH) > num) { //width更大
      img.style.width = "100%"
      img.style.height = "auto"
    } else {
      img.style.width = "auto"
      img.style.height = "100%"
    }
}

9.获取页面参数

获取url中的参数

//获取页面参数
function getPageParam() {
    let url = window.location.href
    let urlStr = url.split("?")[1] //？后面的部分
    let option = {}
    if (urlStr) {
      let keyValArr = urlStr.split("&")
      keyValArr.forEach(function (str, index) {
        let arr = str.split("=")
        let key = arr[0]
        let val = arr[1]
        option[key] = val
      })
    }
    return option
}

10.判断是否为微信

//判断是否微信
function isWeixin() {
    var ua = window.navigator.userAgent.toLowerCase()
    return ua.match(/MicroMessenger/i) == 'micromessenger'
}

11.css方式控制元素无法点击

选择器和设置css用了jQuery

//让按钮失效 
function disableEle($ele) {
    $ele.css("pointer-events", "none")  
}
//让按钮有效 
function ableEle($ele) {
    $ele.css("pointer-events", "auto")
}

12.简单封装localStorage setItem getItem

localDB对象
浏览器存储localStorage，key用md5加密，value用base64加密

依赖npm包：md5，js-base64

import md5 from "md5"
import { Base64 } from 'js-base64'

export const localDB = {
  //key md5加密  value base64加密
  setItem: (keyStr, item) => {
    let localStorage = window.localStorage
    //key
    let keyMd5 = md5(keyStr)
    //value
    let itemJsonStr = JSON.stringify(item)
    let itemBase64 = Base64.encode(itemJsonStr)
    localStorage.setItem(keyMd5, itemBase64)
  },
  getItem: (keyStr) => {
    let localStorage = window.localStorage
    let keyMd5 = md5(keyStr)
    if (!localStorage.getItem(keyMd5)) {
      return null
    }
    let itemBase64 = localStorage.getItem(keyMd5)
    let itemJsonStr = Base64.decode(itemBase64)
    let item = JSON.parse(itemJsonStr)
    return item
  },
  deleteItem: (keyStr) => {
    let localStorage = window.localStorage
    let keyMd5 = md5(keyStr)
    localStorage.removeItem(keyMd5)
  }
}