模块化和组件化的区别

1. 模块化：代码层面的 "零件拆分"

模块化是把单一功能的代码从整体中抽离成独立文件，核心是 "功能解耦"，关注 "代码怎么写"。

比如：
- 把日期格式化函数封装成 date-utils.js 模块
- 把接口请求逻辑封装成 api/user.js 模块
- 把通用样式变量封装成 variables.scss 模块

示例代码（JS 模块化）：

javascript

运行

javascript 复制代码

// 模块化：utils/date.js（纯功能逻辑）
export function formatDate(date) {
  return new Intl.DateTimeFormat('zh-CN').format(new Date(date));
}

// 其他文件中引入使用
import { formatDate } from './utils/date.js';
console.log(formatDate('2026-03-02')); // 2026/3/2

2. 组件化：界面层面的 "积木拼装"

组件化是把可独立复用的 UI 单元封装成独立模块，核心是 "UI 解耦"，关注 "界面怎么拼"。一个组件通常包含：模板（HTML）+ 逻辑（JS）+ 样式（CSS），是 "完整的功能单元"。

比如：
- Vue 中的 Button.vue 组件（包含按钮的样式、点击逻辑、显示文本）
- React 中的 Card.jsx 组件（包含卡片布局、内容渲染、交互事件）

示例代码（Vue 组件化）：

vue

xml 复制代码

<!-- 组件化：components/Button.vue（UI+逻辑+样式） -->
<template>
  <button class="my-btn" @click="handleClick">{{ text }}</button>
</template>

<script>
// 引入模块化的工具函数（组件化依赖模块化）
import { log } from '../utils/logger.js';

export default {
  props: {
    text: { type: String, default: '按钮' }
  },
  methods: {
    handleClick() {
      log('按钮被点击');
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
.my-btn {
  padding: 8px 16px;
  border: none;
  background: #007bff;
  color: white;
}
</style>

3、两者的关联

组件化依赖模块化：一个组件内部会拆分多个模块（比如引入工具函数模块、接口请求模块）；
模块化是组件化的基础：先有代码层面的模块化拆分，才能更好地构建高内聚的组件；
最终目标一致：都是为了降低耦合、提高复用性、便于维护，只是关注的层面不同。

总结

模块化 聚焦功能逻辑的拆分，是 "代码级" 的复用，解决 "代码怎么组织" 的问题；
组件化 聚焦UI 单元的封装，是 "界面级" 的复用，解决 "页面怎么拼装" 的问题；
组件化是模块化思想在 UI 层的具体落地，模块化的范围更广，组件化是模块化的一种特殊形式（UI 模块）。