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

前端面试每日三题 - Day 25

news 2025/7/1 13:01:04

这是我为准备前端/全栈开发工程师面试整理的第25天每日三题练习，涵盖了：

CSS中如何实现一个保持宽高比的自适应正方形元素
Angular的变更检测（Change Detection）机制
项目实战 - 设计一个微前端架构的前端应用。

✅ 题目1：CSS中如何实现一个保持宽高比的自适应正方形元素？请给出至少两种实现方案并解释原理

padding百分比法
```
.square {width: 100%;height: 0;padding-bottom: 100%; /* 宽高比1:1 */background: #ccc;
}
```
原理：CSS规范中垂直方向（padding-top/padding-bottom）的百分比值基于父元素宽度计算，通过设置padding-bottom:100%实现1:1宽高比。需配合height:0消除容器原始高度影响。
aspect-ratio属性
```
.aspect-wrapper {container-type: inline-size; /* 定义容器 */
}.aspect-square {width: 100%;aspect-ratio: 1/1; /* 直接声明宽高比 */background: #e0e0e0;
}
```
原理：通过aspect-ratio属性直接声明宽高比，需配合容器查询实现响应式布局。浏览器会自动根据容器宽度计算高度，兼容Chrome 88+/Firefox 89+。
视窗单位法
```
.square {width: 50vw;height: 50vw; /* 基于视窗宽度 */
}
```
原理：vw单位基于视口宽度，但需注意父容器可能限制实际尺寸。

✅ 题目2：Angular的变更检测（Change Detection）机制是如何工作的？如何优化性能？

工作原理：
- 默认策略：Zone.js拦截所有异步事件（点击、定时器等），触发整个组件树的变更检测
- 脏检查：通过比较数据的新旧值判断是否需要更新视图
- 组件树遍历：从根组件开始，递归检查所有子组件
优化策略：
- OnPush策略：设置组件changeDetection: ChangeDetectionStrategy.OnPush，仅在输入属性变化或手动标记时检测
- 手动控制：使用ChangeDetectorRef.detach()/detectChanges()精细控制检测范围
- Immutable数据：使用不可变数据结构减少检测次数
- Async Pipe：内置管道自动管理订阅和取消检测

✅ 题目3：设计一个微前端架构的前端应用，需要考虑哪些核心问题？如何实现应用间的隔离与通信？

核心问题清单：

应用隔离：样式污染、JS全局变量冲突
通信机制：跨应用数据共享与事件传递
资源加载：按需加载子应用，避免重复依赖
路由管理：主应用与子应用路由协调
构建部署：独立开发、独立部署

实现方案：

应用隔离：
- CSS隔离：使用Shadow DOM或CSS Module
- JS沙箱：通过Proxy代理全局对象（如window），实现运行时隔离
通信机制：
- CustomEvent：主应用与子应用通过自定义事件通信
- 状态管理库：共享Redux或Vuex Store（需版本兼容）
- URL参数：通过路由参数传递简单数据

技术选型：

方案库：qiankun（阿里）、single-spa
模块加载：SystemJS动态加载子应用资源

示例代码：

// 主应用注册子应用（qiankun示例）
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([{name: 'subApp1',entry: '//localhost:7101',container: '#subapp-container',activeRule: '/subapp1',}
]);
start();