组件化与模块化的核心概念及区别解析

// ES6 Module 示例
// utils/math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
 
// main.js
import { add, multiply } from './utils/math.js';
 
// CommonJS 示例
// services/userService.js
const getUserInfo = async (userId) => {
  // 用户信息服务逻辑
};
 
module.exports = { getUserInfo };

// Button.jsx - 可复用按钮组件
import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';
 
const Button = ({ 
  children, 
  variant = 'primary', 
  size = 'medium',
  onClick,
  disabled = false 
}) => {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};
 
Button.propTypes = {
  children: PropTypes.node.isRequired,
  variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  onClick: PropTypes.func,
  disabled: PropTypes.bool
};
 
export default Button;

<!-- UserCard.vue -->
<template>
  <div class="user-card">
    <img :src="avatar" :alt="name" class="avatar" />
    <div class="info">
      <h3>{{ name }}</h3>
      <p>{{ email }}</p>
      <Button @click="handleEdit">编辑</Button>
    </div>
  </div>
</template>
 
<script>
import Button from './Button.vue';
 
export default {
  name: 'UserCard',
  components: { Button },
  props: {
    avatar: String,
    name: String,
    email: String
  },
  methods: {
    handleEdit() {
      this.$emit('edit', this.email);
    }
  }
};
</script>
 
<style scoped>
.user-card {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
</style>

// 模块化导出工具函数
// utils/dateFormatter.js
export const formatDate = (date) => {
  return new Intl.DateTimeFormat('zh-CN').format(date);
};
 
// 组件化使用模块
// ArticleCard.jsx
import { formatDate } from '../utils/dateFormatter';
 
const ArticleCard = ({ article }) => {
  return (
    <div className="article-card">
      <h2>{article.title}</h2>
      <p>{article.summary}</p>
      <time>{formatDate(article.publishDate)}</time>
    </div>
  );
};

// 模块化：商品服务模块
// services/productService.js
export const productAPI = {
  async getProductList(categoryId, page = 1) {
    const response = await fetch(`/api/products?category=${categoryId}&page=${page}`);
    return response.json();
  },
  
  async getProductDetail(productId) {
    const response = await fetch(`/api/products/${productId}`);
    return response.json();
  }
};
 
// 组件化：商品展示组件
// components/ProductCard.jsx
import { useState } from 'react';
import { ShoppingCart } from './icons';
 
const ProductCard = ({ product, onAddToCart }) => {
  const [imageError, setImageError] = useState(false);
  
  return (
    <div className="product-card">
      <div className="product-image">
        <img 
          src={imageError ? '/placeholder.jpg' : product.image} 
          alt={product.name}
          onError={() => setImageError(true)}
        />
      </div>
      <div className="product-info">
        <h3>{product.name}</h3>
        <p className="price">¥{product.price}</p>
        <button onClick={() => onAddToCart(product)}>
          <ShoppingCart />
          加入购物车
        </button>
      </div>
    </div>
  );
};
 
// 页面级组件组合
// pages/ProductList.jsx
import { useEffect, useState } from 'react';
import { productAPI } from '../services/productService';
import ProductCard from '../components/ProductCard';
import LoadingSpinner from '../components/LoadingSpinner';
 
const ProductList = ({ categoryId }) => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const loadProducts = async () => {
      try {
        setLoading(true);
        const data = await productAPI.getProductList(categoryId);
        setProducts(data.products);
      } catch (error) {
        console.error('Failed to load products:', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadProducts();
  }, [categoryId]);
  
  if (loading) return <LoadingSpinner />;
  
  return (
    <div className="product-grid">
      {products.map(product => (
        <ProductCard 
          key={product.id} 
          product={product}
          onAddToCart={handleAddToCart}
        />
      ))}
    </div>
  );
};

// 模块化：基础工具模块
// utils/classNames.js
export const classNames = (...classes) => {
  return classes.filter(Boolean).join(' ');
};
 
export const variantClasses = (baseClass, variants = {}) => {
  return Object.entries(variants)
    .filter(([, condition]) => condition)
    .map(([variant]) => `${baseClass}--${variant}`)
    .join(' ');
};
 
// 组件化：基础按钮组件
// components/Button/index.jsx
import { classNames, variantClasses } from '../../utils/classNames';
import './Button.css';
 
const Button = ({ 
  children, 
  variant = 'primary',
  size = 'medium',
  disabled = false,
  loading = false,
  className,
  ...props 
}) => {
  const buttonClasses = classNames(
    'btn',
    `btn--${variant}`,
    `btn--${size}`,
    {
      'btn--disabled': disabled,
      'btn--loading': loading
    },
    className
  );
  
  return (
    <button 
      className={buttonClasses}
      disabled={disabled || loading}
      {...props}
    >
      {loading && <span className="btn__spinner" />}
      {children}
    </button>
  );
};
 
// 模块化：组件导出管理
// components/index.js
export { default as Button } from './Button';
export { default as Input } from './Input';
export { default as Modal } from './Modal';
export { default as Table } from './Table';

// 在大型项目中，快速定位组件定义
// 使用 ⌘ + 点击 (Mac) 或 Ctrl + 点击 (Windows) 直接跳转到组件源码
import { UserProfile } from '@/components';
//        ^ 点击这里直接跳转到 UserProfile 组件定义

// 推荐的文件组织结构
project/
├── src/
│   ├── components/          # 可复用UI组件
│   │   ├── Button/
│   │   ├── Input/
│   │   └── Modal/
│   ├── modules/             # 业务模块
│   │   ├── user/           # 用户模块
│   │   ├── product/        # 商品模块
│   │   └── order/          # 订单模块
│   ├── utils/               # 工具函数模块
│   ├── services/            # API服务模块
│   └── hooks/               # 自定义React Hooks
├── tests/                   # 测试文件
└── docs/                    # 项目文档