首頁 > 軟體

JavaScript前端實用的工具函數封裝

2022-07-19 14:00:56

1.webpack裡面設定自動註冊元件

第一個引數是匹配路徑,第二個是深度匹配,第三個是匹配規則

const requireComponent = require.context('./libary', true, /.vue$/)
export default {
  install (Vue) {
    requireComponent.keys().forEach((item) => {
      **根據元件的name註冊全域性元件**
      Vue.component(
        requireComponent(item).default.name,
        requireComponent(item).default
      )
    })
  }
}

2.自定義指令圖片懶載入

匯入預設圖片

import defaultImg from '@/assets/images/200.png'
export default {
  install (Vue) {
    // // 註冊自定義指令   v2方法
    Vue.directive('lazy', {
      // inserted () {
      //   console.log(11111)
      // }
     //註冊自定義指令  v3方法
      mounted (el, binding) {
        // 瀏覽器提供 IntersectionObserver
        const observer = new IntersectionObserver(
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting, '====IntersectionObserver')
            if (isIntersecting) {
              console.log(el, binding, 11111)
              // 圖片載入失敗就顯示預設圖片
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 不在監聽dom
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }
        )
        // 監聽dom
        observer.observe(el)
      }
    })
  }
}

3.圖片檔案轉base64格式(實現預覽)

基於 FileReader 把檔案讀取為 base64 的字串:

fileChange (e) {
      // console.log(e.target.files)
      if (e.target.files.length === 0) {
        // 沒有選擇圖片
        this.avatar = ''
      } else {
        // 建立 fr 物件---FileReader建構函式
        const fr = new FileReader()
        // 讀取檔案
        fr.readAsDataURL(e.target.files[0])
        // 監聽載入事件,讀取成功後執行裡面的回撥
        fr.onload = () => {
        // 將結果賦給xxx
          this.avatar = fr.result
        }
      }
    },

給input設定change改變事件

  • 1 設定一個變數接收轉換的資料
  • 2 拿到事件目標,裡面有個方法e.target.files是個偽陣列.通過e.target.files.length判斷使用者是否選擇了圖片
  • 3 通過new FileReader拿到一個範例
  • 4 通過 範例名.readAsDataURL 將圖片轉成base64格式
  • 5 onload可以監聽轉換完成後/給宣告變數賦值

4.陣列轉為tree型結構(遞迴實現)

當後端傳來的資料是扁平化的時候,前端可用程式碼處理資料得到樹形結構

列表型資料的關鍵屬性: id 和 pid, id指的是自己的部門id, pid指的是父級部門的id (空則沒有父級部門) 孩子的pid與父親的id一致

// 注  :  list 傳來的陣列 , value 篩選的條件
function arrToTree(list, value) {
  // 1.定義一個空陣列,後續往裡面新增樹形結構
  const arr = []
  list.forEach(item => {
  // 2. 篩選滿足要求的item
    if (item.pid === value) {
  // 3.篩選所有孩子,即pid與父級id一致的(外迴圈走一次,裡面走完所有)
      const children = arrToTree(list, item.id)
  // 4.父級中有孩子,才能加上children屬性
      if (children.length > 0) {
   // 5. 因為需要的樹形結構中孩子屬性名為children,手動給父級新增一個children屬性,並賦值
        item.children = children
      }
   // 6. 把滿足要求的一組資料push進去
      arr.push(item)
    }
  })
  // 返回樹形結構
  return arr
}

// 第一次呼叫函數,找出pid為''的每一項(即父級),後面呼叫,找孩子

呼叫: arrToTree(list, '')

5.遞迴深拷貝

  let obj = {
            name:'張三',
            age:20,
            hobby:['學習','上課','乾飯'],
            student:{
                name:'尼古拉斯趙四',
                age:38
            }
        }
        //深拷貝函數
        function copy(obj,newObj){
            for(let key in obj ){
                if( obj[key] instanceof Array ){
                    newObj[key] = []
                    //遞迴呼叫 繼續深拷貝陣列
                    copy(obj[key],newObj[key])
                }else if( obj[key] instanceof Object ){
                    newObj[key] = {}
                    //遞迴呼叫 繼續深拷貝物件
                    copy(obj[key],newObj[key])
                }else{
                    newObj[key] = obj[key]
                }
            }
        }
        //開始拷貝
        let newObj = {}
        copy(obj,newObj)

6.將陣列裡面的物件轉換成我們需要的鍵值對

我們拿到的資料:arr=[{入職日期:43535,姓名:'jack',手機號:111111....},{}]

需要的上傳格式: [{timeOfEntry:43535,username:'jack',mobile:111111....},{}]

     //手動寫一個具有對應關係的物件
      const userRelations = {
        '入職日期': 'timeOfEntry',
        '手機號': 'mobile',
        '姓名': 'username',
        '轉正日期': 'correctionTime',
        '工號': 'workNumber'
      }
     //第一個引數是自己寫的對應關係物件,第二個引數是原陣列
     function demandArr(userRelations,arr){
      //建立一個空陣列
      const newArr = []
      arr.forEach(item => {
      //建立一個空物件
        const obj = {}
        //迴圈陣列裡的每一個物件
        for (const k in item) {
          const englishKey = userRelations[k] 
            obj[englishKey] = item[k]
          }
         newArr.push(obj)
       })
      }
      // console.log(newArr)

以上就是JavaScript前端實用的工具函數封裝的詳細內容,更多關於JavaScript工具函數封裝的資料請關注it145.com其它相關文章!


IT145.com E-mail:sddin#qq.com