最近在重构jsp项目，很幸运参与了这次的重构工作，积累重构的经验，同时在重构工作中让我重新对前端架构有的新的认识。
在JSP项目重构前端时，需要考虑以下问题：
-
选择前端框架：选择适合项目需求的前端框架。例如，React、Vue、Angular等。如果你需要从头开始构建一个全新的前端，可以选择使用现代化的JS框架来完成。
-
技术选型：选择适合的技术栈，例如ES6+、TypeScript、Less/Sass等。并且尽可能使用现代的技术标准和最佳实践。
-
设计风格：选择适合项目需求的设计风格，例如Material Design、Bootstrap等。并且要保证整个项目的UI设计风格一致性。
-
数据传输格式：确定前后端数据交互的方式，例如使用JSON格式，RESTful API等。
-
构建工具：选择适合前端项目的构建工具，例如Webpack、Gulp等。并且要保证代码质量和可维护性。
-
兼容性：考虑不同浏览器之间的兼容性问题，并根据项目情况选择控制浏览器的版本范围。
-
路由和组件设计：确定前端路由和组件的设计方案，以便更好地划分页面和模块，并且容易扩展。
-
性能优化：考虑前端性能优化，例如代码压缩、懒加载、CDN等。
-
测试：前端项目也需要进行自动化的单元测试和功能测试，以确保代码的质量和稳定性。
总之，在重构JSP项目前端时，需要充分考虑项目需求和现代前端技术的最佳实践，并且在设计和实现过程中，保证整体一致性，易于维护和扩展。
上面是 gpt 给出的回答，做参考。
架构设计尽可能简单、易懂。
- 不做过度设计，但要保留出入口和可扩展。比如接口调用的封装，业务组件逻辑的封装。
接口调用为什么要封装好几层，找个接口路径跳来跳去找半天，api调用就写到业务代码里面，直观且简单。
- 组件封装要注重同一性（开发完整的业务组件、可配置化）
当开发一个查询列表分页页面的时候，可以进行从上到下的设计，给组件注入的参数包括：查询条件、列表展示字段（可扩展：渲染jsx，功能按钮操作等）、接口路径，参数整理完成之后又一个前置组件接收，然后分发给查询字段组件、列表组件、分页组件等。
- 轻量级
代码要清晰明了，简单直接的实现功能。
之前做一个系统，花了不少心思自顶向下设计，架构雏形雕刻出来的时候内心非常喜欢，后面维护扩展超级简单，基本就实现配置化了，不用写逻辑代码，“公式”已然做好。但是，小一年没写项目代码，再去看的时候，看着复杂的逻辑行云流水一般固若金汤，仿佛不想做过多的解释，我最牛逼！我花了时间去温习之前的代码设计，不禁又暗自感叹当时怎么设计的这么好，代码写的多一行浪费、少一行不行。我沉迷于自己的设计，忽然发现要是个小白上手，就有学习成本了，虽然可以从中学到一些东西，但是本来也可以很简单直接，现在我更倾向于简单快捷的实现业务需求，技术需求都是虚的，这玩意有点害人。
- 约定大于配置
重约定、轻配置。约定可以很多，配置要尽可能的简单，只暴露最重要的配置项，参数都要设置默认值。直观的表示就是，暴露给用户端的配置是极简的。
“模式”的背后就是约定，使用“模式”就是配置。
比如说：虚拟DOM，虚拟DOM就是一种模式，遵循约定进行配置。把html逆向解构成虚拟DOM，解构之后就可以对虚拟DOM进行增删改查一顿操作，避免直接修改DOM带来的性能问题，把最后加工完的虚拟DOM渲染成html。
const vnode = {
type: 'div',
props: {
id: 'hello'
},
children: [
/* 更多 vnode */
]
}
- 代码位置是区分垃圾代码和优秀架构的重要标志
代码谁都会写，为什么有的人就可以做架构？同样都能跑起来的项目，一个没代码设计的项目和有代码设计的项目哪个更好？
这是个问题。要做到业务代码和框架代码分离。
- 开发方式
老旧项目的前端重构一般采用渐进式，具体方式如下 开发上：前后端分离开发 部署上：前后端不分离部署
- 部署测试
重构项目部署问题，前端只提供编译后的静态文件，放到后端工程里面，由后端启动服务。
好久不写代码了，忽然写点代码手生了，手跟不上脑子。
但是，还是要多想！多思考！
我是 甜点cc，个人网站: blog.i-xiao.space/
唯有行动，才能战胜虚无！
公众号：【看见另一种可能】
