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

news2025/2/24 7:09:56

面试官:请你讲讲你在工作中如何开发一个新需求,你的整个开发过程是什么样的?

答:仔细想想,我开发新需求的过程如下:

(1)第一步:理解需求文档:

首先,我会整体阅读一遍需求文档,把自己不理解的地方使用绿的颜色做好标记并打上一个?作为标记,看完后,我会把不理解的地方直接截图给产品,然后主动与她交流理解需求,也就是要我前端开发做什么。

Eg:提供排序功能,按照截止日期、优先级等条件对待办事项进行排序?(我不理解排序条件的优先级是什么)

(2)第二步:理清代码逻辑:

然后,由于我们做的是二次迭代开发,所以必须得先理清与该需求相关得代码,梳理并确定需要的主要功能模块组件之间的交互关系,对于一些比较复杂的功能,可以使用流程图方式(或文字方式)记录整个动态交互逻辑,便于我们进行下一步的代码开发。

Eg:文字形式的流程图:定义 Todo 组件,表示单个待办事项->开发 TodoList 组件,管理待办事项列表,提供增删改查的功能->在 App 组件中组合使用 TodoList 组件,形成完整的应用

(3)第三步:开始编写代码:

最后一步,才是动手写代码。

(4)举个实例:假设有一个新需求,需要开发一个待办事项列表的功能

- 1)第一步:理解需求文档:

需求文档中说明:用户可以添加、编辑、删除待办事项,并标记事项的完成状态。

待办事项列表支持按照完成状态进行筛选和排序。

用户还可以设置事项的优先级,以及设置提醒时间。

- 2)第二步:理清代码逻辑:

确定需要有 Todo 组件表示单个待办事项,包含标题、描述、完成状态、优先级、提醒时间等属性。

需要有 TodoList 组件管理待办事项列表,提供增删改查的功能。

TodoList 组件需要有筛选和排序的功能,根据完成状态和优先级进行展示。

还需要有一个 TodoForm 组件,用于添加和编辑待办事项。

- 3)第三步:开始写代码:

首先定义 Todo 组件,包含所需的属性和方法。

实现 TodoList 组件,提供增删改查的操作,并添加筛选和排序功能。

开发 TodoForm 组件,实现添加和编辑待办事项的表单。

将这三个组件组合使用,形成完整的待办事项列表功能。

编写相应的单元测试,确保功能正常。

持续优化代码结构和性能,提升用户体验。

定义 Todo 组件,表示单个待办事项。

f6a4526407eb4008b68ca3471254cb7f.png

 

开发 TodoList 组件,管理待办事项列表,提供增删改查的功能。

5f276b96204248f493ad5a99b0bd2d8a.png

13175fef892242319640a569d49921cf.png 

 

在 App 组件中组合使用 TodoList 组件,形成完整的应用。

e55c7d2c78d74b7ab86ac4dcb6dd2186.png

 

 

 

 

 

 

 

 

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

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

相关文章

Java核心(四)反射

这篇内容叫反射也不够准确,其实它更像是java类加载的一个延申。 Java类加载过程 之前解释过一个Java的类的加载过程,现在回顾一下类的加载: 类的加载指的是将类的字节码文件(.class文件)中数据读入到内存中&#xff…

AI办公自动化:kimi批量搜索提取PDF文档中特定文本内容

工作任务:PDF文档中有资料来源这一行,比如: 资料来源:moomoo tech、The Information、Bloomberg、Reuters,浙商证券研究所 数据来源:CSDN、浙商证券研究所 数据来源:CSDN、arXiv、浙商证券研…

精品丨PowerBI迁移到SSAS

业务场景: 企业初期在进行 BI 可视化路线的时候,往往不会选择方案较为完整的SSAS,而是会选择轻量的 PowerBI 方案,究其根本还是软件成本的问题。 但是随着模型越来越臃肿,维护成本越来越高,有很多模型需要进…

VictoriaMetrics的高可用二进制方式部署

参考文章实现:Prometheus联邦集群VictoriaMetrics集群搭建部署 1.基本信息 涉及机器列表,机器均为本地虚拟机 192.168.56.108 192.168.56.109方案实现如下 涉及模块介绍 vmstorage: 数据存储节点,负责存储时序数据vmselect: 数据查询节点…

智慧公安指挥中心大数据信息化两中心两基地系统方案

1.1 系统建设目标 本系统是一个汇接全市的报警求助的大型通信指挥系统,技术难度较高、可靠性要求高,技术路线的选择至关重要。 在充分考虑XX市公安局的业务需要,利用现代通信及计算机网络技术的基础上,最大程度地实现资源整合、…

HO-VMD-TCN:西储大学轴承故障诊断全流程详解

声明:文章是从本人公众号中复制而来,因此,想最新最快了解各类智能优化算法及其改进的朋友,可关注我的公众号:强盛机器学习,不定期会有很多免费代码分享~ 目录 原理详解 1.数据预处理 2.特征提取 3.故障…

AI Agent学习系列:微信搭配Agent,让微信秒变特工

在之前的文章里介绍了如何把微信变成高考志愿填报小助手,我已经把这个bot发布到了公众号,大家可以直接在公众号消息输入框里提问即可直接使用,如图: 上面说的bot就是智能体,也叫Agent,和英文里特工是一个单…

AMSR-MODIS 边界层水汽 L3 每日 1 度 x 1 度 V1、V2 版本数据集

AMSR-MODIS Boundary Layer Water Vapor L3 Daily 1 degree x 1 degree V1 (AMDBLWV) at GES DISC AMSR-MODIS Boundary Layer Water Vapor L3 Daily 1 degree x 1 degree V2 (AMDBLWV) at GES DISC 简介 该数据集可估算均匀云层下的海洋边界层水汽。AMSR-E 和 AMSR-2 的微波…

2024 年最新基于 LLOneBot NT 框架搭建 QQ 机器人详细教程(更新中)

LLOneBot 概述 llonebot(LLOneBot)是一个与OneBot(也称为CQHTTP)协议兼容的机器人框架,它允许开发者使用不同的编程语言(如Python、Go、JavaScript等)编写机器人应用,并与各种支持 …

观察 jvm 运行时数据区内存大小(native memory tracking)

jvm 运行时数据区 jvm 运行时数据区包括且不限于以下几个部分: 堆(heap): 用于存储对象实例和数组。堆内存的分配和释放由垃圾回收器进行管理。方法区(method area): 用于存储类的信息、静态变量、常量等。jdk 8 后方法区位于 metaspace。虚拟机栈(vm stack): 用于存储方法的…

Mysql之不使用部署在k8s集群的Mysql而是选择单独部署的Mysql的原因

测试准备: 线程组:并发数100,持续时间2min 两个请求:使用k8s集群中的mysql的wordpress对应端口30011 使用单独部署的mysql的wordpress的对应端口为30022 访问同一个博客 测试结果: 汇总报告: 响应时间图&…

16.番外_模拟c语言文件流

16.番外:模拟c语言文件流 一,前言 先来看一下Struct _IO_FILE的定义。 grep -rnw /usr/include/ -e struct _IO_FILE今天我们要做的就是模拟实现FILE及C语言文件操作相关函数 二,开始!做吧!我们! 1.FILE的缓冲区及…

「小爱同学」接入豆包大模型;华为鸿蒙 OS 成为中国第二大操作系统丨 RTE 开发者日报 Vol.224

开发者朋友们大家好: 这里是 「RTE 开发者日报」 ,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE(Real-Time Engagement) 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

【Android面试八股文】你知道如何实现非阻塞式生产者消费者模式吗?

文章目录 这道题想考察什么 ?考察的知识点日常生活中的生产者消费者模式生产者消费者模式简介为什么需要缓冲区?阻塞与非堵塞非阻塞式生产者消费者模式的实现非阻塞式生产者消费者模式的实现阻塞式生产者消费者模式实现特点这道题想考察什么 ? 是否了解非阻塞式生产者消费者…

R可视化:ggpubr包学习

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者 Xiao hong书:生信学习者 知hu:生信学习者 CDSN:生信学习者2 介绍 ggpubr是我经常会用到的R包,它傻瓜式的画图方式对很多初次接触R绘图的人来…

GO RACE 测试在低版本GCC上报错误 exit status 0xc0000139

windows机器环境,go程序使用race定位时一运行就报错,写了个example如: 能看到加了race之后就不行了, 搜了一下,git上有个issue: runtime: Race detector causes exit status 0xc0000139 on Windows 11 wi…

高考志愿填报选专业,兴趣爱好和就业前景哪个优先?

每个人都有自己的兴趣与爱好,而高考志愿填报是在为自己选择职业方向。最理想的状态就是把自己的兴趣和爱好与自己的职业统一起来,让兴趣和爱好促进职业的发展,为职业增添动力。但现实生活中,这种理想的状态并不是每个人都能达到的…

Java多线程面试重点-2

16.Synchronized关键字加在静态方法和实例方法的区别? 修饰静态方法,是对类进行加锁(Class对象),如果该类中有methodA和methodB都是被Synch修饰的静态方法,此时有两个线程T1、T2分别调用methodA()和methodB()&#x…

http穿透怎么做?

众所周知http协议的默认端口是80,由于国家工信部要求,域名必须备案才给开放80端口,而备案需要固定公网IP,这就使得开放http80端口的费用成本和时间成本变的很高。那么能不能利用内网穿透技术做http穿透呢?下面我就给大…

Stability AI最新的SD3模型存在严重问题 为规避裸体结果导致躯体部分错乱

人工智能 Stability AI 最新的 SD3 Medium 模型存在严重问题,只要生成人物就会出现躯体错乱,这似乎是该公司刻意规避生成裸体图片的结果。目前猜测他们可能在训练过程中就剔除了 NSFW 内容,同时在训练时规避裸体内容进而导致模型也会刻意将人…