❬前端❭ 优化实战（性能、安全、架构、算法、面试）

响应式页面为了适应不同的终端设备而产生，体验较好，可以自动识别屏幕宽度以改变布局形式。但 不是所有的应用都适合做成响应式 对于一些大型复杂的应用，使用 移动端H5页面 和 PC端应用 协同使用，可以提

在项目中使用高德地图的 API 时，发现 API 的使用和业务耦合的非常严重。既不利于维护，又不利于扩展 于是乎，可以使用 责任链模式 对地图 API 进行封装设计，提升其可 维护性 可扩展性 易读性

在涉及地图的项目开发中，经常需要使用信息窗体在地图上添加显示内容以及事件交互操作。当给自定义窗体中的元素绑定事件后，存在事件触发无效的问题

密码学是各种安全应用程序所必须的，现代密码学旨在创建通过应用数学原理和计算机科学来保护信息的机制。但相比之下，密码分析旨在解密此类机制，以便获得对信息的非法访问

责任链模式：责任链模式 又被叫作 职责链模式 是一种行为设计模式，允许你将请求沿着处理者链进行发送 收到请求后， 每个处理者均可对请求进行处理，或将其传递给链上的下个处理者 模式作用 既可以

基于 原生JS 实现二进制流文件下载，支持下载资源地址的有效性校验；支持文件下载时的文件进度信息获取

列表去重 使用 Set 数据结构 注：Set 数据结构认为对象永不相等，即使是两个空对象，在 Set 结构内部也是不等的 方法封装 对象转为查询字符串 代码注释 方法封装 获取查询参数 代码注释 方法

在日常的项目研发中，常常会遇到一些下拉框选项或一组（单选/多选）的选择项，比如性别、学历、行业等。通常以 [{ label: '前端显示的文案', value: '后端存储的数据库值' }] 的枚举数

技术背景 前端在做一些业务逻辑的时候，通常会使用一个唯一标识作为数据的 key 值，而有时候数据本身并没有这个唯一标识，使用下标的话又会引发一些隐藏的 Bug 甚至说在给后端传递集合数据的时候，会要求

数据结构是待处理问题的数学模型，算法则是处理问题的策略。 作为软件工程师除了要对现实问题有很好的理解与把控外，还要深谙数据结构与算法才能找到合适的数学模型和算法，从而服务于后续的工作。由此数据结构与算

代理模式：给某一个对象提供一个代理对象，并由代理对象控制对原对象的访问 通俗的理解就是 我们生活中常见的中介

观察者模式：定义了对象之间的一对多依赖关系，让多个观察者对象同时监听一个主体对象，当主体对象发生变化时，它的所有依赖者（观察者）都会收到通知并更新

外观模式：又被叫作门面模式，是一种对外提供一个一致的接口，使内部的复杂逻辑更加容易被访问的结构型设计模式

策略模式：定义一组策略，把它们分别封装起来，每个策略都可以根据当前场景相互替换，从而将策略的实现和使用进行分离

适配器模式：解决接口不兼容的问题，使得原本由于接口不兼容而不能一起工作的那些类或方法可以一起工作，充当适配中间件的角色

洋葱模型：（先从皮到心，再从心到皮） 把代码流程化，让流水线更加清楚，且每一个中间件都有两次处理时机

前端埋点是在产品客户端获取用户行为和使用情况的一种监控方式。通过埋点可以获取到用户行为数据，借助这些数据，可以提升产品使用体验和用户留存率

通过 while 循环将数据源 source 搬家至目标数据 list 中，通过解构取出循环项 item 中的子级，以前置队列的方式放至 source 中，直到数据全部取完

单个函数的作用和功能相对来说是比较单一的，都应遵循单一职责的设计。但在解决实际问题时，往往需要多个函数进行嵌套使用，这样就很容易写出不利于维护的洋葱代码，导致其可读性和可扩展性变差

在软件开发过程中，经常会有一些与功能逻辑本身无关的、重复性的代码。可以通过装饰器模式进行抽象，在需要的地方直接进行使用即可