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

判断手机类型IOS Android
格式化金钱
金钱字符串变回数字
用aa替换中文并返回
去除文件后缀，得到文件名称（不带后缀）
获取浏览器类型（名称）
post方式下载文件流
动态设置img的大小
获取页面参数
判断是否为微信
css方式控制元素无法点击
简单封装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的width:'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)

  }

}

巴特西

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

目录

1.判断手机类型IOS Android

2.格式化金钱

3.金钱字符串变回数字

4.用aa替换中文并返回

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

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

7.post方式下载文件流

8.动态设置img的大小

9.获取页面参数

10.判断是否为微信

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

12.简单封装localStorage setItem getItem

最新文章

热门文章

巴特西

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

目录

1.判断手机类型IOS Android

2.格式化金钱

3.金钱字符串变回数字

4.用aa替换中文 并返回

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

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

7.post方式下载文件流

8.动态设置img的大小

9.获取页面参数

10.判断是否为微信

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

12.简单封装localStorage setItem getItem

最新文章

热门文章

4.用aa替换中文并返回