前端面试项目细节重难点(已工作|做分享)(九)
面试官:请你讲讲你在工作中如何开发一个新需求,你的整个开发过程是什么样的?
答:仔细想想,我开发新需求的过程如下:
(1)第一步:理解需求文档:
首先,我会整体阅读一遍需求文档,把自己不理解的地方使用绿的颜色做好标记并打上一个?作为标记,看完后,我会把不理解的地方直接截图给产品,然后主动与她交流理解需求,也就是要我前端开发做什么。
Eg:提供排序功能,按照截止日期、优先级等条件对待办事项进行排序?(我不理解排序条件的优先级是什么)
(2)第二步:理清代码逻辑:
然后,由于我们做的是二次迭代开发,所以必须得先理清与该需求相关得代码,梳理并确定需要的主要功能模块组件之间的交互关系,对于一些比较复杂的功能,可以使用流程图方式(或文字方式)记录整个动态交互逻辑,便于我们进行下一步的代码开发。
Eg:文字形式的流程图:定义 Todo 组件,表示单个待办事项->开发 TodoList 组件,管理待办事项列表,提供增删改查的功能->在 App 组件中组合使用 TodoList 组件,形成完整的应用
(3)第三步:开始编写代码:
最后一步,才是动手写代码。
(4)举个实例:假设有一个新需求,需要开发一个待办事项列表的功能
- 1)第一步:理解需求文档:
需求文档中说明:用户可以添加、编辑、删除待办事项,并标记事项的完成状态。
待办事项列表支持按照完成状态进行筛选和排序。
用户还可以设置事项的优先级,以及设置提醒时间。
- 2)第二步:理清代码逻辑:
确定需要有 Todo 组件表示单个待办事项,包含标题、描述、完成状态、优先级、提醒时间等属性。
需要有 TodoList 组件管理待办事项列表,提供增删改查的功能。
TodoList 组件需要有筛选和排序的功能,根据完成状态和优先级进行展示。
还需要有一个 TodoForm 组件,用于添加和编辑待办事项。
- 3)第三步:开始写代码:
首先定义 Todo 组件,包含所需的属性和方法。
实现 TodoList 组件,提供增删改查的操作,并添加筛选和排序功能。
开发 TodoForm 组件,实现添加和编辑待办事项的表单。
将这三个组件组合使用,形成完整的待办事项列表功能。
编写相应的单元测试,确保功能正常。
持续优化代码结构和性能,提升用户体验。
定义 Todo 组件,表示单个待办事项。

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

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

相关文章:
前端面试项目细节重难点(已工作|做分享)(九)
面试官:请你讲讲你在工作中如何开发一个新需求,你的整个开发过程是什么样的? 答:仔细想想,我开发新需求的过程如下: (1)第一步:理解需求文档: 首先&#x…...
区间预测 | Matlab实现BP-ABKDE的BP神经网络自适应带宽核密度估计多变量回归区间预测
区间预测 | Matlab实现BP-ABKDE的BP神经网络自适应带宽核密度估计多变量回归区间预测 目录 区间预测 | Matlab实现BP-ABKDE的BP神经网络自适应带宽核密度估计多变量回归区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现BP-ABKDE的BP神经网络自适应带…...
抢占人工智能行业红利,前阿里巴巴产品专家带你15天入门AI产品经理
前言 当互联网行业巨头纷纷布局人工智能,国家将人工智能上升为国家战略,藤校核心课程涉足人工智能…人工智能领域蕴含着巨大潜力,早已成为业内共识。 面对极大的行业空缺,不少人都希望能抢占行业红利期,进入AI领域。…...
MEMS:Lecture 16 Gyros
陀螺仪原理 A classic spinning gyroscope measures the rotation rate by utilizing the conservation of angular momentum. 经典旋转陀螺仪通过利用角动量守恒来测量旋转速率。 Coriolis Effect and Coriolis Force 科里奥利效应是一种出现在旋转参考系中的现象。它描述了…...
Java中List流式转换为Map的终极指南
哈喽,大家好,我是木头左! 在Java编程中,经常需要将一个List对象转换为另一个Map对象。这可能是因为需要根据List中的元素的某些属性来创建一个新的键值对集合。在本文中,我将向您展示如何使用Java 中的流式API轻松地实…...
【秋招突围】2024届秋招笔试-小红书笔试题-第一套-三语言题解(Java/Cpp/Python)
🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系计划跟新各公司春秋招的笔试题 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📧 清隆这边…...
HAL库开发--STM32的HAL环境搭建
知不足而奋进 望远山而前行 目录 文章目录 前言 下载 安装 解压 安装 添加开发包 修改仓库路径 下载软件开发包(慢,不推荐) 解压已有软件开发包(快,推荐) 总结 前言 在嵌入式系统开发中&#x…...
【DPDK学习路径】七、创建RX/TX队列
上一节我们讲述了如何申请内存池缓冲区以便接下来创建 RX 队列,这一节我们将给出具体如何创建 RX/TX 队列。 在 DPDK 中提供了 rte_eth_rx_queue_setup 及 rte_eth_tx_queue_setup 这两个接口用于接收/发送队列的创建。 下面给出一个为各个网卡创建RX/TX 队列的实例…...
【ArcGISProSDK】OpenItemDialog打开文件对话框
打开单个文件 效果 代码 public async void OpenFunction() {// 获取默认数据库var gdbPath Project.Current.DefaultGeodatabasePath;OpenItemDialog openItemDialog new OpenItemDialog() { Title "打开要素文件",InitialLocation gdbPath,Filter ItemFilte…...
TensorFlow2.x基础与mnist手写数字识别示例
文章目录 Github官网文档Playground安装声明张量常量变量 张量计算张量数据类型转换张量数据维度转换ReLU 函数Softmax 函数卷积神经网络训练模型测试模型数据集保存目录显示每层网络的结果 TensorFlow 是一个开源的深度学习框架,由 Google Brain 团队开发和维护。它…...
大数据开发语言Scala入门
Scala是一种多范式编程语言,它集成了面向对象编程和函数式编程的特性。Scala运行在Java虚拟机上,并且可以与Java代码无缝交互,这使得它成为大数据处理和分析领域中非常受欢迎的语言,尤其是在使用Apache Spark这样的框架时。 Scal…...
【CDN】逆天 CDN !BootCDN 向 JS 文件中植入恶意代码
今天在调试代码,突然控制台出现了非常多报错。 这非常可疑,报错指向的域名也证实了这一点。 因为我的 HTML 中只有一个外部开源库(qrcode.min.js),因此只有可能是它出现了问题。 我翻看了请求记录,发现这…...
摆脱Jenkins - 使用google cloudbuild 部署 java service 到 compute engine VM
在之前 介绍 cloud build 的文章中 初探 Google 云原生的CICD - CloudBuild 已经介绍过, 用cloud build 去部署1个 spring boot service 到 cloud run 是很简单的, 因为部署cloud run 无非就是用gcloud 去部署1个 GAR 上的docker image 到cloud run 容…...
【CS.PL】Lua 编程之道: 控制结构 - 进度24%
3 初级阶段 —— 控制结构 文章目录 3 初级阶段 —— 控制结构3.1 条件语句:if、else、elseif3.2 循环语句:for、while、repeat-until3.2.1 输出所有的命令行参数3.2.2 while.lua3.2.3 repeat.lua及其作用域 🔥3.2.4 for.lua (For Statement)…...
从“数据孤岛”、Data Fabric(数据编织)谈逻辑数据平台
提到逻辑数据平台,其核心在于“逻辑”,与之相对的便是“物理”。在过去,为了更好地利用和管理数据,我们通常会选择搭建数据仓库和数据湖,将所有数据物理集中起来。但随着数据量、用数需求和用数人员的持续激增…...
vuex4.x 升级pinia,router 中使用同步组件导致项目启动失败
背景描述 升级的项目本来是vue2的项目,先升级成vue3,这个过程相关的问题都被决绝,当时状态管理使用的还是vuex4.x版本。 后面发现变成复杂模块时,后续再对复杂模块的功能进行迭代时,由于js的弱类型,改动时…...
0. 云原生之基于乌班图远程开发
云原生专栏大纲 文章目录 安装乌班图配置静态IP重置root密码开启root远程登录开启远程SSH访问安装docker安装docker-compose安装Edge浏览器安装搜狗输入法安装TeamViewer安装虚拟显示器安装JDK安装maven安装vscodevscode插件安装VSCode配置maven、git、jdk、自动报错vscode快捷…...
C++ 字符串处理5-手机号邮箱如何脱敏处理
1. 关键词2. strutil.h3. strutil.cpp4. 测试代码5. 运行结果6. 源码地址 1. 关键词 关键词: C 字符串处理 分割字符串 连接字符串 跨平台 应用场景: 有些重要信息需要保密,比如手机号、邮箱等,如何在不影响用户阅读的情况下…...
【lesson8】云备份服务端完整版代码
文章目录 util.hppconfig.hpphot.hppdata.hppserver.hppserver.ccMakefilecloud.conf util.hpp #pragma once #include <iostream> #include <fstream> #include <string> #include <vector> #include <sys/stat.h> #include <unistd.h> …...
AI办公自动化:kimi批量搜索提取PDF文档中特定文本内容
工作任务:PDF文档中有资料来源这一行,比如: 资料来源:moomoo tech、The Information、Bloomberg、Reuters,浙商证券研究所 数据来源:CSDN、浙商证券研究所 数据来源:CSDN、arXiv、浙商证券研…...
效率直接起飞!盘点2026年全民喜爱的的AI论文写作工具
一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂的AI论文写作工具,实测提速效果惊人,覆盖选题、文献、写作、降重、排版全流程,让你高效搞定论文不再难。 一、全流程王者:一站式搞定论文全链路(一天定稿首选&…...
立知-lychee-rerank-mm效果展示:汽车配置单与实拍图一致性验证
立知-lychee-rerank-mm效果展示:汽车配置单与实拍图一致性验证 1. 引言:多模态重排序的实用价值 在日常工作和生活中,我们经常遇到这样的场景:看到一份产品配置单,但不确定实际产品是否真的符合描述;或者…...
带标注的交通工具分类数据集,17334张原始图片,识别率92.4%,可识别汽车,公共汽车,自行车,摩托车,支持yolo,coco json,pascal voc xml格式
带标注的交通工具分类数据集,17334张原始图片,识别率92.4%,可识别汽车,公共汽车,自行车,摩托车,支持yolo,coco json,pascal voc xml格式 模型训练指标参数: …...
三步打造沉浸式AI对话体验:SillyTavern终极指南
三步打造沉浸式AI对话体验:SillyTavern终极指南 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 你是否厌倦了单调的文字聊天?想让AI助手不仅能"说"&#…...
别再傻傻线性扫描了!用Python+Scikit-learn手把手实现IVFFlat图像相似度搜索
用PythonScikit-learn实现IVFFlat图像搜索引擎:从原理到实战 当你面对十万张未分类的图片库,如何快速找到与目标图片最相似的十张?传统线性扫描需要计算所有图片特征的距离,耗时呈线性增长。本文将手把手教你用IVFFlat算法构建高效…...
终极指南:如何用 YahooFinanceApi 快速获取免费金融数据
终极指南:如何用 YahooFinanceApi 快速获取免费金融数据 【免费下载链接】YahooFinanceApi A handy Yahoo! Finance api wrapper, based on .NET Standard 2.0 项目地址: https://gitcode.com/gh_mirrors/ya/YahooFinanceApi 你是否正在寻找一个简单、免费且…...
CAD工程师必看:如何用De Boor算法优化B样条曲线设计(附NURBS对比)
CAD工程师必看:如何用De Boor算法优化B样条曲线设计(附NURBS对比) 在工业设计领域,曲线建模的精度与效率直接决定了产品从概念到成品的转化质量。作为CAD工程师,我们常常需要在设计自由度和计算效率之间寻找平衡点——…...
别再纠结了!Android音视频开发选软解(FFmpeg)还是硬解(MediaCodec)?一个实战Demo帮你做决定
Android音视频开发实战:软解与硬解的性能对决 在移动端音视频开发领域,选择软解还是硬解一直是个令人头疼的问题。每次技术选型会议上,总能看到两派开发者争得面红耳赤——软解支持者强调其灵活性和兼容性,硬解拥趸则推崇其性能和…...
纯化水系统HMI与PLC协同控制:从界面设计到逻辑实现
1. 纯化水系统控制的核心技术组合 在制药行业的纯化水系统中,HMI(人机界面)与PLC(可编程逻辑控制器)的协同工作堪称自动化控制的黄金搭档。这套系统就像是一个精密的"大脑神经中枢"组合——PLC负责底层设备的…...
全球协作的终极指南:Open Library多语言团队开发与维护的最佳实践
全球协作的终极指南:Open Library多语言团队开发与维护的最佳实践 【免费下载链接】openlibrary One webpage for every book ever published! 项目地址: https://gitcode.com/gh_mirrors/op/openlibrary Open Library是一个致力于为每一本已出版书籍创建网页…...
