FAQ?

semver规范

SemVer规范是指“语义化版本”规范，它是一种版本标记约定，旨在使软件版本号更加清晰、有意义和易于比较。

SemVer 标准的版本格式为 MAJOR.MINOR.PATCH。在这个版本号格式中：

MAJOR 表示主版本号，定义了不向后兼容的 API 或功能改变； MINOR 表示次版本号，定义了向后兼容的新功能； PATCH 表示修订版本号，定义了向后兼容的问题修正。 除了这三个标准号码外， SemVer 还支持在版本号后添加预发布信息和版本元信息。预发布信息是指版本号后面的连字符和标识符（如 1.0.0-alpha.1），用于标识尚处于开发或测试阶段的软件版本。版本元数据是指版本号后面的加号和标识符（例如 1.2.3+build.1234），用于为版本号添加附加信息，如构建 ID 或 Git SHA-1 校验和等。

SemVer 标准还定义了版本号比较规则，使得版本号可以按照严格的语义化方式进行比较。例如，一个版本号大于另一个版本号，当且仅当它的主版本号更高、次版本号相等的情况下，或者它的主版本号相等、次版本号更高、修订版本号相等的情况下，或者它的主版本号、次版本号相等、修订版本号更高的情况下。

在软件的开发、维护和分发过程中，使用 SemVer 标准来标记版本号，可以使得版本控制更加清晰、可靠和可预测。

Babel的原理是什么?

如何写一个babel插件?

webpack和gulp区别（模块化与流的区别）

Webpack 是一个模块化打包工具。它的主要功能是分析项目中的模块依赖关系，然后将这些模块打包成一些浏览器可以直接使用的静态资源文件（例如 JavaScript、CSS、图片等）。Webpack 非常适合用于构建大型的、模块化的 Web 应用程序，它可以自动化打包和压缩代码，并提供一些常用插件和工具库，以便于开发者进行高效的开发、测试和部署。

相比之下，Gulp 是一个流式构建工具，它通过指定一系列任务来处理项目中的源文件。每一个任务都以源文件和目标文件为输入和输出，通过流的方式将数据从一个任务传递到另一个任务。Gulp 对于处理复杂的任务和构建管道非常有用。它提供了大量的插件和工具库，可以帮助开发者解决常见的 Web 开发任务，例如编译 Sass、压缩图片、打包 CSS 和 JavaScript 等。

总之，Webpack 适合处理模块化的 Web 应用程序，而 Gulp 适合处理流式的 Web 开发任务，例如代码压缩、图片优化等。在实际项目中，可以根据实际情况选择合适的工具，或者将它们结合起来使用，以便于更高效地构建和维护 Web 应用程序。

SWC和babel的区别

SWC和Babel都是JavaScript编译器，但它们之间仍有一些区别。

SWC代表Superfast WebAssembly Compiler。它是一个较新的编译器，专为速度而设计。它使用WebAssembly进行编译，并且可以处理大多数Babel可以处理的相同类型的语法。SWC还内置了许多传统编译器中存在的优化，可以提供更快和更紧凑的输出。

Babel是更成熟的编译器，已经存在了很长时间。 它使用JavaScript进行编译，并且可以处理的语法比SWC更广泛。 Babel具有非常活跃的社区和生态系统，支持各种插件和配置选项。

因此，SWC适用于需要快速编译速度的项目和对输出大小有要求的项目，而Babel适用于对语法支持更广泛，有更多的可扩展性和适应性的项目。

选mocha还是jest

Mocha:

• Mocha 是一个灵活的测试框架，它提供了强大的功能和丰富的插件生态系统。
• Mocha 不依赖于断言库或模拟库，这使得您可以根据自己的喜好选择适合的工具。
• Mocha 支持异步测试，包括使用回调函数、Promises 或 async/await。
• Mocha 对于编写大型测试套件和复杂的测试场景非常适用。

Jest:

• Jest 是一个全功能的 JavaScript 测试框架，提供了内置的断言库、模拟功能和覆盖率报告。
• Jest 具有简单的设置和使用，适合于快速启动项目和编写小型测试套件。
• Jest 具有零配置的模拟功能，使得模拟复杂的依赖关系变得更加容易。
• Jest 集成了覆盖率报告，并提供易于理解的可视化报告。

根据项目的特点和需求，您可以考虑以下因素来做出选择：

• 项目规模和复杂度：如果您的项目很大且复杂，涉及许多异步操作和定制需求，那么 Mocha 可能更适合。
• 快速启动和简单性：如果您希望快速启动测试并且不想花费太多时间进行配置，Jest 可能更适合。
• 插件和生态系统：根据您可能需要的插件和扩展功能，了解 Mocha 和 Jest 的生态系统，以确定哪个框架提供更好的支持。
• 社区和支持：查看每个框架的社区支持、更新频率和文档质量，这些因素都可以对选择产生影响。

无论您选择 Mocha 还是 Jest，重要的是在项目中使用适合您团队和需求的测试框架，并编写高质量的测试来确保代码的可靠性和稳定性。

本地开发端口映射

一般来说，如果你想在本地开发环境中进行端口映射，可以尝试以下几种方法：

1. 使用代理服务器：你可以在本地启动一个代理服务器，将请求转发到指定的端口。常见的代理服务器工具有nginx、http-proxy-middleware等，你可以根据自己的需求选择合适的工具进行配置。

2. 使用反向代理：在一些开发服务器工具（如webpack-dev-server、http-server等）中，提供了反向代理的功能，你可以通过配置反向代理来实现端口映射。

3. 使用浏览器插件：有一些浏览器插件可以帮助你实现端口映射，比如 Chrome 浏览器中的插件 SwitchyOmega 或者 Proxy SwitchySharp。

MVVM、MVC、MVP 的区别

MVVM、MVC、MVP 是三种常见的软件架构模式，用于组织和管理前端或后端应用程序的代码。它们的区别如下：

1. MVC（Model-View-Controller）：

   • Model（模型）：表示数据和业务逻辑。
   • View（视图）：负责展示数据，与用户进行交互。
   • Controller（控制器）：处理用户输入，更新模型和视图之间的关系。
   • 特点：模型和视图是分离的，通过控制器进行交互。主要用于后端开发，将应用程序分为三个不同的部分，每个部分有各自的职责。

2. MVP（Model-View-Presenter）：

   • Model（模型）：表示数据和业务逻辑。
   • View（视图）：负责展示数据，与用户进行交互。
   • Presenter（展示器）：从模型中获取数据，并将数据传递给视图。处理视图的事件和用户输入。
   • 特点：Presenter 充当了控制器和视图之间的中介角色，将数据的获取和处理逻辑从视图中分离出来。主要用于前端开发。

3. MVVM（Model-View-ViewModel）：

   • Model（模型）：表示数据和业务逻辑。
   • View（视图）：负责展示数据，与用户进行交互。
   • ViewModel（视图模型）：连接视图和模型，负责处理视图和模型之间的数据绑定、事件处理等。
   • 特点：视图和模型之间通过双向数据绑定实现自动更新。ViewModel 将视图的状态和行为抽象为数据模型，使得视图和模型之间的耦合度降低。主要用于前端开发。

总结：

• MVC 是将应用程序分为模型、视图和控制器，主要用于后端开发。
• MVP 将模型和视图分离，并通过展示器进行交互，主要用于前端开发。
• MVVM 在 MVP 的基础上引入了双向数据绑定，将视图和模型的关系进一步解耦。

这些架构模式旨在提供一种组织代码的方式，以实现可维护、可扩展和可测试的应用程序。具体选择哪种架构模式取决于应用程序的需求、开发团队的偏好以及技术栈的限制。

webpack 与 grunt、gulp 的不同？

Grunt、Gulp 是基于任务运⾏的⼯具： 它们会⾃动执⾏指定的任务， 就像流⽔线，把资源放上去然后通过不同插件进⾏加⼯，它们包含活 跃的社区，丰富的插件，能⽅便的打造各种⼯作流。 Webpack 是基于模块化打包的⼯具: ⾃动化处理模块，webpack 把⼀ 切当成模块，当 webpack 处理应⽤程序时，它会递归地构建⼀个依 赖关系图 (dependency graph)，其中包含应⽤程序需要的每个模块， 然后将所有这些模块打包成⼀个或多个 bundle。 因此这是完全不同的两类⼯具,⽽现在主流的⽅式是⽤npm script 代 替 Grunt、Gulp，npm script 同样可以打造任务流。

webpack、rollup、parcel 优劣？

webpack 适⽤于⼤型复杂的前端站点构建: webpack 有强⼤的 loader 和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数，这个⽴即 执⾏函数接收⼀个参数，这个参数是模块对象，键为各个模块的路径， 值为模块内容。⽴即执⾏函数内部则处理模块之间的引⽤，执⾏模块 等,这种情况更适合⽂件依赖复杂的应⽤开发。

rollup 适⽤于基础库的打包，如 vue、d3 等: Rollup 就是将各个模 块打包进⼀个⽂件中，并且通过 Tree-shaking 来删除⽆⽤的代码, 可以最⼤程度上降低代码体积,但是rollup没有webpack如此多的的 如代码分割、按需加载等⾼级功能，其更聚焦于库的打包，因此更适 合库的开发。

parcel 适⽤于简单的实验性项⽬: 他可以满⾜低⻔槛的快速看到效 果,但是⽣态差、报错信息不够全⾯都是他的硬伤，除了⼀些玩具项 ⽬或者实验项⽬不建议使⽤。

有哪些常⻅的 Loader？

1. babel-loader：用于将 ES6+ 代码转换为兼容的 JavaScript 代码，以便在旧版本浏览器中运行。

2. css-loader：用于加载和处理 CSS 文件，支持处理 CSS 文件中的 @import 和 url() 引用。

3. style-loader：将 CSS 代码注入到页面的 <style> 标签中，使其生效。

4. sass-loader：用于加载和处理 SASS/SCSS 文件，将其转换为 CSS 代码。

5. less-loader：用于加载和处理 LESS 文件，将其转换为 CSS 代码。

6. file-loader：用于处理文件资源（如图片、字体等），根据配置将文件移动到输出目录，并返回文件的路径。

7. url-loader：与 file-loader 类似，但还可以根据文件大小将文件转换为 Base64 字符串嵌入到代码中，以减少 HTTP 请求。

8. eslint-loader：用于在构建过程中进行代码的静态检查，可以配合 ESLint 使用。

9. ts-loader：用于将 TypeScript 代码转换为 JavaScript 代码。

10. postcss-loader：使用 PostCSS 对 CSS 进行后处理，可以实现自动添加前缀、压缩等功能。

有哪些常⻅的 Plugin？

1. HtmlWebpackPlugin：用于生成 HTML 文件，并自动将生成的 bundle 文件注入到 HTML 文件中。

2. MiniCssExtractPlugin：将 CSS 从 JavaScript 中提取出来，生成单独的 CSS 文件。

3. CleanWebpackPlugin：在每次构建前清理输出目录。

4. CopyWebpackPlugin：用于复制文件或文件夹到构建目录。

5. DefinePlugin：允许在代码中定义全局常量，可以在开发和生产环境下使用不同的配置。

6. HotModuleReplacementPlugin：启用热模块替换功能，使代码更新后能够在浏览器中实时展示，无需刷新页面。

7. ProvidePlugin：自动加载模块，将某些模块作为全局变量在所有模块中可用。

8. webpack-bundle-analyzer：分析打包结果，可视化地展示每个模块的大小和依赖关系，帮助优化构建产物。

9. CompressionWebpackPlugin：在构建过程中对静态资源进行压缩，以减小文件体积，提高加载速度。

10. ImageminWebpackPlugin：用于压缩图片资源，减小图片文件的大小。

bundle，chunk，module 是什么？

在 webpack 中，bundle、chunk 和 module 是三个重要的概念，它们分别代表着不同的概念和组织方式：

1. Bundle（打包文件）：一个 bundle 是由 webpack 构建出来的最终文件，它包含了应用程序的代码和资源。在开发过程中，可以将一个应用程序分割成多个 bundle，每个 bundle 包含一组相关的模块。

2. Chunk（代码块）：一个 chunk 是 webpack 在打包过程中的中间产物，它表示着一个或多个模块的集合。Webpack 根据入口文件和代码的依赖关系，将代码分割成多个 chunk。在默认配置下，一个入口文件对应一个 chunk。

3. Module（模块）：一个 module 是指应用程序中的一个模块，可以是一个 JavaScript 文件、一个 CSS 文件、一个图片文件等。Webpack 将应用程序中的所有文件都视为模块，并对它们进行处理和组织。

总结来说，module 是 webpack 对应用程序中每个文件的抽象，chunk 是在构建过程中的中间产物，它表示着一组相关的模块，而 bundle 是最终构建出来的文件，它包含了应用程序的代码和资源。在实际开发中，可以通过配置 entry、output、splitChunks 等选项来控制 bundle 和 chunk 的生成和组织方式，以满足项目的需求和优化目标。

Loader 和 Plugin 的不同？

Loader 和 Plugin 是 webpack 中两个不同的概念，它们在构建过程中扮演不同的角色：

1. Loader（加载器）：Loader 用于告诉 webpack 如何处理非 JavaScript 文件（模块）。它们作为 webpack 构建过程中的转换器，将不同类型的文件转换为模块，使得这些文件能够被应用程序所使用。Loader 在模块的加载阶段被执行，可以对模块的源代码进行处理，例如将 ES6+ 代码转换为 ES5、处理 CSS、处理图片等。Loader 在 webpack 的配置中以函数或字符串的形式进行配置。

2. Plugin（插件）：Plugin 用于扩展 webpack 的功能，它通过在构建过程的不同阶段插入自定义逻辑，来完成各种额外的任务。插件可以用于资源的优化、文件的生成、环境变量的注入、代码的分析等。Plugin 通过 webpack 的插件系统实现，它可以监听 webpack 构建过程中的事件，并在适当的时机执行自定义的逻辑。Plugin 的配置项是一个实例化对象。

总结来说，Loader 主要处理模块的转换和加载，而 Plugin 则用于扩展 webpack 的功能，添加额外的处理逻辑。Loader 和 Plugin 在 webpack 的配置文件中通过不同的配置项进行配置和使用。通过合理使用 Loader 和 Plugin，可以实现对不同类型文件的处理和构建过程的扩展，以满足项目的需求和优化目标。

webpack 热更新的实现原理？

webpack 的热更新（Hot Module Replacement，HMR）是一种在开发过程中实现实时更新代码和模块的机制。它能够使得在不刷新整个页面的情况下，将修改的代码和模块部分更新到正在运行的应用程序中。

以下是 webpack 热更新的基本实现原理：

1. Webpack Dev Server：webpack-dev-server 是一个基于 Express 的开发服务器，它使用了 webpack 的编译和打包能力，配合热更新实现了实时刷新和模块热替换的功能。

2. HMR Runtime：Webpack 在编译过程中会生成用于热更新的 HMR Runtime 代码。这段代码会注入到客户端应用程序中，负责处理热更新的逻辑。

3. WebSocket 通信：Webpack Dev Server 和客户端之间通过 WebSocket 建立长连接，实现实时的双向通信。

4. 构建更新的代码块：当一个模块发生变化时，Webpack Dev Server 会重新编译该模块，并生成一个更新的代码块。

5. 发送更新通知：Webpack Dev Server 通过 WebSocket 向客户端发送更新通知，告知客户端有哪些模块发生了变化。

6. 客户端更新处理：客户端收到更新通知后，根据更新的代码块信息，使用 HMR Runtime 在运行时更新相应的模块。

7. 应用程序更新：经过热更新处理后，客户端应用程序的界面和状态会实时更新，而不需要刷新整个页面。

总结来说，webpack 的热更新通过与 Webpack Dev Server 的配合，使用 HMR Runtime 和 WebSocket 实现了实时刷新和模块热替换的功能。它能够提高开发效率，减少开发过程中的刷新和重建时间，同时保持应用程序的状态和用户交互。开发者可以在 webpack 的配置中启用热更新功能，以便在开发过程中更快地进行代码修改和调试。

Babel 的原理是什么?

Babel 是一个广泛使用的 JavaScript 编译器，用于将高版本的 JavaScript 代码转换为向后兼容的低版本代码。它的主要原理可以总结为以下几个步骤：

1. 解析（Parsing）：Babel 首先将输入的源代码解析为抽象语法树（AST），它会将代码解析成一种结构化的数据表示形式，以便于后续的处理和转换。

2. 转换（Transformation）：Babel 将 AST 进行遍历，并根据预先定义的插件或预设规则，对其中的节点进行转换。这些转换可以是将新语法转换为旧版本的 JavaScript 代码，应用编译器的优化规则，添加特定平台的兼容性补丁等。转换过程中可以根据需要进行增删改查的操作，使得开发者可以自定义需要的转换逻辑。

3. 生成（Code Generation）：经过转换后，Babel 将修改后的 AST 重新生成为目标代码，即转换后的 JavaScript 代码。生成的过程中会将 AST 转化为字符串形式的代码，并进行必要的格式化和缩进等处理，最终生成输出文件。

Babel 的核心原理是通过解析源代码、应用一系列插件或预设规则，对 AST 进行转换，并最终生成目标代码。通过这个过程，开发者可以使用最新的 JavaScript 特性和语法，而不必担心兼容性问题，因为 Babel 能够将其转换为较低版本的 JavaScript 代码，以确保在不同的浏览器或环境中都能够正常运行。Babel 的灵活性和可扩展性使得它成为了现代 JavaScript 开发中不可或缺的工具之一。

使用缓存注意事项

在使用缓存时，以下是一些需要注意的重要事项：

1. 缓存一致性：确保缓存中的数据与源数据的一致性。如果源数据发生了变化，缓存应该及时更新，以避免使用过期或无效的数据。

2. 缓存策略：选择合适的缓存策略以满足应用需求。不同的数据可能需要不同的缓存策略，包括缓存的过期时间、缓存更新机制等。

3. 缓存失效处理：当缓存失效时，需要考虑如何处理。可以重新加载数据，更新缓存，或者向用户显示错误信息。确保在缓存失效时能够正确处理，以避免不一致的数据或错误的结果。

4. 缓存容量限制：对缓存进行合理的容量管理，避免过多的数据存储在缓存中导致内存占用过大。可以考虑使用淘汰策略，如最近最少使用（LRU）等，来管理缓存中的数据。

5. 缓存安全性：对于敏感数据或对安全性要求较高的数据，需要谨慎处理缓存。确保适当的数据加密、访问控制和权限验证，以保护缓存中的数据安全。

6. 缓存的性能测试和监控：定期进行性能测试和监控，以确保缓存机制对系统性能的实际提升，并及时发现和解决缓存相关的性能问题。

7. 清理过期缓存：定期清理过期的缓存，以释放内存资源并确保缓存的及时更新。

8. 考虑缓存击穿和缓存雪崩：缓存击穿是指在高并发情况下，一个缓存失效导致大量请求直接访问后端数据库或服务，造成性能问题。缓存雪崩是指缓存中大量数据同时过期，导致大量请求直接访问后端，造成系统崩溃。需要采取措施防止和应对这些问题，如使用互斥锁、设置合适的缓存过期时间等。

总之，使用缓存需要综合考虑数据一致性、缓存策略、缓存失效处理、安全性、性能等方面的因素。合理而谨慎地使用缓存，可以显著提高系统性能和用户体验。

oss 和 cdn 什么区别

阿里云 OSS（Object Storage Service）和 CDN（Content Delivery Network）是两种不同的云服务，用于不同的用途，但在某些情况下它们可以一起使用来提供更好的性能和用户体验。

OSS（Object Storage Service）：

OSS 是一个用于存储和管理对象（如文件、图片、视频等）的云存储服务。它的主要特点是高可用性、可扩展性和安全性。你可以将各种类型的文件上传到 OSS 存储桶中，并通过生成的 URL 进行访问。OSS 适合用于数据的长期存储、备份、归档等需求。

CDN（Content Delivery Network）：

CDN 是一种用于加速内容传输的网络架构。CDN 的主要目标是提高用户访问网站或应用时的加载速度和响应时间。CDN 通过在全球分布的节点上缓存内容（如图片、CSS、JavaScript 等静态资源），使用户能够从离他们更近的节点访问这些资源，从而减少了加载时间。CDN 还可以通过减少源服务器的负载，提高整体的可用性和稳定性。

区别：

1. 用途不同： OSS 主要用于存储和管理数据对象，而 CDN 主要用于加速静态资源的分发。

2. 数据存储 vs. 加速分发： OSS 提供数据存储服务，将数据存储在云端；CDN 提供数据加速分发服务，将静态资源缓存在分布式节点上，加速用户访问。

3. 数据类型： OSS 可以存储各种类型的对象数据，而 CDN 主要用于缓存静态资源，如图片、CSS、JavaScript 等。

4. 定价模式： OSS 通常按照存储容量和网络流量计费，而 CDN 则按照流量计费。

5. 协同使用： 在一些场景下，你可以将 OSS 和 CDN 结合使用，通过将存储在 OSS 中的静态资源缓存到 CDN 节点上，从而更有效地提供内容加速。

总之，OSS 和 CDN 是两种不同的服务，分别用于数据存储和内容加速，但它们可以在某些情况下协同使用，以提供更好的性能和用户体验。

Spring Boot开发中，经常听到的PO、VO、DAO、BO、DTO、POJO到底是什么？

多线程和多进程哪个更高效

进程线程死锁

restful 接口规范是什么？

TODO

说说sourcemap的原理？

TODO

说说你对SPA的理解