前端系统重构

开创者素材
2019.12.05 08:58:18


最近参加了一波规模较大的前端系统构建项目，有一些感悟和实用的经验想记录下来。首要分为以下几点：
一、前端系统架构方面
二、UI库挑选方面
三、代码结构方面
四、功用点完成方面
五、代码调试方面
六、bug解决方面
七、项目总结

下面，分点说一说吧。

前端系统架构
首先阐释一下项目布景。此次重构的意图是将原系统的功用悉数迁移到新系统中，之所以不挑选复用原系统，是因为

原有系统选用了angular1.x，angular2.x，vue等多个结构，给后期保护带来了很大困难，因此在评价时间成本的根底

上，挑选了重构的计划，一致运用react结构来对系统进行重构。
本项目选用create react app构建，一起运用了webpack构架，一起提供mock数据功用。
在项目搭建方面，本项目以react-router为基底，通过路由定位至每个页面；关于每个独自的页面，均包括：组件、

actions、reducer三个部分，一起选用了immutable的方式进行状态管理。
UI库挑选
本项目选用了一向运用的Ant Design结构，一方面考虑运用熟练性，一方面考虑和react的兼容性和配色问题。首要使

用的组件有：Form、Table、Modal、Upload、DatePicker、TimePicker等
代码结构
本项目运用create react app构建。
功用点完成
根据项目功用点，本项目大功用点首要分为以下几个：
4.1. toolbar
toolbar中首要包括：查询、挑选、重置这三个功用，运用的控件有：Form、Input、Select、Button、TimePicker等。
4.2. table

4.3. modal

代码调试
没有数据的时候，运用衔接原有项意图机器，将原有数据代理到本地进行开发，或者直接运用mock数据进行开发；在

接口开发完成后，将rd机器代理到本地进行调试，需要在package.json文件中进行开发环境的配置。

图5.1 proxy的配置实例
同时，为了方便接口更换调试，也将所有接口单独放在constant.js文件中，进行所有api的统一管理。

图5.2 控件中需要使用的接口
bug解决
6.1 对异常情况的考虑
对于前端来说，最频繁的异常情况出现在与后端交互时产生的数据结构的变动，所以在考虑这方面的异常情况时需要

尽量把情况考虑完全。
通过这个项目，我的经验总结如下：
首先，需要和RD沟通清楚，结合双方的情况进行数据结构的协商，这个过程既不能完全迁就前端也不能完全迁就后端

；比如，如果前端依赖了某个组件库进行开发，那么最佳的后端数据结构应该是符合这个组件库的，如此，前端就不

需要再做其他的处理。但是，事实上并非每次后端都可以提供最合适的数据结构，比如后端代码大规模继承了之前的

数据结构，或者是RD能力有限等等，如果遇到这种情况，前端也只能迁就后端对数据结构进行进一步的改造和处理（

常用方法有：object.keys, map, for…in 等）。但在这个项目中，由于前端统一使用了antd的组件库，因此如果每

个人都重写一边数据结构来契合组件库的需求的话，代价是很大而且无意义的，因此，就和后端就此问题进行了沟

（si）通（bi）。最终，终于在数据结构上达成了一致。。。。
第二，对数据为空情况的考虑。这个部分一定要细致，很细致，用我师兄的话说，一定要让自己的系统拥有很强的容

错性。可以和后端约定：空的数据都返回[]，但也一定要考虑后端还有可能返回：null, undefined等各种奇葩的情况

，所以在请求发送后，除了对返回码进行判断外，还需要对正确返回码中的数据进行额外的处理，比如，对数组的

length进行判断，或者简单粗暴的typeof判断等。除此之外，当涉及到数据层面的操作时，一定要考虑到数据返回

undefined或者null的情况，比如，当显示请求数据时，不能简单的采取{this.data.delivery_id}这种方式，而是需

要判断this.data是否存在，最好采用可以备选方案，比如三元运算符(this.data)?(this.data.delivery_id)????’-’)
这一点在开发H5页面时尤为重要。
项目总结
7.1 momentjs
7.2 antd框架实践
ant真的是很强大的一个框架，最近刚刚发布了3.0版本，此次也是使用了最新的版本进行开发。