经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript前端实用的工具函数封装
来源:jb51  时间:2022/7/19 13:03:04  对本文有异议

1.webpack里面配置自动注册组件

第一个参数是匹配路径,第二个是深度匹配,第三个是匹配规则

  1. const requireComponent = require.context('./libary', true, /\.vue$/)
  2. export default {
  3. install (Vue) {
  4. requireComponent.keys().forEach((item) => {
  5. **根据组件的name注册全局组件**
  6. Vue.component(
  7. requireComponent(item).default.name,
  8. requireComponent(item).default
  9. )
  10. })
  11. }
  12. }

2.自定义指令图片懒加载

导入默认图片

  1. import defaultImg from '@/assets/images/200.png'
  2. export default {
  3. install (Vue) {
  4. // // 注册自定义指令 v2方法
  5. Vue.directive('lazy', {
  6. // inserted () {
  7. // console.log(11111)
  8. // }
  9. //注册自定义指令 v3方法
  10. mounted (el, binding) {
  11. // 浏览器提供 IntersectionObserver
  12. const observer = new IntersectionObserver(
  13. ([{ isIntersecting }]) => {
  14. // console.log(isIntersecting, '====IntersectionObserver')
  15. if (isIntersecting) {
  16. console.log(el, binding, 11111)
  17. // 图片加载失败就显示默认图片
  18. el.onerror = function () {
  19. el.src = defaultImg
  20. }
  21. el.src = binding.value
  22. // 不在监听dom
  23. observer.unobserve(el)
  24. }
  25. },
  26. {
  27. threshold: 0.01
  28. }
  29. )
  30. // 监听dom
  31. observer.observe(el)
  32. }
  33. })
  34. }
  35. }

3.图片文件转base64格式(实现预览)

基于 FileReader 把文件读取为 base64 的字符串:

  1. fileChange (e) {
  2. // console.log(e.target.files)
  3. if (e.target.files.length === 0) {
  4. // 没有选择图片
  5. this.avatar = ''
  6. } else {
  7. // 创建 fr 对象---FileReader构造函数
  8. const fr = new FileReader()
  9. // 读取文件
  10. fr.readAsDataURL(e.target.files[0])
  11. // 监听加载事件,读取成功后执行里面的回调
  12. fr.onload = () => {
  13. // 将结果赋给xxx
  14. this.avatar = fr.result
  15. }
  16. }
  17. },

给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一致

  1. // 注 : list 传来的数组 , value 筛选的条件
  2. function arrToTree(list, value) {
  3. // 1.定义一个空数组,后续往里面添加树形结构
  4. const arr = []
  5. list.forEach(item => {
  6. // 2. 筛选满足要求的item
  7. if (item.pid === value) {
  8. // 3.筛选所有孩子,即pid与父级id一致的(外循环走一次,里面走完所有)
  9. const children = arrToTree(list, item.id)
  10. // 4.父级中有孩子,才能加上children属性
  11. if (children.length > 0) {
  12. // 5. 因为需要的树形结构中孩子属性名为children,手动给父级添加一个children属性,并赋值
  13. item.children = children
  14. }
  15. // 6. 把满足要求的一组数据push进去
  16. arr.push(item)
  17. }
  18. })
  19. // 返回树形结构
  20. return arr
  21. }

// 第一次调用函数,找出pid为''的每一项(即父级),后面调用,找孩子

调用: arrToTree(list, '')

5.递归深拷贝

  1. let obj = {
  2. name:'张三',
  3. age:20,
  4. hobby:['学习','上课','干饭'],
  5. student:{
  6. name:'尼古拉斯赵四',
  7. age:38
  8. }
  9. }
  10. //深拷贝函数
  11. function copy(obj,newObj){
  12. for(let key in obj ){
  13. if( obj[key] instanceof Array ){
  14. newObj[key] = []
  15. //递归调用 继续深拷贝数组
  16. copy(obj[key],newObj[key])
  17. }else if( obj[key] instanceof Object ){
  18. newObj[key] = {}
  19. //递归调用 继续深拷贝对象
  20. copy(obj[key],newObj[key])
  21. }else{
  22. newObj[key] = obj[key]
  23. }
  24. }
  25. }
  26. //开始拷贝
  27. let newObj = {}
  28. copy(obj,newObj)

6.将数组里面的对象转换成我们需要的键值对

我们拿到的数据:arr=[{入职日期:43535,姓名:'jack',手机号:111111....},{}]

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

  1. //手动写一个具有对应关系的对象
  2. const userRelations = {
  3. '入职日期': 'timeOfEntry',
  4. '手机号': 'mobile',
  5. '姓名': 'username',
  6. '转正日期': 'correctionTime',
  7. '工号': 'workNumber'
  8. }
  9. //第一个参数是自己写的对应关系对象,第二个参数是原数组
  10. function demandArr(userRelations,arr){
  11. //创建一个空数组
  12. const newArr = []
  13. arr.forEach(item => {
  14. //创建一个空对象
  15. const obj = {}
  16. //循环数组里的每一个对象
  17. for (const k in item) {
  18. const englishKey = userRelations[k]
  19. obj[englishKey] = item[k]
  20. }
  21. newArr.push(obj)
  22. })
  23. }
  24. // console.log(newArr)

以上就是JavaScript前端实用的工具函数封装的详细内容,更多关于JavaScript工具函数封装的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号