一、前端项目重构的原则和方式
1. 重构的基本原则
-
功能不变
重构的首要前提是在不改变外部行为的基础上改进内部结构，即保证原有功能保持不变。例如，在重构过程中必须确保用户体验和业务逻辑不受影响。
-
提高可维护性和可扩展性
通过优化代码结构、消除重复代码、提炼公共模块，使得代码更易阅读、修改和扩展。良好的重构能使新成员更快上手，并降低后续维护成本。
-
渐进式重构、小步快跑
建议分阶段、分模块进行重构，避免一次性大范围修改而引入风险。每次只重构一小部分，完成后充分测试，逐步推进整个项目的优化。
-
避免重写
重构并非对整个项目进行全盘重写，而是在原有代码基础上优化。这样既能减少风险，也能保留已有的业务逻辑。
-
完善测试和代码规范
在重构前后要编写并运行单元测试、集成测试等自动化测试，确保改动没有引入新问题。同时，采用ESLint、Prettier等工具统一代码风格，保证代码质量和一致性。
2. 重构的方法和流程
-
现状评估与目标规划
- 对现有项目进行全面评估（包括代码结构、重复代码、性能瓶颈等）。
- 明确重构目标，如提升性能、简化维护、降低耦合度等，并制定详细的重构计划。
-
模块化和组件化拆分
将庞大复杂的页面拆分为独立模块或组件，抽取公共逻辑和功能，形成可复用的代码单元。这种方式有助于逐步优化项目结构。 -
代码优化与重构技术
采用提炼函数、合并重复代码、拆分大模块、重命名变量等技术手段改善代码质量；同时合理利用现代打包工具（如Webpack、Rollup）和框架的模块化特性。
-
持续测试与版本管理
在每次小步重构后，使用版本控制（如Git）记录改动，及时回退；同时编写单元测试和回归测试，确保改动后功能依然稳定。
二、前端组件封装的原则
前端组件的封装旨在将独立的功能或UI元素抽象为可重用模块，达到高复用、低耦合和易维护的目标。主要原则包括：
1. 单一职责原则
-
只做一件事
每个组件应聚焦于单一功能或展示单一UI部分，职责单一便于理解和维护。例如，一个按钮组件只负责渲染按钮及处理点击事件。
2. 高内聚低耦合
-
内部自成一体
组件内部的状态和逻辑应高度内聚，而对外仅暴露必需的接口（如props、事件）。这样既能保证组件的独立性，又便于在多个页面或项目中复用。
3. 避免数据双向依赖和副作用
-
通过props和事件通信
组件应通过明确的接口接收外部数据（props）和反馈交互（事件、回调或插槽），而不直接操作父组件数据，避免数据双向依赖和副作用。
4. 样式隔离和结构清晰
-
避免样式冲突
组件的样式应尽量局部化（例如使用scoped CSS、CSS Modules或Shadow DOM），保证组件在不同环境下不会互相干扰。 -
规范命名和目录结构
采用统一的命名规范（如BEM），保持文件和目录结构清晰，方便维护和查找。
5. 可复用性和扩展性
-
灵活配置与插槽支持
组件应设计成既满足大部分场景的通用功能，又允许通过配置项或插槽（slot）实现特定定制，保证在不同业务场景下的灵活应用。
6. 组件间的隔离和解耦
- 内部逻辑隐藏
将组件内部实现细节封装起来，对外只暴露必要的操作接口，使得使用者无需关心组件内部具体实现，从而降低耦合度，便于后续维护和优化。
说说JavaScript中的数据类型？存储上的差别？
JavaScript原型，原型链 ? 有什么特点？
说说JavaScript中的事件模型
说说你对事件循环的理解
说说em/px/rem/vh/vw区别?
说说webpack的构建流程?
说说webpack的热更新是如何做到的？原理是什么？
说说如何借助webpack来优化前端性能？
如何提高webpack的构建速度？
说说 HTTP1.0/1.1/2.0 的区别?
说说HTTP 常见的状态码有哪些，适用场景？
说说地址栏输入 URL 敲下回车后发生了什么?
说说 Real DOM 和 Virtual DOM 的区别？优缺点？
说说React的事件机制？
说说对React Hooks的理解？解决了什么问题？
说说对Fiber架构的理解？解决了什么问题？
说说React Jsx转换成真实DOM过程？
手写代码： 手写 Promise 手写 Promise.all 手写防抖节流函数
