【代码重构】公司研发的产品重构后心得总结


比较粗糙和浅显,我也只是入门级选手,一知半解,但就此记录一下。

重构评审会

重构理论基础
在这里插入图片描述
在这里插入图片描述

参考开源框架

1. AbpBase Web iview框架

(我参与的第一个项目就是用的这个框架,配合后端C#的AbpBase框架使用,不知道具体叫啥名字,但就觉得很牛逼,很优雅)

技术栈:Vue + iview + typescript + sass + axios
参考的是此框架对vuex的使用——节选项目中警报管理模块。
结构和代码如下:
在这里插入图片描述

// core
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import alarmManage from './modules/alarmManage'

const store = new Vuex.Store({
    state: {
        //
    },
    mutations: {
        //
    },
    actions: {

    },
    modules: {
        alarmManage,
    }
});

export default store;
import Entity from './entity'

// 元数据
export default class AlarmManage extends Entity<number>{
    Id:number;
    deviceName:number;
    deptName:string;
    deviceType:string;
    address:string;
    alarmInfo:string;
    alarmTime:Date;
    remark:string;
    status:number;
    traceStatus:string;
    deviceDisplay:string;
    url:string;
}

import {Store,Module,ActionContext} from 'vuex'
import ListModule from './list-module'
import ListState from './list-state'
import Ajax from '../../lib/ajax'
import PageResult from '@/store/entities/page-result';
import alarmManage from '../entities/alarmManage';
// service层
interface AlarmManageState extends ListState<alarmManage>{
    playerUrl:string;
}
class AlarmManageModule extends ListModule<AlarmManageState,any,alarmManage>{
    state={
        totalCount:0,
        currentPage:1,
        pageSize:10,
        list: new Array<alarmManage>(),
        loading:false,    
    }
    actions={
        async getAll(context:ActionContext<AlarmManageState,any>,payload:any){
            context.state.loading=true;
            let reponse=await Ajax.get('/api/services/app/AlarmData/GetAll',{params:payload.data});
            context.state.loading=false;
            let page=reponse.data.result as PageResult<alarmManage>;
            context.state.totalCount=page.totalCount;
            context.state.list=page.items;
            context.state.list.forEach(element=>{
                switch(element.status) {
                    case 0:element.traceStatus="未处理";break;
                    case 1:element.traceStatus="处理中";break;
                    case 2:element.traceStatus="已处理";break;
                }
            });
        },
    };
    mutations={
        setCurrentPage(state:AlarmManageState,page:number){
            state.currentPage=page;
        },
        setPageSize(state:AlarmManageState,pagesize:number){
            state.pageSize=pagesize;
        },
        sendUrl(state:AlarmManageState,url:string){
            state.playerUrl=url;
        }
    }
}
const alarmManageModule=new AlarmManageModule();
export default alarmManageModule;
// vue 界面使用
  // vue created 调用 actions 请求接口
  async created() {
    await this.$store.dispatch({
      type: "alarmManage/getByFilter",
      data: this.pagerequest
    });
  }
  // vue computer 获取state数据
  get list() {
    return this.$store.state.alarmManage.list;
  }
  // 调用mutations方法修改数据
  pageChange(page: number) {
    this.$store.commit("alarmManage/setCurrentPage", page);
    this.getpage();
  }

2. Le5le Topology拓扑图框架

链接: Le5le Topolog官方文档

重构实践

1. 面向对象

以接口响应的数据为核心,提取元数据+元数据的一些增删改查操作,并封装成类。
在这里插入图片描述

// 例如我重构的web可视化平台产品,有组态基本信息数据、组态控件数据、组态测点表达式数据……等等
// 以组态控件数据为例,示例代码
import {Pen} from "@topology/core";
import {Store} from 'le5le-store';
// 组态数据
export class TopoDetailData {
  // 元数据参数
  public pens?: Array<Pen>;
  public lineName?: string;
  public scale?: number;
  public locked?: number;
  public bkColor?: string;
  public data?: any;
  public fromArrowType?: any;
  public toArrowType?: any;
  public images?: any;
  public jsonData?: any;

  constructor(data:any) {
    // 初始化元数据
    this.pens = data.pens ? data.pens : data.jsonData;
    this.jsonData = data.jsonData;
    this.lineName= data.lineName;
    this.fromArrowType= data.fromArrowType;
    this.toArrowType= data.toArrowType;
    this.scale= data.scale;
    this.locked= data.locked;
    this.bkColor = data.bkColor;
    this.data = data.data;
    this.images = data.images;
  }

  // 元数据增删改查等操作
  storeDetailData() {
    Store.set('lineName', this.lineName);
    Store.set('fromArrowType', this.fromArrowType);
    Store.set('toArrowType', this.toArrowType);
    Store.set('scale', this.scale);
    Store.set('locked', this.locked);
  }
}

2. 业务逻辑层面的子组件拆分

比如,一个属性面板,可分类文字属性、动画属性、外观属性、事件属性,那就将其拆分成子组件,解耦。
在这里插入图片描述

// 需要主意的是子父组件引用和传值。

3. 复用功能子组件拆分

例如,弹框组件
在这里插入图片描述

 // 子父组件传值,子组件接收父组件传来的指令,以弹出对应的弹框
  @Input()
  set visibleModal(val) {
    switch (val) {
      case 'exportTopo':
        this.exportVisible = true;
        break;
      case 'saveTopo':
        this.saveTopoVisible = true;
        break;
      case 'export':
        this.exportVisible = true;
        break;
    }
  }
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

素心2020

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值