前端面试项目细节重难点(已工作|做分享)想(八)

面试官:请你讲讲你在该项目中遇到的印象深刻的问题是什么?

答:我的回答:该项目的实现过程中我确实遇到了问题:【我会给大家整理回答思路和角度,那那么遇到这样的问题也可借鉴这种思路进行阐述】

第一层面:分析页面:【原型图如下】

60d12960403445409aaca1aa40d969aa.png 

(1)发现问题:

用户在下拉选择的搜索框搜索值David时,整个页面卡死了,不能选到用户需要的值,如下图所示:

e1319d1f08524c22a8da5900c8bcc1a7.png 

此时,打开控制台出现了一个报错信息:大概意思就是id为6的value值已经被id为5的value值使用了。

(2)分析问题:【这个才是项目重难点】

首先,找到返回数据的接口URL,并打开网络请求,根据URL找到该接口,并去预览里复制数据后粘贴到记事本里;

dce66d886bd64090b0b7b9cd4f3c12d4.png

 

然后,直接使用查找功能,分别找到id为5和id为6的value值,确实都是`David`,数据结构如下图所示:

16774429acf448f4b3794e99ee36db93.png

 

最后,定位到了原因:浏览器在渲染页面展示数据时,根据用户输入值肯定匹配到两个value值,不知道哪一个要渲染出来,所以导致用户在搜索David该值时,不知道该匹配id为5的value值还是匹配id为6的value值,就出现了搜索下拉框页面卡死问题。

(3)解决问题:

首先,既然定位到数据出了问题,不是前端导致的问题,那肯定要找上级领导反馈问题,让数据处理这个问题,一个value不能有重复出现的情况。

其次,与产品协商后,数据不能保证完全没问题,所以前端要能保证用户输入value值时,无论选项是否有重复,都得将所有匹配到的选项筛选出来,不能出现用户选不了和页面卡死的问题,效果如下图所示:

a693b37548cc47f48ab53022869483dd.png

 

第二层面:分析代码:

(4)实现思路:

当用户输入值时,只要与options中匹配到的value值都要显示出来。

(5)代码实现(实现过程):

264e69cc16f6480abc1fdc2b994e0893.png

80350d186bc54c4cafb4d7c05292c3b2.png 

2d815d9eaee14b92bddfa6da7cd28b9d.png 

54a88970251745898a0b5d389f590bdb.png 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/686045.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RocketMQ教程(五):RocketMQ的工作原理2

工作原理 RocketMQ 是一个高性能、高吞吐量的分布式消息和流计算平台,它基于发布-订阅模式工作。其核心设计理念是确保消息传递的高效性、稳定性和可扩展性。RocketMQ 的工作原理主要可以分为以下几个部分: 1. 消息流程 消息发布: Producer 首先向 NameServer 查询目标 Top…

二重,三重积分和曲面,曲线积分的关系和区别

这是我在学习完曲面曲线积分概念后容易和二重三重积分混淆而大概总结和区分了一下,如果有错误请大佬指出,多谢!!!

shell(一)

shell 既是脚本语言又是应用程序 查看自己linux系统的默认解析:echo $SHELL 创建第一个shell 文件 touch 01.sh编辑 vi 01.sh01.sh 文件内容 #!/bin/bash echo felicia保存 按Esc 然后输入:wq 定义以开头:#!/bin/bash #!用来声明脚本由什么shell解释…

无线麦克风什么牌子的音质效果好?一文揭秘领夹麦克风哪个品牌好

​近年来,无线领夹麦克风在各个领域都大放异彩,无论是直播、采访还是上课,都能看到它的身影。这款小小的无线麦克风,蕴含着巨大的能量,为媒体人的创作提供了强大的支持。对于想要更新设备的媒体人来说,现在…

打造国产软硬件一体化解决方案 YashanDB与宏杉科技完成多项兼容互认证

近日,深圳计算科学研究院崖山数据库系统YashanDB与宏杉科技系列存储、系列服务器与数据库一体机等多款产品顺利完成兼容性互认证。经严格测试,双方产品完全兼容,稳定运行,共同提供高效、稳定、安全的国产软硬件一体化解决方案&…

tmux工具使用鼠标滚动窗口及分屏命令

tmux工具使用鼠标滚动窗口及分屏命令 1. tmux source配置文件 长期生效2. 临时生效3. 实现分屏 1. tmux source配置文件 长期生效 vim ~/.tmux.conf echo "set -g mouse on" > ~/.tmux.conf tmux source-file ~/.tmux.conf2. 临时生效 1. 进入到tmux命令窗口 2.…

流水线建构apk、abb实战(一)

在构建机上需要下载的工具 流水线中的构建机无法使用Android Studio中自带的sdk工具下载,所以得下载commandlinetools命令行工具,下载后使用随附的 sdkmanager 下载其他 SDK 软件,解压后按照/cmdline-tools/latest/bin/sdkmanager目录结构整…

【Java毕业设计】基于Java的教师考勤管理系统的设计与实现

文章目录 摘 要ABSTRACT目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 vue技术1.4.2 B/S结构1.4.3 Spring Boot框架1.4.4 MySQL数据库1.4.5 MVC模式 2 系统需求分析2.1 可行性分析2.2 功能需求分析 3 系统设计3.1 功能结构设计3.2 系统…

红酒保存中的软木塞与瓶身保护

云仓酒庄雷盛红酒,以其卓着的品质和精美的包装赢得了众多消费者的喜爱。在红酒的保存过程中,软木塞与瓶身保护是至关重要的环节。本文将深入探讨这两方面的问题,以帮助消费者更好地理解和欣赏云仓酒庄雷盛红酒。 首先,我们来谈谈软…

神经网络 torch.nn---损失函数与反向传播

torch.nn - PyTorch中文文档 (pytorch-cn.readthedocs.io) torch.nn — PyTorch 2.3 documentation Loss Function的作用 每次训练神经网络的时候都会有一个目标,也会有一个输出。目标和输出之间的误差,就是用Loss Function来衡量的。所以,…

美国签证办理需要带哪些材料?

在申请美国签证时,准备充分的材料至关重要。以下知识人网整理的关于您可能需要携带的一些常见材料: 1.护照:您的护照必须是有效的,并且在签证申请过程中至少有六个月的有效期。 2.签证申请表:您需要填写并提交签证申请…

29 - 买下所有产品的客户(高频 SQL 50 题基础版)

29 - 买下所有产品的客户 selectc.customer_id fromCustomer c group byc.customer_id havingcount(c.product_key)(select count(distinct product_key) from Product);

Windows下安装和配置Redis

目录 1、下载redis压缩包 2、解压redis文件 3、启动redis临时服务 4、打开Redis客户端进行连接 5、使用一些基础操作来测试 5.1、输入ping命令来检测redis服务器与redis客户端的连通性 5.2、使用set和get命令测试redis数据库进行数据存储和获取 5.3、在命令中通过shut…

Easy 同学:AI 时代将加速计算机专业和程序员职业的分化

一、原贴 2024 年 6 月 5 日 拥有 60多万粉丝的方糖气球(ftqq.com)博主 、独立开发者:Easy 发表了一篇 AI 对计算机专业和程序员行业影响的新浪博客,看后很有启发,故而将原文摘录于此: 单独开个贴说一下吧…

项目实战系列——WebSocket——websock简介

最近项目中需要用到mes和本地客户端进行实时通讯,本来想用webapi进行交互的,但是考虑到高效和实时性,就采用这一项技术。 以往采用的方式——长轮询 客户端主动向服务器发送一个请求,如果服务器没有更新的数据,客户端…

我的python管理

目前环境 Anaconda:python3.9 python2.7 IDA:python3.8 pycharm:?? 以后应该会补吧… 因为某些文件似乎用的python2决定整个python2 安装python2.7 打开anaconda命令行输入 conda create --name python27 python2…

六、Docker Swarm、Docker Stack和Portainer的使用

六、Docker swarm和Docker stack的使用 系列文章目录1.Docker swarm1.简介2.docker swarm常用命令3.docker node常用命令4.docker service常用命令5.实战案例6.参考文章 2.Docker stack1.简介3.Docker stack常用命令4.实战案例5.常见问题及调错方式1.查看报错信息并尝试解决&am…

【简报】VITA 74 (VNX)总结

参考源 VITA 74 (VNX)A VITA 74 (VNX)B VITA 74 (VNX)C VITA 74 (VNX)D VNX,也称为 VITA 74,在 VITA 标准组织管理的规范中定义。VNX目前已进入“试用”状…

1104 天长地久(测试点1,2,3)

solution 测试点3超时:直接暴力搜超时。m和m1的最大公约数一定是1,则A的个位一定是9才有可能gcd(m, m1)大于1,步长变为10。测试点1,3:m和n的最大公约数是大于2的素数测试点2:按照n从小到大排序&#xff0c…

生死战的主场,国足与泰国队1比1战平,遗憾失去了出线主动权

6月6日晚,于中国足球曾经的福地沈阳,中国男子国家足球队迎来了一场至关重要的对决,与泰国队展开了一场生死较量。在此前,中国队只需取胜即可提前一轮晋级,然而遗憾的是,国足未能把握住机会,再次…