2024年前端面试中面试官常拷打的“项目细节”！

解决了：

• 使用Modernizr 等功能检测库来检测浏览器是否支持特定功能。

• 我们采用逐步增强策略，确保基本功能在所有浏览器中都能正常运行，高级功能则根据浏览器能力逐步增强。

8. 通过主页链接获取参数。

不跳出项目页面就可以获取到，但是这个项目有很多外部链接，我获取的参数有问题，所以回去的时候可能页面是空白的。解决方案：将参数设置为缓存，返回速度较快，但仍然会出现首页无法检索参数的问题。

解决方案：将templateId写入首页1即可获取连接。 if (模板ID) {

1 if (模板ID) {

2 this.$store.commit(\’updateTemplatedId\’,templateId);

3 window.localStorage.setItem(\’templateId\’, templateId);

4 console.log(\’store===templateId\’,this.$store.state.templateId)

5}其他{

6 setTimeout(函数() {

7 窗口.location.reload()

8}, 1500);

9}

十

9.更新文件缓存坑。

每当打包文件进行后端更新时，用户手机上始终会留下最新版本信息，因此每次都必须清除缓存才能显示最新版本的数据。然后我师傅建议，每当前端更新版本时，后端都应该返回更新后的接口版本，将时间戳传递给后端，让后端决定Did。接收后保存时间戳。无论是否相同，都无需更新相同的回报。在这种情况下，前端处理方法将是：如果需要刷新，请清除缓存并刷新页面。

.js 和.css 文件的后缀可以添加时间戳，但页面条目Index.html 每次都会相同。百度说需要在nginx服务器上更新，但是由于公司服务器上文件较多，万一出错就麻烦了。

10. 解析从后端返回的地图格式数据时的陷阱。

解析数据时，可以直接取出数据，直接渲染页面来使用。然而，这次后端以map的形式返回数据，我们需要解析它。 示例：主体[\’1\’]。返回的格式将被解析为所需的数据格式。

11、动态加载vue组件的陷阱。

由于我不确定主页的布局，所以我想到让该组件的数据出现并根据后端传递的数据显示该组件。解决方案：与您的后端对话并创建一个徽标。前端根据logo做出决策并动态显示组件。在使用Vue的时候，一开始我以为可以像原来JS中那样直接用append插入，但是后来想了想，发现完全不可能。因为添加后插入的一定是节点而不是组件。之后我查了Vue文档。

12.页面缓存的陷阱。

将有一个页面用于输入您的信息，您需要输入一些信息才能访问新合同页面。您必须继续保留您在此页面上输入的信息。 解决方案：使用vue提供的keepalives来完成页面缓存。

13. 路由参数功能中的陷阱。

之前我一直使用路由来传递参数，但是参数是从上一个页面传递过来的，所以当我刷新这个页面时，参数在页面上是看不到的。 解决方案：使用缓存和vuex状态管理。不过由于项目不是很大，所以最常使用的是缓存。

14、axios requests中post请求的陷阱。

20、使用qiankun时，如何处理js沙箱无法解决的js污染问题？

乾坤的JS沙箱机制主要是通过代理窗口对象来实现的，可以有效隔离子应用的全局变量，防止子应用之间的全局变量污染。但这种机制并不能解决所有js污染问题。例如，如果使用onclick或addEventListener向body添加点击事件，js沙箱无法消除其影响。

处理这种情况需要依赖良好的编码标准和开发人员意识。开发子应用程序时，应避免直接操作全局对象，例如窗口和文档。如有必要，应在卸载子应用程序时清理这些全局事件和变量，以防止对其他子应用程序或主应用程序造成影响。

21、项目中是否有单独打包的组件？ 答：有，项目中常见的组件（如页眉组件、页底组件等）都保存在项目的注释文件中。在feature文件下，放置项目的功能组件（轮播、拆分器、上拉加载等），并将这些页面的重复部分提取出来单独打包，减少代码量，提高性能。项目开发效率。解决了传统项目效率低、维护困难、复用性低的问题。

22、项目中发送请求时如何携带token

Ans：当用户登录时，后端返回用户信息和token，并存储token，并将存储的token放入请求拦截器中。这允许所有请求直接通过令牌传递。服务器。

23.你在工作中使用git吗？

答：是的，在我以前的公司，git 基本上是一个分布式版本控制工具。在第一页，访问远程仓库，复制项目链接。使用git init 方法在项目根目录中创建本地git 存储库来执行开发。开发完成后，使用git add 方法将所有文件加载到临时存储区，并使用gitcommit -m 提交代码。对于本地仓库，它首先从远程仓库拉取代码（避免远程仓库与本地代码冲突时发生冲突），最后将代码从本地仓库推送到远程仓库。您还可以使用git merge 将子分支代码合并到主分支代码存储库中。

24.如何解决git版本冲突？

版本冲突主要发生在合并操作（远程仓库代码合并或分支代码合并）过程中。如果出现版本冲突，您需要仔细分析冲突的代码区域，并在提交之前手动合并代码。

25. 如何快速使盒子水平和垂直居中

实现纯flex布局：设置元素的flex布局，并添加flexalignltems:center垂直居中，justifycontent:center水平居中，达到居中效果。

实现Flex布局+margin：设置父级为display: flex布局，子级添加/margin:auto。

可以实现水平和垂直居中显示。

实现绝对定位+边距：对于绝对定位的元素，将top/bottom/left/right设置为O，并设置margin:auto即可实现居中。

C3中Transform中的绝对定位+margin（边距）+Translate实现：将元素绝对定位，使用margin偏移外容器的50%，然后使用Translate创建自己的正确宽度和高度50%。

26.如何优化首屏加载白屏

回答：

具体处理步骤：如果response拦截器失败回调判断error.response状态码等于401，表示token无效或者已经过期，判断vuex中的sdata.user信息要做。进入登录页面（可以封装调用router.push()作为跳转函数）。可以选择在响应拦截器外部定义一个变量来标记令牌的刷新状态。默认为false（以避免多次请求刷新令牌），并使用一个数组根据用户信息逻辑确定该变量是否为true。这意味着刷新令牌的请求正在进行中。然后回去。

推送功能将失败的请求存储在列表中。否则，表示该变量为false。接下来，检索用户信息中的refresh token字段，获取新的token请求。要实现免用户感知刷新tokan，使用if判断code field==200。如果失败，则使用vuex的commit方法清除mutation中无效的用户信息，并调用jump函数进行跳转。登录页面；代码字段==200。如果成功，则使用vuex的commit方法将新的token保存到mutation中，并重新提交失败的请求（使用forEach遍历请求存储列表并进行自调用）。然后清空数组，最后无论请求成功还是失败，都将该变量字段设置为false。

32. 请告诉我该项目的进展情况。

回答：

1. 建立项目2. BA 组织项目需求并确定项目周期。

3.需求审查（通过项目要求）

4.后端设计数据库、UI设计原型图

5.ui审查

6、前端静态页面开发（模拟数据测试）、后端接口及测试用例测试。

7.前后端联合调试

8. 测试

9.项目上线

33.产品及增删改查

答：检索已有的商品列表信息（商品名称、商品价格、商品信息），渲染并展示列表，并根据接口文档添加、删除、修改商品。

添加：根据接口文档，发送添加请求并使用接口返回的结果代码字段（如果等于==200）。

Element-UI Messages 消息表明添加成功，遮罩层关闭为false，调用数据请求函数更新列表。否则，会抛出错误消息。

修改：点击修改时，会弹出元素UI遮罩层，收集用户修改数据。这里执行了lodash浅拷贝分配操作（因为数据在页面上）。

正在展⽰，直接修改数据会导致⻚⾯数据发⽣变化），点击确定的时候会，就把⽤⼾信息作为参数，发送修改请求，判断接⼝返回结果中code字段的 ==200 就使⽤ Element-UI的message消息提⽰，修改成功，关闭遮罩层为false，调⽤请求数据函数更新列表；else 就抛出⼀个错误；

删除：在删除的回调中可以拿到当前商品的id，那么就把id作为参数发送删除请求，判断接⼝返回结果中code 字段的== 200就使⽤Element-UI 的message消息提⽰，删除成功，调⽤请求数据函数来更新列表；

34. Element-UI 的form表单验证你是怎么使⽤的

答：⾸先是在form表单配置 rules 校验规则，可以在组件data中⾃定义（或者统⼀封装到⼀个Js⽂件中），使⽤required: true，来设置form表单为必填项，message设置提⽰信息，通过trigger 定义触发校验⽅式；当全部表单都符合校验规则，在点击确定的时候调⽤ validate进⾏最终的表单校验。

validate 参数为⼀个回调函数，回调函数有⼀个 config参数（是否校验成功）我们可以对config进⾏判断，成功就携带form表单的信息提交后台；

35. 项⽬中的商品详情⻚你是怎么实现的

答：当⽤⼾点击商品名字或者图⽚的时候，就进⾏this.$router.push 进⾏路由跳转并传递商品的id 到详情⻚，再通过后台提供的相关详情接⼝，把id 作为参数，在详情组件的 mounted钩⼦函数中派发action 调⽤Vuex中的请求函数，获取到商品的详细数据存储Vuex中，通过getters 配置对象，对数据进⾏简化，通过mapgetters 映射给组件，使⽤插值语法或者v-for进⾏数据的渲染；

36. 什么是数组扁平化

答：所谓的数组扁平化就是将多维数组转化为⼀维数组；

⼀般数组扁平化，数组中存储的多维数据都是数组 不会是对象或者函数；

具体实现：最常⽤的⽅法就是使⽤toString（）⽅法将数组中的每⼀个数据，转成⼀个字符串，使⽤逗号进⾏间隔，再使⽤字符串中的split⽅法，以逗号进⾏分割将字符串再转化为⼀维数组；

37. 你这个项⽬登陆是怎么实现的

答：登陆的⽅式有很多种，我们这个选择两种⽅式进⾏回答。

第⼀种：⼿机号+验证码实现登陆

（1）在⽤⼾选择登陆的时候，会收集⽤⼾输⼊的信息，进⾏⼀个form的校验(正则或者Element-U⽅式，校验字段是否合法，不合法就给予错误提⽰)

（2）当⽤⼾点击获取验证码按钮的时候，发送获取验证码请求，后端会发验证码⾄⽤⼾⼿机，并对验证码设置⼀个过期时间，这时把按钮disabled设置为true变为禁⽤状态，使⽤setinterval定时器设置⼀个倒计时的效果，把按钮⽂本内容与倒计时进⾏拼接显⽰，判断这个倒计时等于0就清除这个定时器clearlnterval,解除按钮的禁⽤状态disabled设置为false,按钮⽂本恢复为获取验证码，计时变量再设置为60秒；⽤⼾收到验证码后进⾏输⼊。

(3)在点击登录的回调中，为了防⽌在输⼊验证码后⼿机号更换了或者删除了，发送⽆效请求，所以这⾥还要对⼿机号进⾏校验，不合法就提⽰⽤⼾输⼊正确⼿机号，然后return退出，合法就发送登陆请求，if判断返回请求结果成功就$router.push()跳转到⾸⻚；else登陆失败，就直接return⼀个Promise.reject()new⼀个error错误进⾏抛出；

第⼆种：账⼾+密码实现登陆

(1)收集数据，进⾏form表单验证与上⾯相同；

(2)通过监听属性调⽤后台获取公钥接⼝，(该接⼝中后台会通过算法⽣成⼀对钥匙公钥、私钥，并存到session中，公钥则返回给前端)前端拿到公钥后，再通过JS加密库中的⽅法对⽤⼾输⼊的密码进⾏加密。

(3)点击登录时，发送登录请求，传递加密好的密⽂；登录成功后，就提⽰⽤⼾登陆成功，本地存储token令牌，使⽤$router.push()跳转⾄⾸⻚；

38. 项⽬中的权限管理怎么实现的答：权限管理有三个很重要的模块；

(1)⽤⼾模块：可以给⽤⼾分配不同的⻆⾊

(2)⻆⾊模块：可以授于⽤⼾不同的⻆⾊，不同的⻆⾊有不同权限

(3)权限模块：⽤于管理系统中的权限接⼝，为⻆⾊提供对应的权限

具体实现步骤

根据⽤⼾管理中给⽤⼾分配⻆⾊的不同，就有对应的菜单权限。

(1)当⽤⼾登录后，后端会把⽤⼾token和相应的⽤⼾信息(⽤⼾名/菜单权限),返回给前端，前端会先把⽤⼾信息先进⾏保存。

(2)在routes.js路由⽂件中把路由拆分为静态路由和动态路由，在vuex的user.js模块中，通过数组的filter⽅法和indexOf定义⼀个递归函数，在请求⽤⼾信息的时候，再进⾏commit提交mutations⼀个计算函数同时调⽤递归函数传递参数(参数⼀是异步路由，参数⼆是⽤⼾的权限信息)进⾏递归过滤，留下当前⽤⼾有权限访问的路由。

(3)在mutations中，通过concat⽅法合并静态路由和过滤后的动态路由，使⽤路由的addRouter⽅法注册为新的路由，实现根据不同的⽤⼾展⽰不同的菜单侧边栏； (后端也会进⾏⼀些权限接⼝的判断和拦截，通过⾮法途径是访问不了的)

39. Vue的$nextTick()⽅法有⽤到过吗

答：有，⽐如说数据渲染更新后，我们要更后的数据进⾏某些操作时，就可以在nextTick指定的回调函数中去执⾏；

40. 深拷⻉与浅拷⻉

浅拷⻉：只是复制某个对象的指针，⽽不复制对象本⾝，新旧对象还是共享同⼀块内存；深拷⻉：会另外创造⼀个⼀模⼀样的对象，新对象跟原对象不共享内存，修改新对象不会影响到原对象；

实现浅拷⻉⽅式：1.0bject.assign;2.es6扩展运算符

实现深拷⻉⽅式：1.JSON.parse(JSON.stringify(object));2.lodash插件；

实际⼯作中：(1)当数据类型⽐较简单时(对象/数组)的时候，可以⽤浅拷⻉；(2)当数据结构中存在对象⾥⾯套数组，数组⾥⾯套对象(结构较为复杂),需要使⽤深拷⻉来解决这类问题；

lodash插件；

实际⼯作中：(1)当数据类型⽐较简单时(对象/数组)的时候，可以⽤浅拷⻉；(2)当数据结构中存在对象⾥⾯套数组，数组⾥⾯套对象(结构较为复杂),需要使⽤深拷⻉来解决这类问题；41. 在Vue是项⽬中如何打开新的⻚⾯

答：使⽤this.$router.resolve()和window.open(xxx.href,\’_blank\’)在进⾏路由跳转的时候就会打开新的窗⼝。但是这种⽅式有个问题就是不能⽤params⽅式进⾏传递参数，在⻚⾯跳转过去后，获取的params⽅式传递参数为undefined。

解决办法：使⽤query⽅式传参，本地存储或者Vuex;

42. 请解释⼀下微前端的概念以及它的主要优点和挑战?

微前端是⼀种将不同的前端应⽤组合到⼀起的架构模式。这些应⽤可以独⽴开发、独⽴部署、独⽴运⾏，然后在⼀个主应⽤中进⾏集成。这种模式的主要⽬标是解决⼤型、⻓期演进的前端项⽬的复杂性问题。

主要优点：

1. 解耦： 微前端架构可以将⼤型项⽬分解为多个可以独⽴开发、测试和部署的⼩型应⽤。这种解耦可以提⾼开发效率，减少团队间的协调成本。

2. 技术栈⽆关： 不同的微前端应⽤可以使⽤不同的技术栈，这为使⽤新技术、升级旧技术提供了可能。

3. 并⾏开发： 因为微前端应⽤是独⽴的，所以多个团队可以并⾏开发不同的应⽤，⽆需担⼼相互影响。

4. 独⽴部署： 每个微前端应⽤可以独⽴部署，这意味着可以更快地推出新功能，同时降低了部署失败的⻛险。

主要挑战：

1. 性能问题： 如果不同的微前端应⽤使⽤了不同的库或框架，可能会导致加载和运⾏的性能问题。

2. ⼀致性： 保持不同的微前端应⽤在⽤⼾体验、设计和⾏为上的⼀致性可能会⽐较困难。

3. 状态共享： 在微前端应⽤之间共享状态可能会⽐较复杂，需要使⽤特殊的⼯具或模式。

4. 复杂性： 尽管微前端可以解决⼤型项⽬的复杂性问题，但是它⾃⾝也带来了⼀些复杂性，⽐如需要管理和协调多个独⽴的应⽤。

5. 安全性： 微前端架构可能会增加跨域等安全问题。

43. 你能详细描述⼀下 qiankun 微前端框架的⼯作原理吗？

qiankun 是⼀个基于 single-spa 的微前端实现框架。它的⼯作原理主要涉及到以下⼏个⽅⾯：

1. 应⽤加载：qiankun 通过动态创建 script 标签的⽅式加载⼦应⽤的⼊⼝⽂件。加载完成后，会执⾏⼦应⽤暴露出的⽣命周期函数。

2. ⽣命周期管理：qiankun 要求每个⼦应⽤都需要暴露出 bootstrap、mount 和 unmount 三个⽣命周期函数。bootstrap 函数在应⽤加载时被调⽤，mount 函数在应⽤启动时被调⽤，unmount 函数在应⽤卸载时被调⽤。

3. 沙箱隔离：qiankun 通过 Proxy 对象创建了⼀个 JavaScript 沙箱，⽤于隔离⼦应⽤的全局变量，防⽌⼦应⽤之间的全局变量污染。

4. 样式隔离：qiankun 通过动态添加和移除样式标签的⽅式实现了样式隔离。当⼦应⽤启动时，会动态添加⼦应⽤的样式标签，当⼦应⽤卸载时，会移除⼦应⽤的样式标签。

5. 通信机制：qiankun 提供了⼀个全局的通信机制，允许⼦应⽤之间进⾏通信。

44. 在使⽤ qiankun 时，如果⼦应⽤是基于 jQuery 的多⻚应⽤，你会如何处理静态资源的加载问题？

在使⽤ qiankun 时，如果⼦应⽤是基于 jQuery 的多⻚应⽤，静态资源的加载问题可能会成为⼀个挑战。这是因为在微前端环境中，⼦应⽤的静态资源路径可能需要进⾏特殊处理才能正确加载。这⾥有⼏种可能的解决⽅案：

⽅案⼀：使⽤公共路径

在⼦应⽤的静态资源路径前添加公共路径前缀。例如，如果⼦应⽤的静态资源存放在

http://localhost:8080/static/ ，那么可以在所有的静态资源路径前添加这个前缀。

⽅案⼆：劫持标签插⼊函数

这个⽅案分为两步：

1. 对于 HTML 中已有的 img/audio/video 等标签，qiankun ⽀持重写 getTemplate 函数，可以将⼊⼝⽂件 index.html 中的静态资源路径替换掉。

2. 对于动态插⼊的 img/audio/video 等标签，劫持 appendChild、innerHTML、insertBefore 等事件，将资源的相对路径替换成绝对路径。

45. 在使⽤ qiankun 时，如果⼦应⽤动态插⼊了⼀些标签，你会如何处理？

在使⽤ qiankun 时，如果⼦应⽤动态插⼊了⼀些标签，我们可以通过劫持 DOM 的⼀些⽅法来处理。例如，我们可以劫持 appendChild 、 innerHTML 和 insertBefore 等⽅法，将资源的相对路径替换为绝对路径。

46. 在使⽤ qiankun 时，你如何处理⽼项⽬的资源加载问题？你能给出⼀些具体的解决⽅案吗？

在使⽤ qiankun 时，处理⽼项⽬的资源加载问题可以有多种⽅案，具体的选择取决于项⽬的具体情况。以下是⼀些可能的解决⽅案：

1. 使⽤ qiankun 的 getTemplate 函数重写静态资源路径：对于 HTML 中已有的

img/audio/video 等标签， qiankun ⽀持重写 getTemplate 函数，可以将⼊⼝⽂件

index.html 中的静态资源路径替换掉。

2. 劫持标签插⼊函数：对于动态插⼊的 img/audio/video 等标签，我们可以劫持

appendChild 、 innerHTML 、 insertBefore 等事件，将资源的相对路径替换成绝对路径。例如，我们可以劫持 jQuery 的 html ⽅法，将图⽚的相对路径替换为绝对路径：

3. 给⽼项⽬加上 webpack 打包：这个⽅案的可⾏性不⾼，都是陈年⽼项⽬了，没必要这样折腾。

4. 使⽤ iframe 嵌⼊⽼项⽬：虽然 qiankun ⽀持 jQuery ⽼项⽬，但是似乎对多⻚应⽤没有很好的解决办法。每个⻚⾯都去修改，成本很⼤也很⿇烦，但是使⽤ iframe 嵌⼊这些⽼项⽬就⽐较⽅便。

47. 你能解释⼀下 qiankun 的 start 函数的作⽤和参数吗？如果只有⼀个⼦项⽬，你会如何启⽤预加载？

qiankun 的 start 函数是⽤来启动微前端应⽤的。在注册完所有的⼦应⽤之后，我们需要调

⽤ start 函数来启动微前端应⽤。

start 函数接收⼀个可选的配置对象作为参数，这个对象可以包含以下属性：

• prefetch ：预加载模式，可选值有 true 、 false 、 \’all\’ 、 \’popstate\’ 。默认值为 true ，即在主应⽤ start 之后即刻开始预加载所有⼦应⽤的静态资源。如果设置为\’all\’ ，则主应⽤ start 之后会预加载所有⼦应⽤静态资源，⽆论⼦应⽤是否激活。如果设置为 \’popstate\’ ，则只有在路由切换的时候才会去预加载对应⼦应⽤的静态资源。

• sandbox ：沙箱模式，可选值有 true 、 false 、 { strictStyleIsolation: true} 。默认值为 true ，即为每个⼦应⽤创建⼀个新的沙箱环境。如果设置为 false ，则⼦应⽤运⾏在当前环境下，没有任何的隔离。如果设置为 { strictStyleIsolation: true } ，

则会启⽤严格的样式隔离模式，即⼦应⽤的样式会被完全隔离，不会影响到其他⼦应⽤和主应⽤。

• singular ：是否为单例模式，可选值有 true 、 false 。默认值为 true ，即⼀次只能有⼀个⼦应⽤处于激活状态。如果设置为 false ，则可以同时激活多个⼦应⽤。

• fetch ：⾃定义的 fetch ⽅法，⽤于加载⼦应⽤的静态资源。

48. axios-请求中post请求的坑

刚开始的坑是，使⽤axios的post⽅法请求数据，数据被拦截，数据⼀直传不到后端那边。后来查⽂档才得知 axios对于post请求是有拦截功能的，需要⾃⼰判断，或者使⽤提请的 qs ⽅法，将传给后端的数据进⾏下处理。

49. 路由传参的功能的坑

之前⼀直使⽤路由传参，但是当本⻚⾯刷新的时候，⻚⾯上是没有参数的，因为参数是从上个⻚⾯传⼊进来的。 解决办法：使⽤了缓存，和vuex状态管理。但是由于项⽬并不是很⼤型的项⽬，所以使⽤最多的是缓存。

50. ⻚⾯缓存的坑

有个填写信息的⻚⾯，需要填写⼀部分信息，进⼊查新协议⻚⾯，返回的时候，⻚⾯上填写的信息还需要留存。 解决办法：使⽤vue提供的keep-alive，来完成⻚⾯的缓存的。

结尾

因为文章全写出来就太长了，目前来说，后面还有相当多，觉得对大家有帮助的话，可以直接T我或者【点击此处】

更多的场景题、简历模板之类的也可以，都是个人整理！

 
#以上关于2024年前端面试中面试官常拷打的“项目细节”！的相关内容来源网络仅供参考，相关信息请以官方公告为准！