A dialog box is displayed for device reconstruction

There are more than 40 primary types and more than 80 secondary types of devices, each of which has different operations, There’s also a slight difference in the level 2 type of operations and then there’s probably going to be additional devices and the company used to have up to 2W lines of code and now it’s all over the place and the code is basically done with reuse, the template is filled with a lot of V-else if and it’s hard to maintain and now there are two places where it’s impractical to reuse device operations popups Refactoring is the only thing

Talk about the code bug

The secondary type is written as an array that matches devices through indexof

For example

There are two existing facilities

  1. The lamp

    • Ordinary light

      Operation on/off/pair

    • Changes in temperature lamp

      Operation on, off, pair, brightness, color temperature

  2. air conditioner

    • Common air conditioning

      On/Off/Temperature/pairing/pattern/wind speed

.

How to refactor react? After learning react, JSX and vue official website cn.vuejs.org/v2/guide/re… As a result, JSX is used decisively. Please refer to github.com/vuejs/jsx for the usage method and dependence

To start

  1. Encapsulation dialog

//index.jsx
props: {
      dialogVisible: Boolean 
      deviceInfo:Object // Device info Indicates the device ID of the level-1 type and level-2 type
    },
render(h){
    const component = deviceOperationGenerator(h,devFirstType,devSecondType,jdlDeviceId)
    Console.error () if deviceInfo contains a primary type, a secondary type, or a device ID, it does not.
 	return (
    	<el-dialog>
        	{conmponent}
        </el-dialog>)}Copy the code

  1. To realize the core

//core.js deviceOperationGenerator
const deviceOperationGenerator = function(h,devFirstType,devSecondType,jdlDeviceId){
// The policy mode determines the primary type and enters the secondary type according to the primary type
    const components = {
      1:() = > switchGenerator(h,devSecondType,jdlDeviceId),
      2:() = > scoketGenerator(h,devSecondType,jdlDeviceId),
      3:() = > doorLockGenertor(h,devSecondType,jdlDeviceId),
      4:() = > airConditionerGenertor(h,devSecondType,jdlDeviceId),
      6:() = > curtainGenertor(h,devSecondType,jdlDeviceId),
      8:() = > securityGatewayGenerator(h,devSecondType,jdlDeviceId),
      10:() = > infraredAlarmGenertor(h,devSecondType,jdlDeviceId),
      17:() = > controlBoxGenertor(h,devSecondType,jdlDeviceId),
      23:() = > lampGenerator(h,devSecondType,jdlDeviceId),
      31:() = > adjustingLampGenertor(h,devSecondType,jdlDeviceId),
      notfound:<div style="color:green; font-size:16px;">Features are stepping up development please later...</div>
    }
    // error tolerance
    if(components[devFirstType]){
      return components[devFirstType]
    }
    return components['notfound']}export default deviceOperationGenerator
Copy the code

  1. Functions of secondary types are implemented similar to those of primary types

    slightly

  2. Use mixed +slot to reduce duplicate code

    There is no type constraint except by convention. I wrote readme.md in the device popover component

<template> <div> <div class="flex"> <el-button type="primary" @click="clickBtn(' open ')"> open </el-button> <el-button </el-button> </el-button type="primary" @click="clickBtn(' timeout ')"> <slot name="button"/> </div> <div> <slot name="slider"/> </div> </div> </template> <script> import { simpleOperationMixin } from '.. /mixin' export default { props:{ deviceId:Number }, mixins:[simpleOperationMixin] } </script> <style scoped> .flex{ display: flex; } </style> // Add additional controls based on the base component implementation <template> <Curtain :deviceId="deviceId"> <div slot="button" style="margin-left:10px"> <el-button type="primary" @click="clickBtn "> </el-button> <el-button type="primary" </el-button type="primary" @click="pair"> </el-button> </div> <div slot="slider"> <el-form label-position="right" > <el-form label-position="right" > <el-form label-position="right" > <el-form label-position="right" > <el-form label-position @change="changeSlider" v-model="form.devPercentage" :max="99" :min="1" :step="10" style="width: 80%"> </el-slider> </el-form-item> </el-form> </div> </Curtain> </template> <script> import Curtain from './curtain.vue'  import { simpleOperationMixin,sliderMixin } from '.. /mixin' export default { props:{ deviceId:Number }, components:{ Curtain }, mixins:[simpleOperationMixin,sliderMixin], data(){ return { form:{ devId:this.deviceId, devPercentage:50 } } } } </script>Copy the code