前端优化重构动作记录

项目及改造：

1. ts项目改造

2. 单页面改造多页面

3. webpack拆包优化

4. 运营页面iframe加载配置

5. UT能力构建

6. 打点能力构建

7. 用户前后端敏感数据加密国密改造

微重构动作：

变量类型约束：接口出入参结构化，跨页面、文件传递的数据结构化；

所有业务异常提示统一弹窗处理（dialogUtil）

http请求出入参拦截处理。入参统一处理全局参数的拼接，出参拦截器内错误通用错误码异常。

Vue文件内常量提取：export default Vue.extend({})内不允许出现魔鬼产量。

代码逻辑分层：constant/config; util; service；component; view；逐步贴近业务逻辑。component及view内的vue文件，尽量减少功能实现类的js/ts代码，保留的变量和函数仅用于响应式数据及交互响应。对视图层代码文件瘦身。

store全局变量瘦身剔除。优先通过props父子组件传值。对于环境相关的全局信息，可以通过cacheUtil、urlUtil来管理；

mixin里的代码，通过提取到service层，对业务层逻辑代码进行组织；vue2不推荐使用mixin特性，vue3优先实现组合式函数来实现service层的代码。

Vue项目编码基本要求：

1. 禁止使用mixins混入。 方法难以跟踪。

2. 严格控制store全局变量的引入。对于子场景下的局部变量跨文件传递，可通过store/module的形式隔离控制。

3. 不可以在业务代码中直接对缓存（localStorage/sessionStorage/cookie)进去读写的操作，通过项目统一的工具类来操作。

4. 对于跨文件使用的变量，务必定义对应的数据类型。

5. 对于工具类的import引入，请引入具体方法而不是整个文件。