设计模式有哪些
设计模式是在软件设计过程中经常遇到的问题的解决方案的一种重复利用的设计经验。以下是常见的一些设计模式分类及其示例：
- 创建型模式（Creational Patterns）：
- 工厂模式（Factory Pattern）
- 抽象工厂模式（Abstract Factory Pattern）
- 单例模式（Singleton Pattern）
- 原型模式（Prototype Pattern）
- 建造者模式（Builder Pattern）
- 结构型模式（Structural Patterns）：
- 适配器模式（Adapter Pattern）
- 装饰器模式（Decorator Pattern）
- 代理模式（Proxy Pattern）
- 桥接模式（Bridge Pattern）
- 组合模式（Composite Pattern）
- 外观模式（Facade Pattern）
- 享元模式（Flyweight Pattern）
- 行为型模式（Behavioral Patterns）：
- 观察者模式（Observer Pattern）
- 策略模式（Strategy Pattern）
- 命令模式（Command Pattern）
- 模板方法模式（Template Method Pattern）
- 迭代器模式（Iterator Pattern）
- 职责链模式（Chain of Responsibility Pattern）
- 状态模式（State Pattern）
- 访问者模式（Visitor Pattern）
- 解释器模式（Interpreter Pattern）
- 中介者模式（Mediator Pattern）
- 备忘录模式（Memento Pattern）
- 并发型模式（Concurrency Patterns）：
- 读写锁模式（Read-Write Lock Pattern）
- 保护性暂停模式（Guarded Suspension Pattern）
- 信号量模式（Semaphore Pattern）
- 模式（Monitor Pattern）
- 管程模式（Balking Pattern）
上述只是一部分常见的设计模式，设计模式的选择取决于具体的问题和应用场景。设计模式能够提供通用的解决方案，提升代码的可维护性、可扩展性和可重用性。
事件循环
事件循环（Event Loop）是 JavaScript 中用于处理异步代码执行的机制。它控制着代码的执行顺序，确保异步操作能够被正确地处理。
在浏览器环境中，事件循环是基于浏览器提供的 Web APIs（如定时器、Ajax 请求、DOM 事件等）来进行任务调度的。而在 Node.js 环境中，事件循环的实现基于 libuv 库。
事件循环的基本原理如下：
- JavaScript 代码分为同步代码和异步代码。
- 同步代码按照顺序执行，不会导致阻塞。
- 异步代码通过回调函数、Promise、async/await 等方式进行处理。
- 当遇到异步操作（如定时器、网络请求）时，将其分发给相应的 Web API。
- 异步操作完成后，通过任务队列（Task Queue）将回调函数或 Promise 的处理推送到任务队列中。
- 事件循环会不断地从任务队列中取出任务，并执行。
事件循环包括以下几个关键组件：
- 调用栈（Call Stack）：用于存储当前正在执行的 JavaScript 代码，遵循先进后出的原则。
- Web API：提供了异步操作的接口，如定时器（setTimeout、setInterval）、网络请求（Ajax、fetch）、DOM 事件等。
- 任务队列（Task Queue）：用于存储异步操作完成后的回调函数或 Promise 的处理任务。
- 微任务队列（Microtask Queue）：用于存储 Promise 的处理任务。
- Event Loop：负责协调调用栈、任务队列和微任务队列之间的工作，确保代码按照正确的顺序执行。
事件循环的机制保证了 JavaScript 的单线程特性，通过异步操作提高了代码的执行效率和响应能力。开发者可以利用事件循环机制编写高效的异步代码，避免阻塞主线程的情况，提供更好的用户体验。
Grid布局
Grid布局是一种CSS布局模块，用于在网页上创建二维网格结构。它可以更灵活地控制元素的位置和大小，使得页面布局更直观和易于管理。以下是Grid布局的一些关键概念和属性：
- 容器（Container）：
display: grid;：定义一个元素为Grid容器。grid-template-columns：指定网格列的大小和数量。grid-template-rows：指定网格行的大小和数量。grid-gap：指定网格中的间隔大小。
- 项（Item）：
grid-column-start和grid-column-end：定义项目的列跨度。grid-row-start和grid-row-end：定义项目的行跨度。grid-area：同时设置项目的列、行以及跨度。
- 自动布局 (Automatic layout)：
grid-auto-columns：指定在没有显式定义的情况下自动生成的列的大小。grid-auto-rows：指定在没有显式定义的情况下自动生成的行的大小。
- 对齐及空白（Alignment and Gaps）：
justify-items：定义项目在网格容器中的水平对齐方式。align-items：定义项目在网格容器中的垂直对齐方式。justify-content：定义网格容器中所有项目的水平对齐方式。align-content：定义网格容器中所有项目的垂直对齐方式。gap：指定网格容器中项目之间的间隔。
Grid布局还支持更多属性和功能，包括指定项目的排序、命名网格线、对齐网格项目等。通过使用这些属性，可以创建复杂的网页布局并轻松实现响应式设计。
预检请求分为哪几类
预检请求是指在跨域请求中，浏览器会先发送一个OPTIONS请求，以确定实际请求是否被服务器所接受。根据请求的内容和用途，预检请求可以分为以下几类：
- 简单请求（Simple Request）：
- HTTP方法为GET、HEAD、POST中的一种。
- 只使用了一些简单的请求头，如Accept、Accept-Language、Content-Language、Content-Type（仅限部分取值，如application/x-www-form-urlencoded、multipart/form-data、text/plain）。
- 带有自定义请求头的请求：
- 在简单请求的基础上，添加了自定义的请求头字段（如X-Custom-Header）。
- 需要预检的请求（Preflight Request）：
- 使用非简单请求头字段，如Content-Type(除了部分取值外)。
- 发送了自定义的请求头字段。
对于简单请求和带有自定义请求头的请求，浏览器会直接发送实际请求，并将响应返回给客户端。而预检请求则需要先发送一个OPTIONS请求给服务器，服务器根据请求头信息返回对应的响应头给浏览器，浏览器根据响应头确定是否可以发送实际请求。
预检请求的目的是确保客户端的请求是安全可靠的，并确保服务器对该请求的接受方式是合法的。它是跨域请求中的一种机制，用于增强安全性，防止恶意跨域请求对服务器造成损害。
