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

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

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

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

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 

 

 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JSONPath使用指南(掌握JSON数据提取)

大家好,在处理 JSON(JavaScript Object Notation)数据时,有时需要从复杂的结构中提取特定部分。JSONPath 就是一个非常有用的工具,它提供了一种简洁而强大的方式来定位和提取 JSON 数据中的元素。无论是在 Web 开发中处…

Linux-桌面操作系统在服务器上未关闭休眠机制,使其开机半小时左右死机无法远程ssh连接

故障表述 操作系统:ubuntu desktop 18.04 异常描述:开机半小时左右死机 1、登录iBMC查看硬件无异常 2、登录ubuntu desktop 18.04操作系统,导出日志文件syslog、dmesg、lastlog(路径:/var/log),操作系统在11月8号~11月9号之间出现异常 经分析操作系统日志文件,操作系…

【设计模式】策略模式(行为型)⭐⭐

文章目录 1.概念1.1 什么是策略模式1.2 优点与缺点 2.实现方式3. Java 哪些地方用到了策略模式4. Spring 哪些地方用到了策略模式 1.概念 1.1 什么是策略模式 它允许用户在不修改现有对象的代码的情况下向对象添加新的功能;这种模式是通过创建一个包含该对象的包装…

OpenStack云平台管理

OpenStack云平台管理 文章目录 OpenStack云平台管理资源列表基础环境一、部署Openstack二、创建网络和路由2.1、删除默认的网络2.2、创建网络和路由2.2.1、创建外部网络2.2.2、创建内部网络 2.3、创建路由 三、创建实例3.1、配置实例3.2、配置NAT转换 四、绑定浮动IP地址五、添…

【TB作品】MSP430F149 单片机 音乐喷泉

功能 声音越大,亮的灯越多。 oled显示出当前的声音大小。 硬件接线 //OLED----MSP430 //VCC-----3.3V //GND-----GND //D0------P3.2 //D1------P3.0 //RES-----P2.0 //DC------P2.2 //CS------P8.1 led P4八个引脚 adc P6.0 部分代码 _EINT();while (1){adok…

函数柯里化:Python中的高级编程技巧

函数柯里化:Python中的高级编程技巧 在Python编程中,柯里化(Currying)是一种将一个多参数的函数转换成多个单参数函数的技术。这种技术起源于数学逻辑学,由数学家Haskell Curry提出,因此得名。在函数式编程…

ES6+-函数的双重用途,语法层面上判断函数的调用方式

函数可以被当作普通函数使用,也可以当作构造函数使用new关键字调用,有时候我们编写一个函数明确就是用来当做构造函数的,可无法限制其他人对此函数的调用方式。如下: function Person (name, age) {this.name namethis.age age…

上位机图像处理和嵌入式模块部署(f407 mcu中的项目开发特点)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 和soc相比较,mcu的项目规模一般不算大。因为,soc项目中,从规划、硬件开发、驱动、应用端、服务器端到测试&…

举个栗子!Quick BI 技巧(8):柱形图的制作及应用

众所周知,在数据分析中,柱形图是利用率非常高的一种图,主要是用于比较各组数据之间的差别,并且可以显示一段时间内的数据变化情况。那么在 Quick BI 中要如何来制作柱形图呢? 今天的栗子,我们就来分享如何…

RocketMq生产常见问题及解决方案(三) 顺序消息和消息堆积的解决法方式

1.rocketmq中的顺序消息 1.1 rocketmq顺序消息的使用场景 顺序消息分为全局顺序消息和局部顺序消息,在增量同步日志的时候,需要保证消息全局有序,这个时候,我们需要全局顺序消息。而在订单业务常见的一个场景是,每个…

【Redis】Redis事务详解

Redis的事务(transaction)允许在一个单独的操作序列中执行多个命令,并保证这些命令在其他客户端无法中断的情况下执行。Redis通过MULTI、EXEC、DISCARD和WATCH命令来实现事务管理。 Redis事务的基本命令 MULTI:开启一个事务块。…

【Android面试八股文】String s= new string(“xxx“); 创建了几个String对象?

String s= new string(“xxx”);创建了几个String对象? 这道题想考察什么 ? 这个问题旨在考察对于 Java 中字符串 String 的理解。 考察的知识点 Java基础,JM常量池与对象内存分配 考生应该如何回答 首先让我们来分析代码 String s = new String("xxx")。 …

DP:子序列模型

子数组vs子数列 1、子数组(n^2) 子序列(2^n) 2、子数组是子序列的一个子集 3、子数组必须连续,子序列可以不连续 一、最长递增子序列 . - 力扣(LeetCode) 算法原理: 1、状态表示&#xff…

数据管理积重难返?这有一个新药方丨直播预告

大数据产业创新服务媒体 ——聚焦数据 改变商业 在数智化转型的浪潮中,数据管理领域正面临着前所未有的挑战和机遇。企业在数据管理过程中,普遍遭遇数据孤岛、数据质量不佳、存储和处理成本高昂、数据安全与隐私保护压力以及多源异构数据整合困难等诸多…

【MMU】——MMU 页命中/缺页

文章目录 MMU 页命中/缺页MMU 命中MMU 缺页 MMU 页命中/缺页 MMU 命中 处理器产生一个虚拟地址。MMU生成 PTE 地址,并从高速缓存/主存请求得到它。高速缓存/主存向 MMU 返回 PTE。MMU 构造物理地址,并把它传送给高速缓存/主存。高速缓存/主存返回所请求…

GIT仓库发布提交

git config --global user.name "test" git config --global user.email "testqq.com" 创建 git 仓库:mkdir php_tuisong cd php_tuisong git init touch README.md git add README.md git commit -m "first commit" git remote add origin htt…

SpringBoot引入WebSocket依赖报ServerContainer no avaliable

1、WebSocketConfig 文件报错 Configuration EnableWebSocket public class WebSocketConfig {Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}2、报错内容 Exception encountered during context initialization - canc…

SpringBoot+Vue校园管理系统(前后端分离)

技术栈 JavaSpringBootMavenMyBatisMySQLVueElement-UIShiro 系统角色 管理员用户院系管理员 系统功能截图

如何编辑 sudoers 文件

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 简介 特权分离是 Linux 和类 Unix 操作系统中实施的基本安全范例之一。普通用户以有限权限操作,以减少其影响范围仅限于其自身环境,而不是更广泛的操作系统。 一个名…

《互联网政务应用安全管理规定》电子邮件安全如何整改?

继上篇文章(解读《互联网政务应用安全管理规定》网络和数据安全中的身份认证和审计合规)之后,本篇文章继续解读第五章“电子邮件安全”,为党政机关事业单位提供电子邮件系统整改思路。 “电子邮件安全”内容从第三十一条到第三十…