前端项目重构的深度思考和复盘( 三 ) _前端

拆分子系统(微前端)

当然我们始终需要保持一个理念: 局部最优, 误增繁复.

基于已有的工程经验沉淀, 需要对工程化配置做进一步升级, 优化

这种情况主要是在项目发展稳定之后, 需要思考的重构方向, 比如早期由于业务场景单一, 很多公共配置都写在业务代码里的, 随着业务复杂之后, 很多模块都需要使用改配置或者变量, 比如:

// a.jsconst publicDomain = 'https://dooring.vip';const serverUrl = 'https://xxx.cn';// b.jsconst publicDomain = 'https://dooring.vip';// c.jsconst appid = 'xxxxxxxx';const website_Logo = 'http://h5.dooring.cn/logo.png';

对于这种零散且固定的变量, 未来可能会被多个页面或者模块复用, 所以为了降低成本, 我们可以把这些通用配置提取到外层, 作为公共配置文件, 这样后期新项目也能享受开箱即用的配置体验.
拿我的亲身经验, 比如几年前我开发的低代码项目H5-Dooring, 有一些零散的配置信息分散在项目的各个角落, 后面经过几次重构优化之后, 整个项目只需要在配置文件中轻松配置内容, 即可一键控制页面的走向, 这里分享一下优化过后的配置文件:

// h5-dooring全局配置文件define: {START_ENV,lang,// 配置h5端访问的域名h5Domain: 'h5.dooring.cn',// 设置当前版本号curVersion: dooringVersion,// 备案信息copyright: 'xxxxx-3',// 是否显示更新弹窗showUpdateModal: true,// 更新日志updateList:["1. 新增表格组件","2. 国际化优化","3. 表单详情页支持内部滚动","4. 个人图片库性能优化","5. 下载代码功能优化"],// 网站logo地址logo: 'http://cdn.dooring.cn/dr/logo.ff7fc6bb.png',// 入口页面是否展示赞助品牌和版权提示showAdsAndTip: true,// 登录时获取登录码的二维码qrcode: 'http://cdn.dooring.cn/dr%2Fcode1.png',// 友情链接展示friendLinks: [{name: 'V6',link: 'http://v6.dooring.cn/beta',title: '可视化大屏编辑器'},{name: 'Power',link: '/powernice',title: '文档编辑器'}],// 默认语言defaultLocale: 'zh-CN',langMap: langMap},