Coder Social home page Coder Social logo

coderules's People

Contributors

gtangxiaobo avatar

Stargazers

avatar

Watchers

avatar

coderules's Issues

no big function, but small piece of functions

一段代码重构之前和之后的对比

之前的代码

  handleChangeStatus(clicked, level) {
        if (level === 'All') {
            // this.sLevelStatus.forEach((theLevel) => (theLevel.status = !clicked))
            for(let i =0; i < this.sLevelStatus.length; i++) {
                this.sLevelStatus.splice(i, 1, {name: this.sLevelStatus[i].name, status: !clicked})
            }
        } else {
            const index = this.sLevelStatus.findIndex(theLevel => {
                return theLevel.name === level
            })
            console.log('haibonote： index', index, clicked)
            this.sLevelStatus.splice(index, 1, {name: this.sLevelStatus[index].name, status: !clicked})
            let selected = 0
            this.sLevelStatus.forEach((theLevel) => {
                if(theLevel.name !== 'All' && theLevel.status === true) {
                    selected++
                } 
            })
            debugger
            if(selected === (this.sLevelStatus.length -1)) {
                debugger
                this.sLevelStatus.splice(0, 1, {name: 'All', status: true})
            } else {
                this.sLevelStatus.splice(0, 1, {name: 'All', status: false})
            }
            this.$emit('changeAllowLevel', this.sLevelStatus)
            console.log('haibonote: levelstatus', this.sLevelStatus)
        }
    },

重构之后的代码

  handleChangeStatus(clicked, level) {
      if (level === 'All') {
        this.responsiveChangeAllSLevelStatus(clicked)
      } else {
        this.responsiveChangeSpecificSLevelStatus(clicked, level)
      }
      this.$emit('changeAllowLevel', this.sLevelStatus)
 	},
    responsiveChangeAllSLevelStatus(clicked) {
        for (let i = 0; i < this.sLevelStatus.length; i++) {
          this.sLevelStatus.splice(i, 1, { name: this.sLevelStatus[i].name, status: !clicked })
        }
    },
    responsiveChangeSpecificSLevelStatus(clicked, level) {
        const index = this.sLevelStatus.findIndex((theLevel) => {
          return theLevel.name === level
        })
        this.sLevelStatus.splice(index, 1, { name: this.sLevelStatus[index].name, status: !clicked })
        this.adjustAllStatusByOtherSLevelStatus()
    },
    adjustAllStatusByOtherSLevelStatus() {
        let selected = 0
        this.sLevelStatus.forEach((theLevel) => {
          if (theLevel.name !== 'All' && theLevel.status === true) {
            selected++
          }
        })
        if (selected === this.sLevelStatus.length - 1) {
          this.sLevelStatus.splice(0, 1, { name: 'All', status: true })
        } else {
          this.sLevelStatus.splice(0, 1, { name: 'All', status: false })
        }
    },

rules:

  1. 不要写功能复杂的函数，把复杂的功能拆分成更新的函数
  2. 小功能的函数命名应该体现改功能的作用

代码行为规范第二周

代码行为规范 第二周:

  1. 模块管理工具的使用要一致

    case 'cpu':
  this.iconPath = require('@/assets/image/CPU-icon.svg')
  break
case 'mem':
case 'gpumem':
case 'cpumem':
  this.iconPath = require('@/assets/image/MEM-icon.svg')
  break
case 'gpu':
  this.iconPath = require('@/assets/image/GPU-icon.svg')
  break
case 'pods':
  this.iconPath = require('@/assets/image/Pods-icon.svg')
  break

    整个项目都在使用es module的模块管理, 突然又来了commonjs的方式, 而且还是在代码阶段, 尽量不要使用commonjs了, 没有静态分析优化的过程, 引入对象也不能treeShaking

  2. 正则表达式要力图简捷易懂

    /^(?![0-9])^[a-z]([0-9a-z]){0,27}/

^[a-zA-Z][0-9a-zA-Z]{1,26}

  3. 不要写方块代码

    ##bad code

return 
(this.allDataEmpty || 
(this.cpuList.length > 1 && this.cpuList[0].result.length > 0 && this.cpuList[1].result.length > 0) || (this.cpuList[0] && this.cpuList[0].result.length > 0) ||
(this.gpuList.length > 1 && this.gpuList[0].result.length > 0 && this.gpuList[1].result.length > 0) || (this.gpuList[0] && this.gpuList[0].result.length > 0) ||
(this.memList.length > 1 && this.memList[0].result.length > 0 && this.memList[1].result.length > 0) || (this.memList[0] && this.memList[0].result.length > 0) ||
(this.podsList.length > 1 && this.podsList[0].result.length > 0 && this.podsList[1].result.length > 0) || (this.podsList[0] && this.podsList[0].result.length > 0))

##good code
export function judgeHasData (str) {
  return ((this[str].length > 1 && this[str][0].result.length > 0 && this[str][1].result.length > 0) || (this[str].length > 1 && this[str][0].result.length > 0))
}

return (this.allDataEmpty || this.judgeHasData('cpuList') || this.judgeHasData('gpuList') || this.judgeHasData('memList') || this.judgeHasData('podsList'))

  4. 不要把可以写成函数的代码写成一句话

    ##bad code

this.clusterId = this.$route.query.clusterId ||
    (this.clusterOptions.filter(cluster => !cluster.disabled) && this.clusterOptions.filter(cluster => !cluster.disabled)[0].value) || ''

##good code

getClusterId () {
    const clusterArr = this.clusterOptions.filter(cluster => !cluster.disabled)
    if (this.$route.query.clusterId && clusterArr?.[0]?.value) {
		return clusterArr[0].value
    }
    return ''
}

    写成一句话的代码给阅读代码的人带来很大的压力, 不敢乱动你的代码

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.