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

面试官问题：那你讲讲项目职责中的这个点：使用路由钩子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中没有id
    if(!to.query.id){
      //（3）直接给query添加id
      to.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数组中，没有数字直接赋值为0
    numbers.push(isNaN(number) ? 0 : number);
  }
  //（8）获取页签最大编号
  let maxNumber = Math.max(...numbers);
  //（9）因为使用push方法，所以新增元素都是最后一个，
  //所以新增页签编号直接使用最大数字+1即可
filterNavBars[filterNavBars.length-1].innerHTML = `工作簿${maxNumber+1}`;
 
}
</script>