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

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

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

(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

 

 

 

 

 

 

 

 

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

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

相关文章

禁用PS/Photoshop等一系列Adobe旗下软件联网外传用户数据操作

方案一: 下载火绒杀毒,在联网请求上禁用Adobe软件的联网请求,甚至还可以额外发现哪些是它要想要偷偷摸摸干的。 方案二: 最后注意: 用盗版软件只是获得了使用权!

React state(及组件) 的保留与重置

当在树中相同的位置渲染相同的组件时&#xff0c;React 会一直保留着组件的 state return (<div><Counter />{showB && <Counter />} </div> ) // 当 showB 为 false, 第二个计数器停止渲染&#xff0c;它的 state 完全消失了。这是因为 React…

缩窄route范围来提速本地打包的尝试

目录 为什么要缩窄route范围缩窄route的方式意外触发的重复构建重复构建的原因解决方案 为什么要缩窄route范围 对于一些大单页&#xff0c;单个router-view中可能包含上百个页面。但是开发的时候其实并不需要那么多调试那么多页面。 因此&#xff0c;为了节省不必要的打包和热…

Java内存模型,堆、栈和方法区的区别

Java内存管理是Java虚拟机&#xff08;JVM&#xff09;技术的核心之一。了解Java内存管理对于提高程序性能、解决内存泄漏和优化资源利用至关重要。 一、Java内存模型&#xff08;Java Memory Model, JMM&#xff09; Java内存模型描述了Java程序中变量&#xff08;包括实例字…

ChatGPT等大模型可以代替搜索引擎吗?

在知乎看到一个问题&#xff0c;回答了一下&#xff0c;分享到这里。 把ChatGPT当作搜索引擎可靠性差点&#xff0c;但是可行。 代替搜索引擎 1、写代码 我们可以让GPT写一段算法代码或者使用某个语言API的示例&#xff0c;然后只需要把这段代码粘贴到IDE中&#xff0c;简单…

Qt创建静态库及静态库使用

Qt创建静态库及静态库使用 1. 创建一个库文件 选择静态库 将需要打包的.h 和.cpp文件添加到程序中&#xff0c; 在编译器版本下的debug和release模式下分别编译&#xff08;右键项目&#xff0c;点击“qmake”,再点击“构建”&#xff09;后&#xff0c;在对应的的build目录下…

Golang | Leetcode Golang题解之第151题反转字符串中的单词

题目&#xff1a; 题解&#xff1a; import ("fmt" )func reverseWords(s string) string {//1.使用双指针删除冗余的空格slowIndex, fastIndex : 0, 0b : []byte(s)//删除头部冗余空格for len(b) > 0 && fastIndex < len(b) && b[fastIndex]…

java反序列化---cc6链

目录 Transformer[]数组分析 链条代码跟进 ChainedTransformer.transform() LazyMap.get() TiedMapEntry.getValue() TiedMapEntry.hashCode() HashMap.hash() HashMap.put()的意外触发 LazyMap.get()中key的包含问题 cc6的payload如下 import org.apache.commons.co…

html中a标签的多用性

在HTML中&#xff0c;<a> 标签&#xff08;通常称为锚标签或链接标签&#xff09;具有多种用途和强大的功能。以下是<a>标签的一些主要多用性&#xff1a; 网页间的导航&#xff1a; 这是<a>标签最常见的用途。通过href属性&#xff0c;可以指定一个URL&am…

基于springboot的城市垃圾分类管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于springboot的城市垃圾分类管理系统,…

Linux编辑器 vim使用 (解决普通用户无法进行sudo提权问题)

文章目录 一.vim是什么命令模式底行模式 二.关于vim暂停问题三.注释批量化注释批量化去注释 四.解决普通用户无法进行sudo提权问题五.vim的配置 一.vim是什么 用过VS的都知道&#xff0c;拥有着编辑器编译器调试.编写C&#xff0c;C&#xff0c;python等的功能。就是集成 Linu…

零基础开始学习鸿蒙开发-@State的使用以及定义

1.State组件介绍 首先定义 State为鸿蒙开发的一个状态组件&#xff0c;当它修饰的组件发生改变时&#xff0c;UI也会相应的刷新&#xff0c;简单介绍就是这样&#xff0c;下面我们用代码去体会一下。 2.定义DeliverParam类 首先定义一个模型类&#xff0c;类里面定义一个构造…

【C++ | const成员】一文了解类的 const数据成员、const成员函数、const对象、mutable 数据成员

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-06-14 2…

Linux ls-al命令实现,tree命令实现,不带缓存的文件IO

shell命令 ls -al 实现 stat配合目录流&#xff08;目录流链表加指针链表结点目录项dirent&#xff09; opendir&#xff0c;closedir&#xff0c;readdir。 const char *restrict pathname:路径&#xff08;文件名和路径不完全对等&#xff0c;&#xff08;文件名在当前目录…

关于反弹shell的学习

今天学习反弹shell&#xff0c;在最近做的ctf题里面越来越多的反弹shell的操作&#xff0c;所以觉得要好好研究一下&#xff0c;毕竟是一种比较常用的操作 什么是反弹shell以及原理 反弹Shell&#xff08;也称为反向Shell&#xff09;是一种技术&#xff0c;通常用于远程访问和…

【C语言习题】30.使用指针打印数组内容

文章目录 作业标题作业内容2.解题思路3.具体代码 作业标题 使用指针打印数组内容 作业内容 写一个函数打印arr数组的内容&#xff0c;不使用数组下标&#xff0c;使用指针。 arr是一个整形一维数组。 2.解题思路 先定义一个数组&#xff0c;使用指针打印数组内容那就是说我们…

通过语言大模型来学习tensorflow框架训练模型(三)

一、模型训练5步骤走 1.数据获取&#xff0c;2&#xff0c;数据处理&#xff0c;3.模型创建与训练&#xff0c;4 模型测试与评估&#xff0c;5.模型预测 二、tensorflow数据获取 在TensorFlow中&#xff0c;数据获取和预处理是构建深度学习模型的重要步骤。TensorFlow提供了多…

Python 植物大战僵尸游戏【含Python源码 MX_012期】

简介&#xff1a; "植物大战僵尸"&#xff08;Plants vs. Zombies&#xff09;是一款由PopCap Games开发的流行塔防游戏&#xff0c;最初于2009年发布。游戏的概念是在僵尸入侵的情境下&#xff0c;玩家通过种植不同种类的植物来保护他们的房屋免受僵尸的侵袭。在游…

流体性能测试实验室建设需求参考

在第一次提需求的时候&#xff0c;很多人感到很迷茫&#xff0c;这里以某流体实验室建设为例&#xff0c;进行说明&#xff0c;希望抛砖引玉&#xff0c;能起到一点参考作用。 一、项目概述 学校拟建一座流体性能测试实验室&#xff0c;旨在兼顾教学和企业科研能力。实验室需…

reGeorg隐秘隧道搭建

reGeorg隐秘隧道搭建 【实验目的】 通过学习reGeorg与Proxifier工具使用&#xff0c;实现外网攻击端连接内网主机远程桌面。 【知识点】 python、reGeorg、proxifier。 【实验原理】 在内网渗透中&#xff0c;由于防火墙的存在&#xff0c;导致无法对内网直接发起连接&#xff…