当前位置: 首页 > news >正文

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

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

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

(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

 

 

 

 

 

 

 

 

相关文章:

  • Eureka到Nacos迁移实战:解决配置冲突与启动异常
  • Superset二次开发之查询GitHub不同版本修改的文件列表 (Python 方案)
  • srchref,fetchajax,cookiesession
  • 机器学习之数学基础 时间复杂度和空间复杂度
  • [论文笔记]Query Rewriting for Retrieval-Augmented Large Language Models
  • hadoop和hbase对应版本关系
  • SpringBoot之请求映射原理
  • GIS之arcgis系列09:arcpy实现克里金差值
  • 【计算机毕业设计】258基于微信小程序的课堂点名系统
  • 开源项目-Docker部署学之思管理系统
  • [Android] Binder 里的 Service 和 Interface 分别是什么
  • 二维码扫描,没有生成,生成比较复杂
  • Web前端图形显示:深入探索与实用指南
  • 深入探索MySQL:性能调优与架构设计
  • Python数据分析与机器学习在医疗诊断中的应用
  • JavaScript 如何正确处理 Unicode 编码问题!
  • 【附node操作实例】redis简明入门系列—字符串类型
  • Akka系列(七):Actor持久化之Akka persistence
  • Angular 4.x 动态创建组件
  • Apache的基本使用
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • Java 23种设计模式 之单例模式 7种实现方式
  • Java IO学习笔记一
  • JS题目及答案整理
  • Python3爬取英雄联盟英雄皮肤大图
  • Python打包系统简单入门
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • 巧用 TypeScript (一)
  • 树莓派 - 使用须知
  • 异步
  • 责任链模式的两种实现
  • 大数据全解:定义、价值及挑战
  • ​520就是要宠粉,你的心头书我买单
  • ​十个常见的 Python 脚本 (详细介绍 + 代码举例)
  • # .NET Framework中使用命名管道进行进程间通信
  • #!/usr/bin/python与#!/usr/bin/env python的区别
  • $(function(){})与(function($){....})(jQuery)的区别
  • (33)STM32——485实验笔记
  • (补)B+树一些思想
  • (二)hibernate配置管理
  • (四)模仿学习-完成后台管理页面查询
  • (转)mysql使用Navicat 导出和导入数据库
  • .Net 6.0 Windows平台如何判断当前电脑是否联网
  • .Net 6.0 监听Windows网络状态切换
  • .NET Core WebAPI中使用swagger版本控制,添加注释
  • .net dataexcel winform控件 更新 日志
  • .NET Standard、.NET Framework 、.NET Core三者的关系与区别?
  • .NET 实现 NTFS 文件系统的硬链接 mklink /J(Junction)
  • .Net下的签名与混淆
  • .NET学习教程二——.net基础定义+VS常用设置
  • .vimrc 配置项
  • @Value获取值和@ConfigurationProperties获取值用法及比较(springboot)
  • [AutoSAR 存储] 汽车智能座舱的存储需求
  • [C/C++入门][ifelse]20、闰年判断