企业级项目下css处理痛点
在企业级项目中，CSS 处理可能会遇到以下痛点：
- 样式冲突：在大型项目中，多个团队成员同时编写样式可能会导致样式冲突的问题。如果没有良好的规范和组织结构，不同开发者编写的 CSS 规则可能会相互冲突，导致样式错乱或覆盖。
- 样式复用和维护困难：在企业级项目中，样式需要被多个模块和组件共享和重用。如果没有合适的样式管理策略，样式的复用和维护会变得困难，增加了工作量和时间成本。
- CSS 文件体积过大：随着项目规模的增大，CSS 文件可能会变得非常庞大，导致加载速度变慢。这会影响用户体验，并且增加了维护困难。
- 全局污染和选择器权重问题：全局污染是指样式定义的选择器过于宽泛，影响了其他组件的样式。另外，选择器的权重问题可能会导致样式无法正确覆盖，需要使用更高的权重或者使用
!important规则来解决。 - 缺乏可读性和可维护性：如果没有良好的命名约定和组织结构，CSS 文件可能会变得难以理解和维护。这会增加开发者在修改和扩展样式时的困惑和错误。
针对这些痛点，可以采取以下解决方案来改善 CSS 处理：
- 使用模块化的 CSS：将 CSS 模块化，使用类似于 CSS Modules 或 CSS-in-JS 的工具来避免全局样式冲突，并提供更好的封装和复用性。
- 使用预处理器：像 Sass 或 Less 这样的 CSS 预处理器提供了更好的抽象能力和组织结构，使得样式文件更具可读性、可维护性，同时提供了变量、嵌套、混合等功能。
- 组件化的样式：将样式与组件关联起来，使其成为组件开发的一部分。这样可以实现更好的样式复用和封装，并减少全局污染的风险。
- 优化 CSS 文件体积：通过使用代码拆分、压缩、去除不必要的样式和选择器，以及使用 CSS 预加载等技术手段，来减小 CSS 文件的大小，提高加载速度。
- 采用命名规范和组织结构：制定良好的 CSS 命名规范，使用合适的选择器命名方式，遵循一致的组织结构和文件命名规则，提高样式文件的可读性和可维护性。
通过采用上述解决方案，可以有效地应对企业级项目中的 CSS 处理痛点，提高样式的可维护性、复用性和性能。
Vite和Webpack的优缺点
Vite 和 Webpack 都是用于构建现代化 JavaScript 应用程序的工具，它们有各自的优点和缺点。
下面是它们的主要优缺点：
Vite 的优点：
- 快速的开发启动：Vite 使用了 ES 模块的原生支持，通过使用浏览器原生的模块系统，能够更快速地启动开发服务器。这使得 Vite 在冷启动和热更新方面表现更好。
- 构建速度快：Vite 使用了一种基于 Rollup 的构建方式，在构建过程中只编译修改的文件，而不是整个项目。这样可以大大加快构建速度。
- 开发体验好：Vite 使用了简单的 HTML 导入方式，无需配置大量的额外模块加载器，开发者可以直接导入并使用 npm 包，减少了繁琐的配置过程。
- 支持热模块替换（HMR）：Vite 支持对模块级别的热模块替换，可以在不刷新页面的情况下实时预览修改结果，提供了更好的开发体验。
Vite 的缺点
- 生态系统相对较新：相对于 Webpack，Vite 的生态系统还不够成熟，一些常用的插件和工具可能还没有完全适配或支持。
- 部分功能可能不稳定：由于 Vite 是一个较新的项目，一些功能可能仍处于实验性阶段，存在潜在的不稳定性或兼容性问题。
Webpack 的优点
- 成熟的生态系统：Webpack 是一个经过时间验证的工具，具有庞大而成熟的生态系统，有众多的插件和工具可供选择和使用，可以满足各种复杂的需求。
- 强大的扩展性：Webpack 提供了丰富的配置选项和插件系统，具备很好的灵活性和可扩展性，能够满足各种场景下的定制需求。
- 广泛的应用：Webpack 在大型项目和复杂应用中广泛使用，已经通过实践得到了验证，并有很多成功的案例。
Webpack 的缺点
- 开发启动慢：由于 Webpack 需要处理整个应用的构建，启动速度相对较慢，尤其是在较大的项目中。
- 配置复杂：Webpack 的配置相对较为复杂，需要深入理解各种配置项和插件的使用方法，对于初学者来说上手难度较高。
- 构建速度慢：随着项目规模的增大，Webpack 的构建速度可能会变慢，特别是在处理很多文件或复杂的加载器链时。
总结而言，Vite 在开发体验、开发启动速度和构建速度方面有明显的优势，适用于小到中型的项目；而 Webpack 则具备强大的扩展性和丰富的生态系统，适用于大型项目和复杂应用。
理解JavaScript闭包机制
闭包是指在 JavaScript 中，内部函数可以访问外部函数作用域的特性。
当一个内部函数引用了外部函数的变量或参数，即使外部函数已经执行完毕，这些变量或参数仍然会被内部函数保留在内存中，形成了闭包。
闭包的实现机制如下
- 当一个函数内部定义了另一个函数时，内部函数会持有对外部函数作用域的引用。
- 如果内部函数被保存在外部作用域之外的变量中，它仍然可以访问和操作外部函数的变量和参数。
- 外部函数执行完毕后，其内部函数仍然可以通过闭包引用外部函数的作用域，因此外部函数的变量不会被销毁，而是保存在内存中。
闭包的应用场景和优势
- 封装私有变量：通过闭包，可以创建私有变量，使其只能在闭包内部访问，隐藏细节并提供更好的封装性。
- 保持函数状态：闭包可以保持函数的状态，即使函数执行完毕，状态仍然存在，方便在异步操作中使用。
- 实现函数柯里化和高阶函数：通过在闭包中保存一部分参数，可以将一个多参数函数转化为一个接受较少参数的函数，实现函数柯里化。
- 缓存数据：闭包可以用于缓存计算结果，避免重复计算，提高性能。
- 解决循环中的问题：使用闭包可以解决循环中的异步问题，确保在异步操作中访问到正确的变量值。
需要注意的是，过多地使用闭包可能导致内存泄漏问题，因为闭包会一直保持对外部变量的引用，导致这些变量无法被垃圾回收。在使用闭包时，应注意合理使用和及时释放不需要的引用，以防止潜在的内存泄漏。
说下BFC
BFC 是块级格式化上下文（Block Formatting Context）的缩写，是 CSS 中的一种布局概念。BFC 是一个独立的渲染区域，它决定了内部子元素如何布局以及与外部元素之间的关系。
BFC 的形成条件
- 根元素（HTML）或包含根元素的元素；
- 浮动元素（float 不为 none）；
- 绝对定位元素（position 为 absolute 或 fixed）；
- 行内块元素（display 为 inline-block）；
- 表格单元格（display 为 table-cell）；
- 表格标题（display 为 table-caption）；
- overflow 值不为 visible 的块级盒子。
BFC 的特性和作用
- 清除浮动：当一个元素的子元素都浮动时，父元素没有设置高度，会导致父元素塌陷。设置父元素为 BFC 可以清除浮动，使得父元素包裹浮动子元素。
- 阻止外边距合并：在普通流中，相邻块级元素的垂直外边距会产生外边距合并现象。而处于不同的 BFC 中的块级元素则不会发生外边距合并。
- 自适应两栏布局：通过创建两个相邻的块级元素，分别设置为浮动和 BFC，可以实现简单的自适应两栏布局。
- 控制内部元素布局：BFC 内部的子元素会受到 BFC 外部的影响，但是 BFC 内部元素互相之间布局不受影响，使得布局更加可控。
创建 BFC 的方法
- 设置元素的
overflow属性值为非visible。 - 使用浮动（设置元素的
float属性为left或right）。 - 使用绝对定位（设置元素的
position属性为absolute或fixed）。 - 将元素设置为表格布局相关属性（如
display: table-cell；display: table-caption等）。 - 在根元素中。
需要注意的是，BFC 可以解决一些常见的布局问题，但过度使用 BFC 也可能带来其他问题，如嵌套过深导致性能下降。在具体应用时，需要根据实际情况进行权衡和选择。
