js 常见可优化代码

/**
 * @场景1
 */
import {Button} from "antd";

const obj = {
  name: 'haha',
  age: 22
}

// 是否成年
let isAdult;

if(obj.age > 18) {
  isAdult = true;
}else {
  isAdult = false ;
}

// 下边是不是更好
isAdult = obj.age > 18;


/**
 * @场景2 挺基本的
 * @note 下边的场景是数组，对象也是一样，数组就key是numbe的string的object
 */

// 根据类型执行 不同的操作
const type = 0;

function fn0() {
  console.log(0)
}

function fn1() {
  console.log(0)
}

function fn2() {
  console.log(0)
}


switch (type){
  case 0:
    fn0();
    break;
  case 1:
    fn1();
    break;
  case 2:
    fn2();
    break;
}


// 下边是不是更好
const fns = [
  function () {
    console.log(0)
  },
  function () {
    console.log(1)
  },
];

fns[type]()







/**
 * @场景3
 * @description 我要对后端返回的字段，是钱的， 格式化，千分符
 */

const res = {
  model: [
    {

    }
  ]
}

res.model.forEach(record => {
  for(let key in record){
    if(key === '总利润' || key === '总成本' || key === '总损耗' || key === '销售费用' ...) {
      record[key] = parse(record[key])
    }
  }
})


// 为什么不把这些数据维护在一个数组呢

// config/money.js

 const fields =  [
  '总成本',
    '总利润',
    '总损耗'
  ]

export default function isMoney(field) {
  return fields.includes(field)
}


// module.js


import isMoney from "@config/money"

res.model.forEach(record => {
  for(let key in record){
    if(isMoney(key)) {
      record[key] = parse(record[key])
    }
  }
})


/**
 * @场景4
 */

// 比如一个chart有3种主题 light normal dark

class Demo extends React.Component {
  constructor(){
    this.state = {
      chart: null ,
      theme: 'dark'
    }
  }
  normal(){
    this.setState({
      theme: 'normal'
    }, () => {
      this.state.chart.draw()
    })

  }
  dark(){
    this.setState({
      theme: 'dark'
    }, () => {
      this.state.chart.draw()
    })
  }
  light(){
    this.setState({
      theme: 'light'
    }, () => {
      this.state.chart.draw()
    })
  }
  render(){
    return (
      <div>
        <button onClick={this.light}>light</button>
        <button onClick={this.normal}>normal</button>
        <button onClick={this.dark}>dark </button>
      </div>
    )
  }
}



// 3 种主题应该放到一个配置文件吧, chart或者map不应该重新画吧，有切换主题或者改变数据的方法，


// config/theme.js

export default [
  'light',
  'normal',
  'dark',
]


import $themes from "@config/theme"

class Demos extends React.Component {
  changeTheme(theme){
    this.setState({
      theme
    }, () => {
      this.state.chart.changeTheme(theme)
    })
  }
  render(){
    return (
      <div>
        {
          $themes.map(theme => {
            return (
              <Button onClick={this.changeTheme.bind(this, theme)}>{theme}</Button>
            )
          })
        }
      </div>
    )
  }

}