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

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

面试官问题：那你讲讲项目职责中的这个点：使用路由钩子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>

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

---