前端面试:项目重难点细节问题(已工作|给大家做个分享)

本文主要是介绍前端面试:项目重难点细节问题(已工作|给大家做个分享),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

面试官问题:那你讲讲项目职责中的这个点:使用路由钩子Router.beforeEach()实现导航栏页签多开并编号排序的效果?你是怎么做的?有没有遇到什么问题?你是怎么解决的?

答:我的回答,实现的效果图就是类似于下面这个工作簿的页签多开,怕大家不理解我做的效果,给大家截图,你们将就看看:(便于大家观看回答,我给大家标个序号)

(1)我的整体实现思路:我发现关键点有两个:第一个:如何让浏览器打开页签时可以实现多开?第二个:如何给这些多开的页签进行编号?只要把上述两点解决了,这个效果就可实现,下面我将一一阐述我的是实现思路:第一点:如何让浏览器打开页签时可以实现多开:我发现只要浏览器地址栏不同就会新开一个页签,所以我就想到了使用路由钩子来实现不同地址:eg:/data/detail?id=1234、/data/detail?id=4567,所以关键问题还是这个如何每次路由地址中的id参数不同,于是我使用了路由导航钩子Router.beforEach(),每次路由发生跳转前,找到该路由地址,给该路由地址加上不同的id即可,这个不同的id我主要是通过Date.now()时间戳来获取的,所以由于路由地址不同,那就可实现跳转到不同页面,实现页签多开效果了。第二点:那如何给多开页签编号呢?我主要是在mounted()函数里实现:首先,通过页签元素的内容通过正则表达式匹配到这些元素并放入数组中eg:Arr=[h3 .navBar,h3 .navBar];然后遍历Arr数组,并使用Arr[i].InnerHTML = `工作簿+${i+1}`的方式来更新页签名字,使其在页面上显示为"工作簿1"、"工作簿2"等。

(2)当然,我确实遇到了问题:我已经实现了页签多开的效果,但是我自己测试时发现我删除或增加页签时,整体页签会重新排序,导致原来打开页签序号发生变化,那用户就不能找到以前自己打开的页签是哪个。

(3)我的解决过程如下:我仔细复现并思考这个问题;开始分析自己写的代码,发现代码有一部分页签的编排序号确实是每次都会重新排序,就会导致用户在增加页签时,全部页签都会重新编号;最我就开始修改发现问题的这部分代码:

首先,遍历获取页签元素内容并放入一个数组中,eg:arr1=["工作簿1","工作簿2","工作簿3"]的;然后,使用正则表达式匹配上述页签元素内容的数字,放入另外一个数组中arr2=[1,2,3];最后,通过Math.max(...arr2)获取编号的最大值,所以新增页签就可以接着最大编号+1进行排序编号了,就会解决上述新增页签元素内容的编号会被打乱重新排序的问题。

(4)代码实现(给大家看看代码,我觉得看着代码更好理解,便于大家理解):

修改前的代码,有问题:新增页签自动重新编号:【看代码片段的方法一

修改后的代码,已解决上述问题:【看代码片段图片的方法二

(5)建议:大家和他人交流项目细节问题时首先是要表述清自己的思路,其次是阐述具体实现过程中可以提到点方法\属性(类似于英语单词的技术站API这些),最后项目细节就是自己阐述自己平时写代码的这个过程,不难的,多练多想多讲就好了


<script>
//1、目的:为了让浏览器地址栏出现不同地址时显示不同页签
Router.beforEach((to,from,next)=>{//(1)通过名称匹配路由if("dataImport" == to.name){//(2)如果query中没有idif(!to.query.id){//(3)直接给query添加idto.query.id = Date.now();//(4)执行Router.push(to)进行路由跳转,将修改后的目标路由应用于导航Router.push(to);}};//(5)调用next()函数以继续导航next();
})//2、目的:为了实现不同页签的名字编排序号
function setTbaTitle(){//(1)获取所有具有类名"navBar"的元素,并将它们存储在navBarArr变量中 let navBarArr = document.getElementsByClassName("navBar");//(2)初始化一个空数组filterNavBars用于存储筛选后的导航栏元素// eg:["工作簿1","工作簿2","工作簿3","工作簿"]  let filterNavBars = [];//初始化一个空数组arr用于存储筛选后的导航栏元素的内容let arr = [];//(3)使用循环遍历navBarArr中的每个导航栏元素for(let i = 0;i<navBarArr.length;i++){let navBar = navBarArr[i];let pattern = /^工作簿\d+$/;//(4)检查导航栏元素的内容是否为"工作簿",或"工作簿1"、"工作簿2"等匹配if(navBar.innerHTML == "工作簿" || pattern.test(navBar.innerHTML)){//(5)如果匹配成功,则将该导航栏元素添加到filterNavBars数组中filterNavBars.push(navBar);arr.push(navBar.innerHTML);}};//方法一(错误):注意:以下这部分代码会导致用户添加页签时,//给所有打开页签重新编号的问题//(6)遍历filterNavBars数组中的每个导航栏元素for(let i=0;i<filterNavBars.length;i++){//(7)如果当前导航栏元素已定义且不为undefined,则修改其内容,//将索引递增1追加到"工作簿"前面if(filterNavBars[i] != undefined){//(8)更新导航栏中特定元素的标题,//使其显示为"工作簿1"、"工作簿2"等filterNavBars[i].innerHTML = `工作簿${i+1}`;}};//方法二(正确):注意:下面代码就可以解决上述问题let numbers = [];//(6)在arr=["工作簿1","工作簿2","工作簿3","工作簿"]数组//中直接获取导航栏元素的页签名字中的数字for(let i=0;i<arr.length;i++){let number = parseInt(arr[i].match(/\d+/));//(7)如果有数字直接放进去numbers数组中,没有数字直接赋值为0numbers.push(isNaN(number) ? 0 : number);}//(8)获取页签最大编号let maxNumber = Math.max(...numbers);//(9)因为使用push方法,所以新增元素都是最后一个,//所以新增页签编号直接使用最大数字+1即可
filterNavBars[filterNavBars.length-1].innerHTML = `工作簿${maxNumber+1}`;}
</script>

这篇关于前端面试:项目重难点细节问题(已工作|给大家做个分享)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/983260

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

字节面试 | 如何测试RocketMQ、RocketMQ?

字节面试:RocketMQ是怎么测试的呢? 答: 首先保证消息的消费正确、设计逆向用例,在验证消息内容为空等情况时的消费正确性; 推送大批量MQ,通过Admin控制台查看MQ消费的情况,是否出现消费假死、TPS是否正常等等问题。(上述都是临场发挥,但是RocketMQ真正的测试点,还真的需要探讨) 01 先了解RocketMQ 作为测试也是要简单了解RocketMQ。简单来说,就是一个分

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

【专题】2024飞行汽车技术全景报告合集PDF分享(附原数据表)

原文链接: https://tecdat.cn/?p=37628 6月16日,小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞,这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示,公司准备量产,并计划今年四季度开启预售小鹏汇天分体式飞行汽车,探索分体式飞行汽车城际通勤。阅读原文,获取专题报告合集全文,解锁文末271份飞行汽车相关行业研究报告。 据悉,业内人士对飞行汽车行业