青训营X豆包MarsCode 技术训练营前端实践选题2 | 豆包MarsCode AI 刷题

32 阅读3分钟

《前端实践选题2》

TypeScript类、泛型的使用实践记录

在TypeScript中,泛型是极为强大的特性。其使用方法通常是在定义函数、类或者接口时,使用类型变量来代表不确定的类型,之后在使用时再指定具体类型。

比如定义一个函数 identity ,可以写成 function identity(arg: T): T { return arg; } ,这里的  就是泛型变量,调用时像 identity(5) 就能明确传入的是数字类型且返回值也是数字类型。

泛型的使用场景很广泛,常见于创建可复用的组件或者工具函数。例如编写一个处理数组的函数,不管是处理数字数组还是字符串数组,都能通过泛型让函数通用化。

而类型约束能进一步提升代码安全性与灵活性。通过 extends 关键字,比如定义 function loggingIdentity<T extends { length: number }>(arg: T): T { console.log(arg.length); return arg; } ,就限制了传入的类型必须包含 length 属性,既能确保代码按预期运行,又能应对多种符合约束的类型情况,使代码更具通用性。

HTTP的场景实践

以Chrome浏览器为例,其请求中的缓存策略很值得探究。Chrome主要有多种缓存机制,像强缓存,它依靠 Cache-Control 和 Expires 这两个响应头字段来控制。 Cache-Control 相对更常用且优先级高,比如设置 max-age 值,浏览器在这个时间内会直接从缓存中读取资源而无需再次向服务器发起请求,这大大提高了网页加载速度。

还有协商缓存,通过 Last-Modified 和 ETag 配合使用。服务器首次响应时返回 Last-Modified 标识资源最后修改时间,下次请求时浏览器带上这个时间戳,服务器对比判断资源是否修改, ETag 则是资源的唯一标识,同样用于验证资源变动情况。协商缓存能在资源有更新时及时获取新内容,保障数据准确性。

详解前端框架中的设计模式及对比

以常见的单例模式和观察者模式来说。单例模式确保一个类只有一个实例,并提供全局访问点,在前端如全局的配置管理类应用此模式很合适,优点是节省内存、方便统一管理,缺点是可能存在对单例对象过度依赖的情况。

观察者模式则建立了一种一对多的依赖关系,当一个对象状态改变时,所有依赖它的对象都会收到通知并自动更新。在前端的事件监听场景应用颇多,比如点击按钮触发多个关联操作。优点是解耦各模块,增强扩展性,缺点是可能导致代码逻辑较复杂,调试难度增加。

使用React实现一个简单的待办事项列表

在React中,首先创建组件 TodoList ,状态里用数组 todos 存储待办事项内容。添加功能通过表单输入,设置 onSubmit 事件,将输入值添加到 todos 数组中。编辑功能可以在每项待办旁设置编辑按钮,点击弹出输入框修改内容并更新状态。删除功能则为每项绑定删除按钮,点击触发函数从 todos 数组中移除对应项。利用React的状态管理和组件渲染机制,就能实现一个交互性良好的简单待办事项列表,方便用户操作。