代码优化微调

最新推荐文章于 2025-05-17 08:45:00 发布

原创最新推荐文章于 2025-05-17 08:45:00 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

一个react简单项目专栏收录该内容

33 篇文章

订阅专栏

本文通过重构代码，改进了前端热门搜索功能。具体包括：调整内部方法的位置、使用解构语法简化属性访问，并将if语句替换为switch语句以提高代码的可读性和效率。

前面我们实现了热门搜索最基本的功能，下面我们来将代码微调优化一下。

首先，我们打开 src/common/header/store 下的 actionCreators.js 如下。

import * as actionTypes from './actionTypes';
import axios from 'axios';
import { fromJS } from 'immutable';
import '../../../mockdata.js';

export const searchFocus = () => ({
    type: actionTypes.SEARCH_FOCUS
});

export const searchBlur = () => ({
    type: actionTypes.SEARCH_BLUR
});

const changeList = (data) => ({
  type: actionTypes.CHANGE_LIST,
  data: fromJS(data)
})

export const getList = () => {
  return (dispatch) => {
    axios.get('/api/headerList.json').then( (res) => {
      const data = res.data;
      if( data.success ) {
        dispatch( changeList( data.data ) )
      }
    }).catch( () => {
      console.log("error");
    })
  }
}

一、有的方法，不需要被导出，比如 changeList 方法。这种方法，我们最后要么放顶部要么放底部。我们这儿把它放顶部。

再看一下 src/common/header 下的 index.js 里面有的函数或者变量的调用方法是 this.props.XXX .那么我们可以用解构语法让它们的调用更方便。如下。

class Header extends Component {
  render() {
    let { focused, handleFocus, handleBlur } = this.props;
    return (
...)
}}

二、使用解构语法把this.props 中变量解构

然后，我们看一看 src/common/header/store 下的reducer.js，如下。

import { SEARCH_FOCUS, SEARCH_BLUR, CHANGE_LIST } from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: []
});

export default (state = defaultState, action) => {
    if (action.type === SEARCH_FOCUS) {
        return state.set("focused", true);
    }
    if (action.type === SEARCH_BLUR) {
        return state.set("focused", false);
    }
    if (action.type === CHANGE_LIST) {
      return state.set("list", action.data);
    }
    return state;
}

里面大量使用了if 语法，这里我们可以把它改为switch 语句。如下。

import { SEARCH_FOCUS, SEARCH_BLUR, CHANGE_LIST } from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: []
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.set("list", action.data);
        default:
            return state;
    }
}

三、大量if 语句，改为switch 语法