手摸手，一起整理前端小小小知识

左手的ㄟ右手 2022-12-11 03:25 186阅读 0赞

Vue 相关

1.vue 路由传参有哪几种方式

刷新页面数据不会丢失，可用于详情页

this.$router.push({ 
         path: `/index/${ id}`,
     })
     // 对应的路由配置
     { 
         path: '/index/:id',
         name: 'index',
         component: index
     }
     // 获取参数的方式
     this.$route.params.id

2.刷新页面数据丢失

this.$router.push({ 
       name: 'index',
       params: { 
         id: id
       }
     })
    // 对应路由配置
     { 
         path: '/index',
         name: 'index',
         component: index
     }
     // 获取参数方式
     this.$route.params.id

3.使用 query 传递，url 后面?id=

this.$router.push({ 
       name: 'index',
       query: { 
         id: id
       }
     })
     // 对应路由配置
     { 
         path: '/index',
         name: 'index',
         component: index
     }
     // 获取参数方式
     this.$route.query.id

1.  vue 的通信方式

这个文章写的不错，你们去看看吧~ segmentfault.com/a/119000001…

1.  后台权限管理怎么实现

在前端配置一个权限表，根据登录返回状态，动态匹配权限表  
后端返回权限数据列表，把数据保存到本地 JSON 格式，动态添加路由  
4. 说说你理解的 vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。作用是将应用中的所有状态都放在一起，集中式来管理。核心就是store，用来存放应用中大部分的state

Vuex包含了五大属性，state、getter、mutation、action、module，具体看这里呀

这里想简单补充一下关于缓存的问题:vuex主要用于组件之间的传值，localstorage、sessionstorage则主要用于不同页面之间的传值  
vuex

存储在内存，刷新页面vuex存储的值会丢失

localStorage

本地存储，存储的数据没有时间限制，不删就会一直存在

sessionStorage

会话存储，临时保存，当用户关闭浏览器窗口后，数据会被删除

5.跨域问题如何产生的，该如何解决  
![在这里插入图片描述][20200928110118552.png_pic_center]  
相信跨域问题大家都不陌生，因为浏览器出于安全考虑，有同源策略，也就是说，如果协议、域名、或者端口有一个不同就是跨域

// vue.config.js
    module.exports = { 
        devServer: { 
            proxy: { 
                '/api': { 
                    target: 'http://xixixi.cn',
                    changeOrigin: true,
                    ws: true,
                    pathRewrite: { 
                        '^/api': ''
                    }
                }
            },
        },
        parallel: false,  // 防止打包后图标丢失
        outputDir: 'h5',  // 打包名称
    }

我知道你们肯定不会看之前给你们提到的config 官方配置，所以我再放一遍，都给我看！

1.  axios 封装和 api 的统一管理

上面说到’/api’开头，代理所有请求到目标服务器，这里想简单提一下关于axios和apiaxios 的封装，主要是用来帮我们进行请求和响应的拦截 api 接口的统一管理，可以方便我们管理我们的接口，在接口更新时不需要返回到业务代码中去修改接口，例如:

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴
    趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，
    欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。
    好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：
    【前端留学生】  每天更新最新技术文章干货。
    const base_url = '/shangcheng'
    export const request = async(params) => post(`${ base_url}/Shop`, params);

根据项目需求自行封装 axios，这里不做展示

7、 你该知道的template

<template v-if="chapter">
        <p>chapter 1</p>
        <p>chapter 2</p>
    </template>

如果单纯的只为了切换条件，无需使用div多嵌套一层，选择只在运行时做处理，最终并不渲染的更为巧妙

js 相关

1.async await

ES8 引入了async/await，这是 js 异步编程的重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰看我更好理解 async/await

2.多重条件优雅判断

let code = 1;
    if (code === 1 || code === 2 || code === 3) { 
        console.log(111, code);
    }
    if ([1, 2, 3].includes(code)) { 
        console.log(222, code);
    }

3.数组去重的几种表现形式

let arr = [5, 9, 0, 3, 3, 5, 4, 2];

1.使用 set 去重

const newArr = [...new Set(arr)]; 
    console.log(newArr); // [0, 2, 3, 4, 5, 9]

2.使用 indexOf 查找

unique(arr) { 
       return arr.filter((item, index) => { 
          return arr.indexOf(item) === index
       })
    }
    console.log(this.unique(arr)); // [5, 9, 0, 3, 4, 2]

3.使用 set 去重

unique(arr) { 
       let new_arr = new Map();
       return arr.filter((item) => { 
          return !new_arr.has(item) && new_arr.set(item, 1);
       });
    },
    console.log(this.unique(arr)); // [5, 9, 0, 3, 4, 2]

4.对象数组去重

// 只做示例，参数根据自身需要修改
    unique(arr) { 
       arr = arr.reduce(function(item, next) { 
          arr[next.phone] ? "" : (arr[next.phone] = true && item.push(next));
          return item;
       }, []);
       return arr;
    }

CSS 相关

1、 头像变形问题

object-fit: cover;
    object-position: center;

2.背景虚化

body { 
        filter: blur(2px);
    }

3.特殊的定位功能  
![在这里插入图片描述][2020092811042568.png_pic_center]

<span class="pf">绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度</span>

.pf { 
       position: fixed;
       left: 100px;
       right: 100px;
       background-color: red;
       height: 100px;
    }

4.flex 布局下 margin:auto 的神奇用法  
![在这里插入图片描述][20200928110456866.png_pic_center]

.content { 
       display: flex;
    }
    .content>p { 
       width: 20px;
       height: 20px;
       /* outline 可用于描边 不占地方 */
       outline: 1px solid;
       margin: auto;
    }

5.覆盖 ui 库中的组件样式

$primaryColor: #158dff;
    /deep/ .van-tab--active { 
        color: $primaryColor;
    }

6.对于’富文本内容’的操作

content= content.replace(/img/g,'img width="100%" ');

解决图片溢出的问题

content= content.replace(/img/g,'img width="100%" ');

给富文本图片添加点击事件

onClick(e){ 
        var obj=e.target;
      if(obj.src){ 
         console.log('别点我')
      }
    }

7.rgba() 和 opacity 的透明效果有什么不同

两者都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内所有内容的透明度，而rgba()只作用于元素的颜色或其背景色(设置rgba()元素的子元素及内容都不会继承透明效果)  
其他

1.  前端异常处理有哪些，该如何处理

这个文章生生被我整成了合集哈哈，球球了，你们将就一下吧最全前端异常处理方案

1.  window 的主对象主要有几个  
    window 五大对象 Navigator、Screen、History、Location、Window
2.  轮询

有时候页面需要显示一段时刻在变化的数据，当后端不能websocket的时候，页面数据的来源需要通过请求接口获得，这时候就需要用到轮询，例如

let that = this;
    const timers = window.setInterval(() => { 
       setTimeout((res) => { 
          that.getOrderStatus();
       }, 0);
    , 2000);
    that.$once("hook:beforeDestroy", () => { 
       clearInterval(timers);
    });

4.简洁优雅的代码  
忍不住想谈谈代码规范的重要性，好的代码结构不仅自己看着爽歪歪，减少开发过程中的逻辑混乱，别人看着也美滋滋，提高工作效率，本菜鸡在这里只简要说明，掘友们轻喷…

函数的参数越少越好，超过两个，就应该用对象传入

保持函数的单一职责原则，拆分函数，尤其是复杂和常用逻辑

条件语句单独封装

注意命名规范

链式编程分行写，增加可读性

多重判断将特殊的放在最前面，并使用switch代替if

后记：都怪我都怪我我该打！你说说现在写这些还有什么用，各位大佬们都开始上手 Vue3.0 了，我也不能无动于衷呀，接下来不忙的日子(胡说八道！外包哪有不忙的)，也要学习一下了，毕竟比你还强的人比你起得早还比你用功，哭了！菜鸟的春天什么时候来啊，乖巧等待 ed… 最后，老规矩，给孩子多点关心多点爱嘻嘻！还有我气！我本来用了mdnice排版，结果说字数超了，没样式了！我气！

[20200928110118552.png_pic_center]: /images/20221123/aa4f3fd8dd014e24af5134d5518a1f41.png
[2020092811042568.png_pic_center]: /images/20221123/ad098b16807d439b91d789057bf6efbe.png
[20200928110456866.png_pic_center]: /images/20221123/06057441776e43ffa17b777999dd90d5.png