每日三问-前端（第二期）

2023年5月16日

先回顾一下昨天三道题的答案

1. 问题：请解释JavaScript中的闭包，以及它的应用场景。

答案：闭包是指一个函数能够访问其自身作用域以外的变量。在JavaScript中，当一个内部函数引用了外部函数的变量时，就形成了闭包。闭包可以用于实现私有变量、模块化、函数柯里化等。

应用场景示例：

// 计数器示例，使用闭包实现私有变量
function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 输出1
console.log(counter()); // 输出2

2. 问题：请解释CSS选择器的优先级规则。

答案：CSS选择器的优先级由四个部分组成：内联样式、ID选择器、类选择器/属性选择器/伪类选择器、元素选择器/伪元素选择器。优先级从高到低依次排列。

优先级计算规则：

• 内联样式的优先级最高，其次是ID选择器，然后是类/属性/伪类选择器，最后是元素/伪元素选择器。

• 当多个选择器具有相同优先级时，后出现的选择器会覆盖先前的选择器。

• 使用!important可以提高一个样式声明的优先级，但应谨慎使用，以避免样式冲突。

3. 问题：什么是响应式设计，以及如何实现响应式布局？

答案：响应式设计是一种设计和开发方法，使网站能够根据用户设备的屏幕尺寸、方向和分辨率自动调整布局、图像和功能。响应式设计的目标是为不同设备提供最佳的用户体验。

实现响应式布局的方法：

• 使用百分比、相对单位（如em、rem、vw、vh等）而非绝对单位（如px）来定义元素的尺寸和位置。

• 使用CSS媒体查询（@media）来根据设备特性（如屏幕宽度、高度、分辨率等）应用不同的样式规则。

• 使用流式布局（如Flexbox、CSS Grid）来自动调整元素的排列和尺寸。

• 使用图片响应式技术（如srcset属性、<picture>元素）来根据设备特性加载适当尺寸的图像。

2023年5月17日问题

1. 问题：请解释什么是事件委托，以及它的优点。

2. 问题：请解释什么是虚拟DOM，以及它的作用。

3. 问题：请解释什么是CSS预处理器，以及它的优点。

上面三个问题的答案会在第二天的公众号推文中公布，大家可以关注公众号，第一时间获得推送内容。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题（死磕自己，愉悦大家） 希望大家在这浮夸的程序员圈里保持冷静，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。