摸鱼的最高境界：让代码看起来像在认真工作

作者：陈川阅读数：47186人阅读分类：前端综合

摸鱼的最高境界：让代码看起来像在认真工作

程序员的世界里，摸鱼是一门艺术。而最高级的摸鱼，是让代码看起来像在认真工作，甚至骗过同事和老板的眼睛。这需要一些技巧，比如写一些看似复杂实则无用的代码，或者用一些看似高深的技术术语来掩盖实际功能的简单性。

伪装成复杂算法的简单逻辑

有时候，一个简单的逻辑可以通过包装让它看起来像是一个复杂的算法。比如，一个简单的数组求和，可以写成这样：

// 普通写法
const sum = arr => arr.reduce((a, b) => a + b, 0);

// 摸鱼写法
const sophisticatedSum = (inputArray) => {
  // 初始化累加器
  let accumulator = 0;
  // 遍历数组元素
  for (let i = 0; i < inputArray.length; i++) {
    // 使用位运算优化（虽然并没有什么用）
    accumulator = (accumulator ^ inputArray[i]) + (accumulator & inputArray[i]) * 2;
  }
  // 返回最终结果
  return accumulator;
};

后者的代码看起来像是在进行某种高深的数学运算，但实际上和前者功能完全一样。如果再加上一些注释和复杂的变量名，效果会更好。

利用设计模式增加代码复杂度

设计模式是摸鱼的好帮手。比如，你可以用观察者模式来实现一个简单的按钮点击事件：

// 普通写法
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

// 摸鱼写法
class ButtonClickSubject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  notify() {
    this.observers.forEach(observer => observer.update());
  }
}

class ButtonClickObserver {
  update() {
    console.log('Button clicked!');
  }
}

const buttonSubject = new ButtonClickSubject();
const buttonObserver = new ButtonClickObserver();
buttonSubject.subscribe(buttonObserver);

button.addEventListener('click', () => {
  buttonSubject.notify();
});

后者用了观察者模式，看起来更"专业"，但实际上功能完全一样。如果团队里有人对设计模式不熟悉，可能会觉得这段代码很高端。

创建看似有用的工具函数

编写一些看似有用但实际上很少用到的工具函数也是摸鱼的好方法。比如：

// 将数字转换为中文大写
function numberToChinese(num) {
  const chineseNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  const units = ['', '拾', '佰', '仟', '万'];
  
  let result = '';
  const str = num.toString();
  
  for (let i = 0; i < str.length; i++) {
    const digit = parseInt(str[i]);
    const unit = units[str.length - 1 - i];
    result += chineseNums[digit] + unit;
  }
  
  return result;
}

// 使用示例
console.log(numberToChinese(12345)); // 输出：壹万贰仟叁佰肆拾伍

这个函数看起来很有用，但实际上在大多数项目中根本用不到。但它占用了代码库的空间，看起来像是在做重要的工作。

过度工程化的组件

在前端开发中，我们可以把简单的组件写得非常复杂。比如一个简单的按钮组件：

// 普通按钮组件
function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

// 摸鱼版按钮组件
class AdvancedButton extends React.Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    onClick: PropTypes.func,
    variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
    size: PropTypes.oneOf(['sm', 'md', 'lg']),
    disabled: PropTypes.bool,
    loading: PropTypes.bool,
    icon: PropTypes.element,
    iconPosition: PropTypes.oneOf(['left', 'right']),
    ariaLabel: PropTypes.string,
    tabIndex: PropTypes.number,
    className: PropTypes.string,
    style: PropTypes.object,
    dataTestId: PropTypes.string,
  };

  static defaultProps = {
    variant: 'primary',
    size: 'md',
    disabled: false,
    loading: false,
    icon: null,
    iconPosition: 'left',
    onClick: () => {},
    ariaLabel: '',
    tabIndex: 0,
    className: '',
    style: {},
    dataTestId: 'advanced-button',
  };

  state = {
    isPressed: false,
    isHovered: false,
    isFocused: false,
  };

  handleMouseDown = () => {
    this.setState({ isPressed: true });
  };

  handleMouseUp = () => {
    this.setState({ isPressed: false });
  };

  handleMouseEnter = () => {
    this.setState({ isHovered: true });
  };

  handleMouseLeave = () => {
    this.setState({ isHovered: false, isPressed: false });
  };

  handleFocus = () => {
    this.setState({ isFocused: true });
  };

  handleBlur = () => {
    this.setState({ isFocused: false });
  };

  render() {
    const {
      children,
      onClick,
      variant,
      size,
      disabled,
      loading,
      icon,
      iconPosition,
      ariaLabel,
      tabIndex,
      className,
      style,
      dataTestId,
    } = this.props;
    const { isPressed, isHovered, isFocused } = this.state;

    const buttonClasses = classNames(
      'btn',
      `btn-${variant}`,
      `btn-${size}`,
      {
        'btn-disabled': disabled,
        'btn-loading': loading,
        'btn-pressed': isPressed,
        'btn-hovered': isHovered,
        'btn-focused': isFocused,
      },
      className
    );

    return (
      <button
        className={buttonClasses}
        onClick={onClick}
        disabled={disabled || loading}
        aria-label={ariaLabel}
        tabIndex={tabIndex}
        style={style}
        data-testid={dataTestId}
        onMouseDown={this.handleMouseDown}
        onMouseUp={this.handleMouseUp}
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        onFocus={this.handleFocus}
        onBlur={this.handleBlur}
      >
        {icon && iconPosition === 'left' && (
          <span className="btn-icon-left">{icon}</span>
        )}
        {loading ? 'Loading...' : children}
        {icon && iconPosition === 'right' && (
          <span className="btn-icon-right">{icon}</span>
        )}
      </button>
    );
  }
}

这个按钮组件有各种状态、props验证、事件处理等，看起来非常专业，但实际上大多数项目只需要一个简单的按钮。这种过度工程化的组件会让代码库看起来很庞大，但实际上增加了维护成本。

编写看似高级的TypeScript类型

TypeScript提供了强大的类型系统，可以用来编写一些看起来很高级但实际上可能用不到的类型定义：

// 定义一个深度Partial类型
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

// 定义一个递归Required类型
type DeepRequired<T> = {
  [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : T[P];
};

// 定义一个条件类型，根据输入类型决定返回类型
type ConditionalType<T> = 
  T extends string ? { stringValue: T } :
  T extends number ? { numberValue: T } :
  T extends boolean ? { booleanValue: T } :
  { value: T };

// 定义一个复杂的类型工具
type Flatten<T> = {
  [K in keyof T]: T[K] extends infer U ? U : never;
};

// 使用这些类型
interface User {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
    zip?: string;
  };
  preferences?: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
}

type PartialUser = DeepPartial<User>;
type RequiredUser = DeepRequired<User>;
type UserConditional = ConditionalType<User>;
type FlattenedUser = Flatten<User>;

这些类型定义看起来很高级，但实际上在大多数项目中可能根本用不到。它们会让代码看起来更专业，但实际上增加了代码的复杂性。

创建复杂的构建配置

在前端项目中，webpack配置是摸鱼的好地方。你可以创建一个非常复杂的webpack配置，即使项目根本不需要：

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  
  return {
    entry: {
      main: './src/index.tsx',
      vendor: ['react', 'react-dom'],
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
      chunkFilename: isProduction ? '[name].[contenthash].chunk.js' : '[name].chunk.js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.json'],
      alias: {
        '@components': path.resolve(__dirname, 'src/components'),
        '@utils': path.resolve(__dirname, 'src/utils'),
        '@styles': path.resolve(__dirname, 'src/styles'),
      },
    },
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  '@babel/preset-env',
                  '@babel/preset-react',
                  '@babel/preset-typescript',
                ],
                plugins: [
                  '@babel/plugin-proposal-class-properties',
                  '@babel/plugin-syntax-dynamic-import',
                  'lodash',
                ],
              },
            },
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true,
                experimentalWatchApi: true,
              },
            },
          ],
        },
        {
          test: /\.css$/,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: {
                  auto: true,
                  localIdentName: isProduction 
                    ? '[hash:base64]' 
                    : '[path][name]__[local]--[hash:base64:5]',
                },
                importLoaders: 1,
              },
            },
            'postcss-loader',
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
                name: isProduction 
                  ? 'assets/[name].[contenthash].[ext]' 
                  : 'assets/[name].[ext]',
              },
            },
            {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  progressive: true,
                  quality: 65,
                },
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.65, 0.90],
                  speed: 4,
                },
                gifsicle: {
                  interlaced: false,
                },
                webp: {
                  quality: 75,
                },
              },
            },
          ],
        },
      ],
    },
    optimization: {
      minimize: isProduction,
      minimizer: [
        new TerserPlugin({
          parallel: true,
          terserOptions: {
            ecma: 2015,
            compress: {
              drop_console: isProduction,
            },
            output: {
              comments: false,
            },
          },
          extractComments: false,
        }),
        new OptimizeCSSAssetsPlugin({}),
      ],
      splitChunks: {
        chunks: 'all',
        minSize: 30000,
        maxSize: 244000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
        },
      },
      runtimeChunk: {
        name: 'runtime',
      },
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './public/index.html',
        minify: isProduction
          ? {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            }
          : false,
      }),
      new MiniCssExtractPlugin({
        filename: isProduction ? '[name].[contenthash].css' : '[name].css',
        chunkFilename: isProduction ? '[id].[contenthash].css' : '[id].css',
      }),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(argv.mode),
      }),
      new ForkTsCheckerWebpackPlugin(),
      ...(isProduction ? [new BundleAnalyzerPlugin()] : []),
    ],
    devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'dist'),
      compress: true,
      port: 9000,
      hot: true,
      historyApiFallback: true,
      overlay: true,
      stats: 'minimal',
      clientLogLevel: 'warning',
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          secure: false,
          changeOrigin: true,
        },
      },
    },
    performance: {
      hints: isProduction ? 'warning' : false,
      maxAssetSize: 244000,
      maxEntrypointSize: 244000,
    },
  };
};

这个webpack配置包含了各种优化、插件和loader，看起来非常专业。但实际上，对于一个小型项目来说，可能只需要一个简单的配置就够了。这种复杂的配置会让项目看起来更"企业级"，但实际上可能增加了构建时间和维护难度。

编写看似重要的测试代码

测试代码也是摸鱼的好地方。你可以编写一些看似重要但实际上测试的是非常明显功能的测试：

// 测试一个简单的工具函数
describe('StringUtils', () => {
  describe('capitalize', () => {
    it('should capitalize the first letter of a string', () => {
      expect(capitalize('hello')).toBe('Hello');
    });

    it('should return empty string when input is empty', () => {
      expect(capitalize('')).toBe('');
    });

    it('should handle single character strings', () => {
      expect(capitalize('a')).toBe('A');
    });

    it('should not modify already capitalized strings', () => {
      expect(capitalize('Hello')).toBe('Hello');
    });

    it('should handle strings with leading spaces', () => {
      expect(capitalize(' hello')).toBe(' hello');
    });

    it('should handle strings with numbers', () => {
      expect(capitalize('1hello')).toBe('1hello');
    });

    it('should handle strings with special characters', () => {
      expect(capitalize('@hello')).toBe('@hello');
    });

    it('should handle unicode characters', () => {
      expect(capitalize('éllo')).toBe('Éllo');
    });
  });
});

// 测试一个React组件
describe('Button Component', () => {
  it('should render without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<Button />, div);
    ReactDOM.unmountComponentAtNode(div);
  });

  it('should render children correctly', () => {
    const wrapper = shallow(<Button>Click me</Button>);
    expect(wrapper.text()).toBe('Click me');
  });

  it('should call onClick when clicked', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<Button onClick={onClick} />);
    wrapper.simulate('click');
    expect(onClick).toHaveBeenCalled();
  });

  it('should not call onClick when disabled', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<Button onClick={onClick} disabled />);
    wrapper.simulate('click');
    expect(onClick).not.toHaveBeenCalled();
  });

  it('should have correct class when variant is primary', () => {
    const wrapper = shallow(<Button variant="primary" />);
    expect(wrapper.hasClass('btn-primary')).toBe(true);
  });

  it('should have correct class when size is large', () => {
    const wrapper = shallow(<Button size="lg" />);
    expect(wrapper.hasClass('btn-lg')).toBe(true);
  });

  it('should render icon when provided', () => {
    const icon = <span className="icon" />;
    const wrapper = shallow(<Button icon={icon} />);
    expect(wrapper.find('.icon').exists()).toBe(true);
  });

  it('should match snapshot', () => {
    const tree = renderer.create(<Button>Click me</Button>).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

这些测试看起来很全面，但实际上测试的都是一些非常基本的功能。它们会增加测试覆盖率，让代码看起来更可靠，但实际上可能并没有测试到真正复杂的逻辑。