重构的些许收获

题图:Pixabay

这个项目开始之初,赶时间上线。很多地方基本没怎么管代码规范,直到一期完毕回过头来看之前写的代码,不忍直视。为了之后接手的人能更加轻松,也为了自己之后debug更加顺手,边开始二期的部分需求,边重构一期的部分代码,还是有部分收获。

项目技术栈是:

nodejs

javascript

react

redux

react-router

webpack

之前的架构是react-router2,后面换成了react-router4。代码看起来更加的模块化。

入口模块化

项目本身是一个系统合集,用户根据权限的不同会展示不同的菜单导航。目前是有3个部分:

每个模块单独的action、router、reducer与server。

webpack切片打包

路由

根路由只需指向每个模块的路由文件即可

权限、接口转发

因为各个系统的后端不是同一批人,部署的机器也不是固定的,于是用 node 做了一层接口转发,前端页面访问固定的地址,然后通过 node 去访问不同的后端机器。同时权限部分需要携带cookie跨域,正好 node 一起做了。

测试、正式

这是之前的区分线上线下打包的地址,由于webpack没有做过多的设置,于是暂时用这样的方式区分打包环境。但是我更想用 shell 脚本来区分,可以更方便的直接调试线上接口。

枚举

前端静态枚举值

不允许页面出现以下字样:

1,2,3 ...int类型

'成功','失败',... 等字符类型

错误码 ,规范化错误提示

状态值 ,规范前端业务代码

前后端字段映射

前端是驼峰命名法,后端是下划线“_”,所以需要做一个映射,同时也更加方便debug。暂时用如下笨方法。这一块写在node那层比较好。

API层

目前 tools.buildParams(parameters) 这一块的传参还在纠结以对象传还是以数组传,以数组传直接传 arguments 就可以,缺点是传参以黑盒来传,无法判断参数,无法快速debug;优点是_fetchxxx里的参数也不需要列出,直接一个对象就行。 以对象传需要自己构建,缺点是需要重复写一次参数;优点是更加直观。

缓存

统一缓存命名规范,防止缓存冲突

Feature

模块按需加载,自定义各模块间通信机制

模块注册脚手架,前端接入提供注册工具,模块单独部署,动态注册,独立 CDN。编译由服务端统一执行

服务端项目代码自身预编译,提高执行性能、降低部署风险

编译结果统一保存,支持按分支名切换、回滚

Flag

还有很多好玩的东西可以搞,每一次的优化都是对自身的一次重构。2018 fighting!!!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180102G00XJB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券