面试问题(连载。。。。)

flexbox 和 crid 的区别

1. 布局维度与核心特性

• Flexbox（弹性盒子）
  • 一维布局：专注于行或列的线性排列，适合单方向（水平或垂直）的布局需求。
  • 动态分配空间：通过 flex-grow、flex-shrink 和 flex-basis 控制子元素在主轴上的伸缩与对齐，适合响应式设计。
  • 对齐灵活：支持 justify-content（主轴对齐）、align-items（交叉轴对齐）等属性，轻松实现居中、等分间距等效果。
  • 典型场景：导航栏、卡片列表、表单元素排列等。
• CSS Grid（网格布局）
  • 二维布局：同时控制行和列，适合复杂的网格结构（如杂志排版、数据表格）。
  • 精确控制：通过 grid-template-columns、grid-template-rows 和 grid-area 定义网格区域，实现像素级控制。
  • 重叠与嵌套：支持子网格（subgrid）和重叠元素，适合复杂设计需求。
  • 典型场景：全屏布局、复杂表单、图片画廊等。

2. 关键区别对比

3. 如何选择？

• 用 Flexbox 当：
  • 需要单方向排列（如导航栏、卡片列表）。
  • 动态分配剩余空间（如自适应按钮组）。
  • 快速实现居中、等分间距等效果。
• 用 CSS Grid 当：
  • 需要二维布局（如杂志排版、全屏布局）。
  • 需要精确控制行高、列宽和网格区域。
  • 需要实现重叠元素或子网格。

rem 和 em 和 px  的区别

1. 定义与基准

• em（相对父元素字体大小）
  • 基准：相对于当前元素的直接父元素的 font-size 值计算。
  • 继承性：如果父元素未显式设置 font-size，会逐级向上查找，直到根元素（html）或默认值（通常为 16px）。
• rem（相对根元素字体大小）
  • 基准：始终相对于根元素（html）的 font-size 值计算，不受父元素影响。
  • 一致性：无论嵌套层级多深，rem 的计算基准始终是 html 的 font-size。
• px  数值固定  不会因为响应式 变化

2. 核心区别对比

css可复用性

一、CSS 可复用性的核心价值

1. 减少代码冗余
   避免重复编写相同的样式规则（如按钮、间距、颜色等），降低维护成本。
2. 提升开发效率
   通过复用模块化样式，快速构建新组件或页面。
3. 保持设计一致性
   统一复用的样式（如间距单位、配色方案）能确保项目视觉风格一致。
4. 增强可维护性
   修改一处即可全局生效，避免因样式分散导致的遗漏或冲突。

二、实现 CSS 可复用性的关键方法

1. 使用 CSS 预处理器（Sass/Less）

• 变量（Variables）
  定义可复用的颜色、字体、间距等值，集中管理设计规范。

• 优点：
  • 模块化样式，复用性强。
  • 避免选择器优先级问题。

 Pinia与Vuex的核心区别

1. ‌架构设计‌

   • ‌Vuex‌：采用集中式架构，所有状态存储在单一全局状态树中，通过mutations和actions修改状态，适合复杂项目。
   • ‌Pinia‌：采用去中心化模块化设计，每个模块独立管理状态，直接通过actions修改状态，更符合Vue 3的Composition API风格。

2. ‌API简洁性与TypeScript支持‌

   • ‌Vuex‌：API较繁琐，需区分mutations（同步）和actions（异步），TypeScript支持需额外配置。
   • ‌Pinia‌：简化API，无需mutations，原生支持TypeScript，类型推断更完善。

3. ‌模块化管理‌

   • ‌Vuex‌：通过modules分割状态，但嵌套和类型管理复杂。
   • ‌Pinia‌：每个Store独立声明，组合灵活，无需命名空间。

4. ‌性能与体积‌

   • ‌Vuex‌：体积较大但稳定，状态变更会重新计算所有getters。
   • ‌Pinia‌：体积更小（约1KB），利用Proxy优化状态追踪，性能更优。

5. ‌适用场景与生态‌

   • ‌Vuex‌：适合Vue 2或复杂项目，官方维护，生态成熟。
   • ‌Pinia‌：专为Vue 3设计，轻量灵活，推荐用于新项目。

‌总结‌：Pinia是Vuex的现代替代方案，尤其在Vue 3项目中优势明显，而Vuex更适合需要严格状态管理的遗留系统。

Pinia的基本使用-CSDN博客

pinia-vue3状态管理工具-CSDN博客

i18n到底是个啥？

i18n的关键特点

1. 动态适配：程序不修改内部代码即可根据不同语言及地区显示对应界面。
2. 资源分离：将文本、日期、数字格式等本地化元素从代码中抽离，形成独立资源文件（如JSON、Properties文件）。
3. 多语言支持：通过资源文件管理不同语言的翻译文本，实现界面语言的动态切换。

i18n的技术实现

• 资源文件管理：不同语言的文本存储在独立文件中（如en-US.json、zh-CN.json），通过键值对映射实现文本调用。
• 代码集成：通过插件或库（如Vue I18n、React-i18next）在代码中调用翻译文本，例如Vue I18n的$t方法。
• 动态切换：根据用户选择或系统环境（如浏览器语言）动态加载对应语言资源文件，实现界面语言实时切换。

i18n的应用场景

1. 全球应用开发：例如电商网站需支持中文、英文、法文等多语言界面，通过i18n实现文本动态切换。
2. 跨文化产品设计：如软件需适配不同地区的日期格式（MM/DD/YYYY与DD/MM/YYYY）、货币符号（$与¥）等文化差异。
3. 组件库国际化：前端组件库（如Ant Design）通过i18n支持多语言，开发者可直接调用翻译文本。

i18n与本地化（L10n）的区别

• i18n（国际化）：关注产品架构设计，使其具备支持多语言的能力，重点在于代码与资源的分离。
• L10n（本地化）：针对特定地区优化产品，包括翻译文本、调整日期格式、适配文化习惯等，重点在于资源适配。

i18n的技术优势

1. 减少代码冗余：通过资源文件集中管理文本，避免在代码中硬编码多语言文本。
2. 提升开发效率：新增语言时只需添加资源文件，无需修改核心代码。
3. 增强用户体验：用户可根据需求切换语言，提升产品全球适用性。

vite   前端构建工具， 和webpack  一样

Vite 是一种现代化的  前端构建工具，由 Vue.js 的作者尤雨溪开发，旨在提供快速的开发体验和优化的构建流程，专为现代前端框架（如 Vue、React 等）设计。以下从核心特性、技术优势、应用场景等方面详细介绍：

与 Webpack 的对比

核心特性

1. 极速冷启动
   Vite 利用浏览器原生 ES 模块（ESM）能力，在开发时无需打包即可启动服务，实现毫秒级启动。传统工具（如 Webpack）需预先打包整个项目，启动时间较长，而 Vite 仅在浏览器请求模块时动态加载和编译文件，极大缩短了启动时间。

2. 高效热更新（HMR）
   Vite 的模块热替换（HMR）功能响应极快，修改代码后仅重新加载受影响的模块，无需刷新整个页面。这得益于其高效的依赖追踪和按需编译技术，确保开发者能即时预览更改效果，提升开发效率。

3. 按需编译与优化构建

   • 开发模式：按需加载和编译文件，避免全量打包，提升启动和热更新速度。
   • 生产模式：使用 Rollup 进行打包，支持代码分割、Tree-shaking、压缩等优化技术，生成高效、优化的最终构建产物。

4. 丰富的插件生态
   Vite 支持与 Rollup 兼容的插件，开发者可通过插件自定义开发和构建流程，集成第三方工具或扩展功能。例如，通过插件支持 TypeScript、PostCSS、LESS、SASS 等预处理器。

5. 多框架支持
   Vite 原生支持 Vue 3，并通过插件支持 React、Svelte、Preact 等框架，满足不同项目的开发需求。

技术优势

1. 提升开发效率
   Vite 的极速启动和高效热更新功能显著减少了等待时间，开发者能更快地看到代码修改后的效果，特别适合需要快速迭代的项目。

2. 优化构建性能
   Vite 在生产环境中使用 Rollup 进行打包，生成的代码体积更小，性能更高。通过 Tree-shaking、代码分割等技术，进一步优化了应用的加载性能。

3. 降低配置复杂度
   Vite 提供了开箱即用的默认配置，开发者无需花费大量时间在配置文件上。大部分常见配置已经默认设定，开发者可在需要时按需定制。

4. 支持现代前端特性
   Vite 原生支持 TypeScript、JSX/TSX 等现代前端特性，开发者无需额外配置即可直接使用。同时，它还支持 CSS 预处理器、动态导入等高级功能。

应用场景

1. 快速开发原型和小型项目
   Vite 的极速启动和高效热更新功能使得开发者能快速验证想法，适合需要快速迭代的项目。

2. 构建大型前端应用
   Vite 的按需编译和优化构建功能能有效处理大型项目的复杂依赖关系，确保构建性能和开发效率。

3. 支持现代前端框架
   Vite 与 Vue、React 等主流前端框架紧密配合，提供了一系列的工具和插件，使得开发者能更好地集成和使用这些框架。

ant-design-vue ui 库

  ant-design-vue-jeecg: jeecgboot-前端

《JeecgBoot系列》Ant-Design-Vue开发配置记录_ant-design-vue-jeecg-CSDN博客

print 打印

 window.print() 前端实现网页打印详解

前端开发中，使用 JavaScript 的 window.print() 方法可以触发浏览器的打印功能。这个方法会打开浏览器的打印对话框，允许用户选择打印机、调整打印设置，然后进行打印。 

 mapbox

官网： Mapbox Docs

JS语法模块：　Mapbox GL JS | Mapbox

Openlayer、Leaflet相关应用：4、leaflet · 语雀  

一、认识 Mapbox

 地图引擎(WebGIS)之MapBox的基础使用-CSDN博客
Mapbox 是一个强大的地理位置数据平台，旨在为开发者提供创建、定制和集成地图及位置相关功能的工具。它通过提供一系列灵活的开发工具和 API，帮助开发者在应用程序中实现高度定制化的地图显示、地理编码、路线规划、导航以及数据可视化等功能

访问 Mapbox 官网: https://www.mapbox.com/
阅读 Mapbox 文档: https://docs.mapbox.com/
 

开源GIS中间件

1. GeoServer
   • 功能：GeoServer是一个用Java编写的开源GIS服务器，用于共享和处理地理空间数据。它支持标准的地理空间数据格式（如Shapefile、GeoJSON和KML）以及开放的地理空间标准（如OGC标准）。
   • 优势：通过用户界面即可发布地理数据，无需编写代码，支持矢量和栅格数据，适合快速部署和共享地理信息。
   • 应用场景：需要发布地理数据服务、支持多格式数据访问的项目。
2. MapServer
   • 功能：MapServer是一个开源平台，用于发布空间数据和创建交互式地图应用程序到Web。它支持从多个层生成地图，包括基础图像和空间数据集，并提供智能标签功能。
   • 优势：成熟稳定，支持多种空间数据格式，适合生成地图图块及其MapCache扩展。
   • 应用场景：需要生成地图图块、支持多种数据格式的项目。
3. QGIS Server
   • 功能：QGIS Server是一个FastCGI/CGI应用，用C++写成，可与其他后端程序协作，提供与QGIS桌面版相同的功能，但作为服务器运行。
   • 优势：与QGIS桌面版无缝集成，适合需要桌面与服务器端功能一致的项目。
   • 应用场景：已有QGIS桌面版使用经验，需要服务器端扩展功能的项目。

后端开发框架

1. GeoDjango
   • 功能：GeoDjango是Django应用程序框架的一组空间扩展，提供强大的GIS功能，支持空间数据库（如PostGIS），并提供了丰富的地理空间查询和序列化功能。
   • 优势：集成度高，与Django生态系统无缝衔接，适合快速开发Web GIS应用。
   • 应用场景：使用Python/Django进行Web GIS开发，需要高效空间查询和序列化的项目。
2. Node.js GIS框架
   • 功能：Node.js采用事件驱动模型，适合构建强大且高度可扩展的应用程序，能够处理大量请求。
   • 优势：易于使用，社区活跃，适合需要实时交互和高并发的GIS应用。
   • 应用场景：需要实时数据交互、高并发处理的Web GIS应用。
3. Rust GIS后端
   • 功能：Rust以其卓越的性能和高度安全性著称，适合处理大规模地理数据，特别是在需要高并发和低延迟的场景下。
   • 优势：内存安全和线程安全，生态系统活跃，拥有许多用于GIS开发的优秀库和工具。
   • 应用场景：需要处理大规模地理数据、对性能和安全性要求较高的项目。

数据库与中间件

1. PostGIS
   • 功能：PostGIS是PostgreSQL数据库的扩展，支持空间查询，包括邻近度、半径、边界框、碰撞/重叠检测等。
   • 优势：功能强大，支持丰富的空间操作，是Web GIS项目中常用的空间数据库。
   • 应用场景：需要存储和管理大量地理空间数据的项目。
2. GeoWebCache
   • 功能：GeoWebCache是一个Java Web应用程序，用于缓存来自各种来源（例如OGC WMS）的地图图块，以加速和优化地图图像的传递。
   • 优势：提高地图访问速度，减少服务器负载，适合高并发访问的GIS应用。
   • 应用场景：需要优化地图图块加载速度、减少服务器压力的项目。