JavaScript前端實用的工具函數封裝
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工具函數封裝的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 如何將JavaScript將數組轉為樹形結構
- vue中keep-alive多級路由緩存問題
- JavaScript中forEach的錯誤用法匯總
- JavaScript中數組flat方法的使用與實現方法
- js將列表組裝成樹結構的兩種實現方式分享