前端項目中公共方法彙總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的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)
  }
}
複製代碼