JavaScript 中怎么用 export 导出组件的默认配置项与常量-js教程-PHP中文网

javascript中可同时使用export default导出单个默认对象（如配置）和命名导出多个常量（如size_small、themes），支持灵活导入方式，提升可读性、类型推导与tree-shaking效果。

javascript 中怎么用 export 导出组件的默认配置项与常量

在 JavaScript（尤其是 ES 模块环境，如 Vue、React 或纯 JS 项目）中，可以用 export default 导出一个默认值（比如组件的默认配置对象或常量集合），同时用命名导出（export const）导出多个具名常量。关键在于：**默认导出只能有一个，但可以是对象；命名导出可有多个，且更利于按需引入和类型推导。**

导出默认配置对象（常用场景）

适合把组件的一组默认参数打包成一个对象导出，方便使用者整体覆盖或解构使用：

// config.js
export default {
  size: 'medium',
  theme: 'light',
  disabled: false,
  rounded: true
};

使用时可直接导入为任意变量名：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

import ButtonConfig from './config.js';
// 或解构导入
import ButtonConfig, { size, theme } from './config.js'; // ❌ 错误！不能混用默认+解构（除非导出也包含命名项）

同时导出默认配置 + 多个命名常量

更推荐的方式：默认导出配置对象，再额外导出语义化常量（如枚举值、固定字符串），提升可读性和维护性：

// constants.js
export const SIZE_SMALL = 'small';
export const SIZE_MEDIUM = 'medium';
export const SIZE_LARGE = 'large';

export const THEMES = Object.freeze({
  LIGHT: 'light',
  DARK: 'dark',
  SYSTEM: 'system'
});

// 默认导出一个融合了常量的配置对象
export default {
  size: SIZE_MEDIUM,
  theme: THEMES.LIGHT,
  disabled: false,
  iconOnly: false
};

这样使用者可以灵活选择导入方式：

import DefaultConfig from './constants.js' —— 获取整个默认配置
import { SIZE_LARGE, THEMES } from './constants.js' —— 按需引入常量
import DefaultConfig, { THEMES } from './constants.js' —— 同时导入默认 + 命名项（合法）

在组件中结合使用的实际例子

比如一个 MyButton 组件，内部用默认配置兜底，支持用户传入 props 覆盖：

// MyButton.vue 或 MyButton.js
import DefaultConfig from './button-config.js';
import { SIZE_LARGE, THEMES } from './button-config.js';

export default {
  name: 'MyButton',
  props: {
    size: {
      type: String,
      default: () => DefaultConfig.size // 使用默认配置中的值
    },
    theme: {
      type: String,
      default: () => DefaultConfig.theme
    }
  },
  computed: {
    finalSize() {
      return this.size || DefaultConfig.size;
    }
  }
};