![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
绅枪手
获得徽章 0
赞了这篇沸点
适配刘海屏的方案有哪些呢？
适配刘海屏的方案主要集中在 CSS 和 JavaScript 的使用上，确保网页在刘海屏设备上能够正常显示内容。以下是几种常见的适配方案：
### 1. 使用 `env()` 函数
在 CSS 中使用 `env()` 函数来获取安全区域（safe area），确保内容不被刘海遮挡。
```css
body {
padding-top: env(safe-area-inset-top); /* 上部安全区域 */
padding-left: env(safe-area-inset-left); /* 左侧安全区域 */
padding-right: env(safe-area-inset-right); /* 右侧安全区域 */
padding-bottom: env(safe-area-inset-bottom); /* 下部安全区域 */
}
```
### 2. 媒体查询
利用媒体查询针对刘海屏设备进行特定样式调整。例如，可以检测手机的屏幕特性，来应用不同的样式。
```css
@media only screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
.container {
padding-top: 40px; /* 增加顶部内边距 */
}
}
```
### 3. 使用 JavaScript 检测
使用 JavaScript 来检测设备是否为刘海屏，并相应地调整页面布局。
```javascript
function isNotchScreen() {
const { innerWidth, innerHeight } = window;
return (innerHeight / innerWidth) > 2; // 根据比例判断是否为刘海屏
}
if (isNotchScreen()) {
document.body.style.paddingTop = '40px'; // 根据需要调整
}
```
### 4. 使用 Viewport Meta 标签
确保在 HTML 中使用合适的 viewport meta 标签。这对适配所有屏幕类型非常重要。
```html
适配刘海屏的方案主要集中在 CSS 和 JavaScript 的使用上，确保网页在刘海屏设备上能够正常显示内容。以下是几种常见的适配方案：
### 1. 使用 `env()` 函数
在 CSS 中使用 `env()` 函数来获取安全区域（safe area），确保内容不被刘海遮挡。
```css
body {
padding-top: env(safe-area-inset-top); /* 上部安全区域 */
padding-left: env(safe-area-inset-left); /* 左侧安全区域 */
padding-right: env(safe-area-inset-right); /* 右侧安全区域 */
padding-bottom: env(safe-area-inset-bottom); /* 下部安全区域 */
}
```
### 2. 媒体查询
利用媒体查询针对刘海屏设备进行特定样式调整。例如，可以检测手机的屏幕特性，来应用不同的样式。
```css
@media only screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
.container {
padding-top: 40px; /* 增加顶部内边距 */
}
}
```
### 3. 使用 JavaScript 检测
使用 JavaScript 来检测设备是否为刘海屏，并相应地调整页面布局。
```javascript
function isNotchScreen() {
const { innerWidth, innerHeight } = window;
return (innerHeight / innerWidth) > 2; // 根据比例判断是否为刘海屏
}
if (isNotchScreen()) {
document.body.style.paddingTop = '40px'; // 根据需要调整
}
```
### 4. 使用 Viewport Meta 标签
确保在 HTML 中使用合适的 viewport meta 标签。这对适配所有屏幕类型非常重要。
```html
展开
4
4
赞了这篇文章
juejin.cn
赞了这篇文章
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
在TypeScript中any和unkown有什么区别？
在 TypeScript 中，`any` 和 `unknown` 是两种特殊类型，但它们有着重要的区别，主要体现在类型安全性和使用场景上。
### `any`
- **定义**：`any` 类型表示任意类型，使用 `any` 的变量可以赋值为任何类型的数据，包括原始类型、对象、数组等。
- **类型安全性**：使用 `any` 会导致类型检查被绕过，编译器不会对 `any` 类型的变量进行类型检查，因此在运行时可能会出现错误。
- **使用场景**：通常在需要逐步迁移到 TypeScript 或者处理动态类型数据时使用，但应尽量避免频繁使用以保持代码的类型安全性。
```typescript
let value: any;
value = 42; // 允许
value = "Hello"; // 允许
value = { key: 1 }; // 允许
let length: number = (value as string).length; // 可能在运行时出错
```
### `unknown`
- **定义**：`unknown` 类型表示未知类型，意味着你可以赋值为任何类型，但在使用之前必须进行某种形式的类型检查。
- **类型安全性**：与 `any` 不同，`unknown` 强调类型安全。在使用 `unknown` 类型的变量之前，必须明确其类型，这样可以避免潜在的运行时错误。
- **使用场景**：适用于需要处理不确定类型的情况，同时保持类型安全性，鼓励开发者在使用前进行类型判断。
```typescript
let value: unknown;
value = 42; // 允许
value = "Hello"; // 允许
value = { key: 1 }; // 允许
// 必须进行类型检查后才能使用
if (typeof value === "string") {
let length: number = value.length; // 安全使用
}
```
### 总结
- `any`：可以接受任何类型，绕过类型检查，可能导致运行时错误，适合临时解决方案。
- `unknown`：也可以接受任何
在 TypeScript 中，`any` 和 `unknown` 是两种特殊类型，但它们有着重要的区别，主要体现在类型安全性和使用场景上。
### `any`
- **定义**：`any` 类型表示任意类型，使用 `any` 的变量可以赋值为任何类型的数据，包括原始类型、对象、数组等。
- **类型安全性**：使用 `any` 会导致类型检查被绕过，编译器不会对 `any` 类型的变量进行类型检查，因此在运行时可能会出现错误。
- **使用场景**：通常在需要逐步迁移到 TypeScript 或者处理动态类型数据时使用，但应尽量避免频繁使用以保持代码的类型安全性。
```typescript
let value: any;
value = 42; // 允许
value = "Hello"; // 允许
value = { key: 1 }; // 允许
let length: number = (value as string).length; // 可能在运行时出错
```
### `unknown`
- **定义**：`unknown` 类型表示未知类型，意味着你可以赋值为任何类型，但在使用之前必须进行某种形式的类型检查。
- **类型安全性**：与 `any` 不同，`unknown` 强调类型安全。在使用 `unknown` 类型的变量之前，必须明确其类型，这样可以避免潜在的运行时错误。
- **使用场景**：适用于需要处理不确定类型的情况，同时保持类型安全性，鼓励开发者在使用前进行类型判断。
```typescript
let value: unknown;
value = 42; // 允许
value = "Hello"; // 允许
value = { key: 1 }; // 允许
// 必须进行类型检查后才能使用
if (typeof value === "string") {
let length: number = value.length; // 安全使用
}
```
### 总结
- `any`：可以接受任何类型，绕过类型检查，可能导致运行时错误，适合临时解决方案。
- `unknown`：也可以接受任何
展开
6
3
赞了这篇沸点
前端需要对接口返回做哪些常规的校验？
在前端开发中，对接口返回的数据进行校验是确保应用稳定性和用户体验的重要环节。以下是一些常规的校验方法：
### 1. **状态码校验**
首先，检查响应的 HTTP 状态码。常见的状态码包括：
- 200：请求成功
- 400：请求参数错误
- 401：未授权
- 500：服务器错误
```javascript
if (response.status !== 200) {
console.error('请求失败，状态码:', response.status);
}
```
### 2. **数据结构校验**
确保返回数据的结构符合预期。使用 `typeof` 或 `Array.isArray()` 等方法进行基本类型检查。
```javascript
if (typeof response.data !== 'object') {
console.error('返回数据格式不正确');
}
```
### 3. **字段完整性校验**
检查响应对象中必需字段是否存在，并且类型是否正确。
```javascript
const requiredFields = ['id', 'name', 'email'];
requiredFields.forEach(field => {
if (!(field in response.data)) {
console.error(`缺少必需字段: ${field}`);
}
});
```
### 4. **值范围校验**
如果字段有特定的取值范围或格式（如邮箱、手机号），则需进行正则表达式校验。
```javascript
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(response.data.email)) {
console.error('邮箱格式不正确');
}
```
### 5. **数据类型校验**
确保数据的类型与预期一致，比如确认 ID 应为数字类型。
```javascript
if (typeof response.data.id !== 'number') {
console.error('ID 应为数字');
在前端开发中，对接口返回的数据进行校验是确保应用稳定性和用户体验的重要环节。以下是一些常规的校验方法：
### 1. **状态码校验**
首先，检查响应的 HTTP 状态码。常见的状态码包括：
- 200：请求成功
- 400：请求参数错误
- 401：未授权
- 500：服务器错误
```javascript
if (response.status !== 200) {
console.error('请求失败，状态码:', response.status);
}
```
### 2. **数据结构校验**
确保返回数据的结构符合预期。使用 `typeof` 或 `Array.isArray()` 等方法进行基本类型检查。
```javascript
if (typeof response.data !== 'object') {
console.error('返回数据格式不正确');
}
```
### 3. **字段完整性校验**
检查响应对象中必需字段是否存在，并且类型是否正确。
```javascript
const requiredFields = ['id', 'name', 'email'];
requiredFields.forEach(field => {
if (!(field in response.data)) {
console.error(`缺少必需字段: ${field}`);
}
});
```
### 4. **值范围校验**
如果字段有特定的取值范围或格式（如邮箱、手机号），则需进行正则表达式校验。
```javascript
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(response.data.email)) {
console.error('邮箱格式不正确');
}
```
### 5. **数据类型校验**
确保数据的类型与预期一致，比如确认 ID 应为数字类型。
```javascript
if (typeof response.data.id !== 'number') {
console.error('ID 应为数字');
展开
4
3