一个白一个反：详解前端面试中的常见问题

小蓝 • 2024-12-12 13:04 • 编程

在前端面试中，我们常会被问到一些与“一个白一个反”有关的问题。这些问题涉及CSS、JavaScript等方面，本文将从多个方面进行详细的阐述。

一、选择器

选择器是 CSS 中最基础的概念之一，也是所有前端开发人员必须掌握的知识。

首先，我们需要了解不同类型的选择器，包括：

标签选择器
ID选择器
类选择器
属性选择器
伪类选择器
后代选择器
子元素选择器
通用选择器

可以通过以下代码实现不同类型的选择器：


/* 标签选择器 */
p {
    font-size: 16px;
}
/* ID选择器 */
#myElement {
    color: red;
}
/* 类选择器 */
.myClass {
    font-weight: bold;
}
/* 属性选择器 */
[type="submit"] {
    background-color: blue;
}
/* 伪类选择器 */
a:hover {
    text-decoration: underline;
}
/* 后代选择器 */
ul li {
    margin-left: 20px;
}
/* 子元素选择器 */
ul>li {
    font-size: 18px;
}
/* 通用选择器 */
* {
    box-sizing: border-box;
}

其次，我们需要了解选择器的优先级规则：

!important
行内样式
ID选择器
类选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器
通用选择器

可以通过以下代码增加选择器的优先级：


/* 增加选择器优先级 */
.myClass {
    font-weight: bold !important;
}
#myElement {
    color: red !important;
}

二、盒模型

在前端开发中，盒模型是一个非常重要的概念。

在 CSS 中，盒模型指的是一个 HTML 元素的大小包括元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)等。

我们可以通过以下代码设置元素的盒模型属性：


/* 计算盒模型大小时包括元素的边框和内边距 */
.box {
    box-sizing: border-box;
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}
/* 计算盒模型大小时不包括元素的边框和内边距 */
.box-2 {
    box-sizing: content-box;
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

三、事件委托

事件委托是前端开发中的一种优化方法，可以减少 DOM 操作次数，提高页面性能。

简单来说，就是把事件绑定在父元素上，让子元素触发时冒泡至父元素，从而执行相应的操作。

可以通过以下代码实现事件委托：


const parentElement = document.getElementById("parentElement");

parentElement.addEventListener("click", function(event) {
  if (event.target.matches("button")) {
    // do something
  }
});

四、this 关键字

this 关键字在 JavaScript 中非常重要，它指向当前执行上下文的对象。

在全局作用域下，this 指向 window 对象；在函数中，this 的指向取决于函数的执行方式。

可以通过以下代码演示 this 的用法：


const obj = {
    name: "Alice",
    getName: function() {
        return this.name;
    }
};

const name = obj.getName(); // 返回 "Alice"

五、闭包

在 JavaScript 中，闭包是常见的一种概念。

简单来说，闭包就是一个包含自由变量的函数。自由变量是指在函数中使用的变量，但既不是函数参数也不是函数的局部变量。

可以通过以下代码演示闭包的用法：


function multiplier(factor) {
    return function(number) {
        return number * factor;
    }
}

const twice = multiplier(2);
const result = twice(5); // 返回 10

六、Promise

Promise 是 JavaScript 中处理异步操作的一种方法。它允许我们以更易于理解和优雅的方式编写异步代码。

下面是一个简单的返回 Promise 对象的函数：


function asyncFunction() {
    return new Promise((resolve, reject) => {
        // 异步操作
        if (/* 操作成功 */) {
            resolve("操作成功");
        } else {
            reject("操作失败");
        }
    });
}

asyncFunction()
    .then(result => console.log(result))
    .catch(error => console.log(error));

以上是本文针对前端面试中常见问题“一个白一个反”进行的详细阐述。希望可以帮助到前端开发人员更好地掌握这些基础知识。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/244884.html