前端面试题

1. 什么是闭包？如何使用它？

闭包是指在函数内部定义的函数可以访问外部函数的变量和参数，即使外部函数已经返回。闭包可以用来实现私有变量和函数。

 
 
   
   
   
   

  
  javascript
  
  Copy Code
 
 
   
   
   
   
function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

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

2. 什么是事件委托？

事件委托是指将事件处理程序添加到父元素，而不是每个子元素上。当子元素触发事件时，事件会冒泡到父元素并被处理。

 
 
   
   
   
   

  
  html
  
  Copy Code
 
 
   
   
   
   

  
Item 1
  
Item 2
  
Item 3

3. 什么是跨域资源共享（CORS）？

CORS 是一种机制，允许网页向不同域名的服务器发起 AJAX 请求。它通过在 HTTP 头中添加额外的信息来告诉浏览器哪些跨域请求是安全的。

 
 
   
   
   
   

  
  javascript
  
  Copy Code
 
 
   
   
   
   
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data.json");
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.withCredentials = true;
xhr.send();

4. 什么是同源策略？

同源策略是浏览器的一项安全功能，限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。同源是指协议、主机名和端口号均相同。

5. 什么是 Web Worker？

Web Worker 是一种 JavaScript 线程，可以在后台运行，不会阻塞 UI 线程。它们可以用于执行计算密集型任务，如图像处理或加密。

 
 
   
   
   
   

  
  javascript
  
  Copy Code
 
 
   
   
   
   
const worker = new Worker("worker.js");
worker.addEventListener("message", function(event) {
  console.log("Worker said:", event.data);
});
worker.postMessage("Hello from main thread!");

6. 什么是 Promise？

Promise 是一种异步编程模式，用于处理异步操作的结果。它代表了一个尚未完成但最终会完成的操作，并提供了一种处理操作成功或失败的方式。

 
 
   
   
   
   

  
  javascript
  
  Copy Code
 
 
   
   
   
   
function fetchData() {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://example.com/data.json");
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(new Error("Network error"));
    };
    xhr.send();
  });
}

fetchData().then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.error(error);
});

7. 什么是 AJAX？

AJAX 是一种在不重新加载整个页面的情况下更新部分页面内容的技术。它利用浏览器提供的 XMLHttpRequest 对象与服务器进行异步通信。

 
 
   
   
   
   

  
  javascript
  
  Copy Code
 
 
   
   
   
   
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data.json");
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

8. 什么是 MVC？

MVC 是一种软件架构模式，将应用程序分为三个部分：模型、视图和控制器。模型表示数据和业务逻辑，视图表示用户界面，控制器处理用户输入并更新模型和视图。

9. 什么是 MVVM？

MVVM 是一种软件架构模式，将应用程序分为三个部分：模型、视图和视图模型。视图模型充当模型和视图之间的桥梁，处理用户输入并更新模型和视图。

10. 什么是单页应用程序（SPA）？

SPA 是一种 Web 应用程序，使用 AJAX 和 HTML5 的 History API 动态地更新页面内容，而不是每次加载新页面。它通常使用前端框架，如 Angular、React 或 Vue。

11. 什么是虚拟 DOM？

虚拟 DOM 是一种内存中的表示，用于快速比较和更新实际 DOM 的更改。它通常与 React、Vue 和其他前端框架一起使用。

12. 什么是 CSS 预处理器？

CSS 预处理器是一种工具，允许您编写更高级别的 CSS，并将其编译为浏览器可以理解的原始 CSS。它们通常包括变量、嵌套、混合和函数等功能。

 
 
   
   
   
   

  
  scss
  
  Copy Code
 
 
   
   
   
   
$primary-color: #007bff;

.btn {
  color: white;
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

13. 什么是 CSS 后处理器？

CSS 后处理器是一种工具，用于在编译后对 CSS 进行优化和转换。它们通常包括压缩、自动添加浏览器前缀和优化选择器等功能。

14. 什么是模块化？

模块化是一种软件设计模式，将应用程序分解为独立的、可重用的组件。它允许开发人员更容易地维护和扩展代码，并提高了代码的可读性和可维护性。

 
 
   
   
   
   

  
  javascript
  
  Copy Code
 
 
   
   
   
   
import { fetchData } from "./api.js";

fetchData().then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.error(error);
});

15. 什么是 Webpack？

Webpack 是一种模块打包工具，用于将多个模块打包成单个文件。它还可以处理 CSS、图片和其他资源，并优化输出文件的大小和性能。

16. 什么是 Babel？

Babel 是一种 JavaScript 编译器，用于将新版本的 JavaScript 转换为旧版本的 JavaScript，以便在更旧的浏览器中运行。它还支持转换 JSX 和其他语言扩展。

 
 
   
   
   
   

  
  javascript
  
  Copy Code
 
 
   
   
   
   
const square = x => x * x;

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person("Alice");
console.log(`Hello, ${person.name}!`);

17. 什么是 TypeScript？

TypeScript 是一种静态类型检查器，用于将 JavaScript 扩展为更严格的类型系统。它提供了更好的代码自动补全、重构和文档化，并可以减少运行时错误。

 
 
   
   
   
   

  
  typescript
  
  Copy Code
 
 
   
   
   
   
interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

const alice = { name: "Alice", age: 30 };
greet(alice);

18. 什么是响应式设计？

响应式设计是一种 Web 设计技术，使网站可以根据设备的大小和分辨率自适应布局。它使用媒体查询和弹性布局来实现这一目标。

 
 
   
   
   
   

  
  css
  
  Copy Code
 
 
   
   
   
   
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

19. 什么是移动优先设计？

移动优先设计是一种 Web 设计技术，将移动设备的需求放在首位，而不是桌面设备。它使用响应式设计和其他技术来提供更好的移动体验。

20. 什么是可访问性？

可访问性是指使 Web 内容对所有用户可用，包括残障人士和老年人。它涉及到使用无障碍标准、语义化 HTML 和其他技术来提高内容的可访问性。