自己封装的一些工具函数

简介: 自己封装的一些工具函数

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格式
  • 5onload可以监听转换完成后/给声明变量赋值

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)

 

 程序员面试题库分享

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

相关文章
|
8月前
|
JSON 小程序 算法
uniapp小程序封装常用工具函数
类似的工具函数还有很多,这里暂时不一一列举了,上面提到的银行卡校验,还可以使用阿里公开的一个校验接口cardNo=银行卡号码&cardBinCheck=true这个接口会返回对应的银行简称银行卡类型,如果想要显示对应的银行logo的话,可以联系我,由于JSON数据太大,没办法全部放在这里。
126 0
C4.
|
1月前
|
Python
Phython函数封装
Phython函数封装
C4.
6 0
|
4月前
|
数据中心
常见光模块的封装
光模块的封装,保障了光通信的稳定和可靠性。本文介绍几种常见的光模块的封装类型。
|
11月前
|
JSON 数据格式 Python
Python中如何编写接口,以及如何请求外部接口
Python中如何编写接口,以及如何请求外部接口
238 0
C++函数适配器和函数包装器:让你的函数更灵活
前言:这次给大家带来的是C++函数适配器和函数包装器,它可以让你的让你的函数更灵活,更加易用
|
设计模式 JSON JavaScript
从封装JSONEditor和ElButton看如何二次封装第三方库和插件
从封装JSONEditor和ElButton看如何二次封装第三方库和插件
430 0
|
数据安全/隐私保护 Python
python接口自动化(三十四)-封装与调用--函数和参数化(详解)
参数化的思维只需记住一点:不要写死,这样就便于维护,否则就会牵一发而动全身,一处修改导致处处修改,不便于维护。
1158 1
python接口自动化(三十四)-封装与调用--函数和参数化(详解)
|
jenkins 测试技术 持续交付
python接口自动化(三十五)-封装与调用--流程类接口关联(详解)
流程相关的接口,主要用 session 关联,如果写成函数(如上篇),s 参数每个函数都要带,每个函数多个参数,这时候封装成类会更方便。在这里我们还是以博客园为例,带着小伙伴们实践一下。
345 0
python接口自动化(三十五)-封装与调用--流程类接口关联(详解)
|
JSON 数据格式 开发者
方法的封装| 学习笔记
快速学习方法的封装
107 0
|
JavaScript 开发者
改造原有代码-使用封装的函数实现|学习笔记
快速学习改造原有代码-使用封装的函数实现
54 0