JavaScript前端實(shí)用的工具函數(shù)封裝
1.webpack里面配置自動(dòng)注冊(cè)組件
第一個(gè)參數(shù)是匹配路徑,第二個(gè)是深度匹配,第三個(gè)是匹配規(guī)則
const requireComponent = require.context('./libary', true, /\.vue$/) export default { install (Vue) { requireComponent.keys().forEach((item) => { **根據(jù)組件的name注冊(cè)全局組件** Vue.component( requireComponent(item).default.name, requireComponent(item).default ) }) } }
2.自定義指令圖片懶加載
導(dǎo)入默認(rèn)圖片
import defaultImg from '@/assets/images/200.png' export default { install (Vue) { // // 注冊(cè)自定義指令 v2方法 Vue.directive('lazy', { // inserted () { // console.log(11111) // } //注冊(cè)自定義指令 v3方法 mounted (el, binding) { // 瀏覽器提供 IntersectionObserver const observer = new IntersectionObserver( ([{ isIntersecting }]) => { // console.log(isIntersecting, '====IntersectionObserver') if (isIntersecting) { console.log(el, binding, 11111) // 圖片加載失敗就顯示默認(rèn)圖片 el.onerror = function () { el.src = defaultImg } el.src = binding.value // 不在監(jiān)聽(tīng)dom observer.unobserve(el) } }, { threshold: 0.01 } ) // 監(jiān)聽(tīng)dom observer.observe(el) } }) } }
3.圖片文件轉(zhuǎn)base64格式(實(shí)現(xiàn)預(yù)覽)
基于 FileReader 把文件讀取為 base64 的字符串:
fileChange (e) { // console.log(e.target.files) if (e.target.files.length === 0) { // 沒(méi)有選擇圖片 this.avatar = '' } else { // 創(chuàng)建 fr 對(duì)象---FileReader構(gòu)造函數(shù) const fr = new FileReader() // 讀取文件 fr.readAsDataURL(e.target.files[0]) // 監(jiān)聽(tīng)加載事件,讀取成功后執(zhí)行里面的回調(diào) fr.onload = () => { // 將結(jié)果賦給xxx this.avatar = fr.result } } },
給input設(shè)置change改變事件
- 1 設(shè)置一個(gè)變量接收轉(zhuǎn)換的數(shù)據(jù)
- 2 拿到事件目標(biāo),里面有個(gè)方法e.target.files是個(gè)偽數(shù)組.通過(guò)e.target.files.length判斷用戶是否選擇了圖片
- 3 通過(guò)new FileReader拿到一個(gè)實(shí)例
- 4 通過(guò) 實(shí)例名.readAsDataURL 將圖片轉(zhuǎn)成base64格式
- 5 onload可以監(jiān)聽(tīng)轉(zhuǎn)換完成后/給聲明變量賦值
4.數(shù)組轉(zhuǎn)為tree型結(jié)構(gòu)(遞歸實(shí)現(xiàn))
當(dāng)后端傳來(lái)的數(shù)據(jù)是扁平化的時(shí)候,前端可用代碼處理數(shù)據(jù)得到樹(shù)形結(jié)構(gòu)
列表型數(shù)據(jù)的關(guān)鍵屬性: id 和 pid, id指的是自己的部門id, pid指的是父級(jí)部門的id (空則沒(méi)有父級(jí)部門) 孩子的pid與父親的id一致
// 注 : list 傳來(lái)的數(shù)組 , value 篩選的條件 function arrToTree(list, value) { // 1.定義一個(gè)空數(shù)組,后續(xù)往里面添加樹(shù)形結(jié)構(gòu) const arr = [] list.forEach(item => { // 2. 篩選滿足要求的item if (item.pid === value) { // 3.篩選所有孩子,即pid與父級(jí)id一致的(外循環(huán)走一次,里面走完所有) const children = arrToTree(list, item.id) // 4.父級(jí)中有孩子,才能加上children屬性 if (children.length > 0) { // 5. 因?yàn)樾枰臉?shù)形結(jié)構(gòu)中孩子屬性名為children,手動(dòng)給父級(jí)添加一個(gè)children屬性,并賦值 item.children = children } // 6. 把滿足要求的一組數(shù)據(jù)push進(jìn)去 arr.push(item) } }) // 返回樹(shù)形結(jié)構(gòu) return arr }
// 第一次調(diào)用函數(shù),找出pid為''的每一項(xiàng)(即父級(jí)),后面調(diào)用,找孩子
調(diào)用: arrToTree(list, '')
5.遞歸深拷貝
let obj = { name:'張三', age:20, hobby:['學(xué)習(xí)','上課','干飯'], student:{ name:'尼古拉斯趙四', age:38 } } //深拷貝函數(shù) function copy(obj,newObj){ for(let key in obj ){ if( obj[key] instanceof Array ){ newObj[key] = [] //遞歸調(diào)用 繼續(xù)深拷貝數(shù)組 copy(obj[key],newObj[key]) }else if( obj[key] instanceof Object ){ newObj[key] = {} //遞歸調(diào)用 繼續(xù)深拷貝對(duì)象 copy(obj[key],newObj[key]) }else{ newObj[key] = obj[key] } } } //開(kāi)始拷貝 let newObj = {} copy(obj,newObj)
6.將數(shù)組里面的對(duì)象轉(zhuǎn)換成我們需要的鍵值對(duì)
我們拿到的數(shù)據(jù):arr=[{入職日期:43535,姓名:'jack',手機(jī)號(hào):111111....},{}]
需要的上傳格式: [{timeOfEntry:43535,username:'jack',mobile:111111....},{}]
//手動(dòng)寫一個(gè)具有對(duì)應(yīng)關(guān)系的對(duì)象 const userRelations = { '入職日期': 'timeOfEntry', '手機(jī)號(hào)': 'mobile', '姓名': 'username', '轉(zhuǎn)正日期': 'correctionTime', '工號(hào)': 'workNumber' } //第一個(gè)參數(shù)是自己寫的對(duì)應(yīng)關(guān)系對(duì)象,第二個(gè)參數(shù)是原數(shù)組 function demandArr(userRelations,arr){ //創(chuàng)建一個(gè)空數(shù)組 const newArr = [] arr.forEach(item => { //創(chuàng)建一個(gè)空對(duì)象 const obj = {} //循環(huán)數(shù)組里的每一個(gè)對(duì)象 for (const k in item) { const englishKey = userRelations[k] obj[englishKey] = item[k] } newArr.push(obj) }) } // console.log(newArr)
以上就是JavaScript前端實(shí)用的工具函數(shù)封裝的詳細(xì)內(nèi)容,更多關(guān)于JavaScript工具函數(shù)封裝的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript選擇器函數(shù)querySelector和querySelectorAll
這篇文章主要介紹了?JavaScript選擇器函數(shù)querySelector和querySelectorAll,下面文章圍繞querySelector和querySelectorAll的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11微信小程序動(dòng)態(tài)的加載數(shù)據(jù)實(shí)例代碼
這篇文章主要介紹了 微信小程序動(dòng)態(tài)的加載數(shù)據(jù)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04一篇文章教你學(xué)會(huì)js實(shí)現(xiàn)彈幕效果
彈幕效果隨著b站的越做越強(qiáng),出現(xiàn)了越來(lái)越多的仿照b站的視頻站點(diǎn)。然而這些視頻站仿照的最多的只有一點(diǎn)!那就是彈幕,現(xiàn)在也越來(lái)越多的人喜歡上了彈幕本文就教你如何制作2021-08-08微信小程序 設(shè)置啟動(dòng)頁(yè)面的兩種方法
這篇文章主要介紹了 微信小程序 設(shè)置啟動(dòng)頁(yè)面的方法的相關(guān)資料,這里對(duì)設(shè)置啟動(dòng)頁(yè)面的兩種方法分別介紹,需要的朋友可以參考下2017-03-03Moment的feature導(dǎo)致線上bug解決分析
這篇文章主要為大家介紹了Moment的feature導(dǎo)致線上bug解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09