JavaScript模块导入导出疑问：自定义对象为何无法像DOM document使用？

先搞懂DOM的document和自定义模块的本质区别 #

document是浏览器环境预先在全局作用域挂载好的现成对象，它的所有属性、方法都是浏览器提前定义并挂载完成的，你不用做任何导入导出操作，直接就能通过document.xxx调用。

但自定义模块不一样：JS不会自动把整个文件当成一个可访问的对象，你必须主动声明要暴露给外部的内容——不管是命名导出还是默认导出，都得写清楚规则，否则外部根本拿不到你定义的东西。

你的两个示例问题出在哪？ #

先看错误写法和修正方案：

示例1：命名导出对象的错误写法 #

// module.js 错误写法
const myObj = {
  exampleMethod1() {
    console.log('方法1执行')
  }
}
export myObj; // 错误：命名导出需要用{}包裹，或者直接在定义时加export

// main.js 错误写法
import myObj from './module.js'; // 错误：命名导出需要用{}导入对应名称

修正后正确写法：

// module.js
// 方式1：定义时直接导出
export const myObj = {
  exampleMethod1() {
    console.log('方法1执行')
  }
}

// 方式2：先定义再导出
// const myObj = {...};
// export { myObj };

// main.js
import { myObj } from './module.js';
myObj.exampleMethod1(); // 正常执行

示例2：默认导出对象的错误写法 #

// module.js 错误写法
const myObj = {
  exampleMethod1() {
    console.log('方法1执行')
  }
}
export myObj; // 错误：默认导出要写export default

// main.js 错误写法
import { myObj } from './module.js'; // 错误：默认导出不需要{}，直接导入任意名称

修正后正确写法：

// module.js
const myObj = {
  exampleMethod1() {
    console.log('方法1执行')
  }
}
export default myObj;

// main.js
// 这里可以用任意名称，不一定是myObj，比如import tools from './module.js'
import myObj from './module.js';
myObj.exampleMethod1(); // 正常执行

关于解构赋值：不是必须，只是可选写法 #

课程里用解构提取函数，只是当你只需要对象里某几个函数时的便捷写法，完全不是强制要求。你完全可以像用document那样，把整个对象导进来直接调用方法——就像上面修正后的代码那样，不管有多少函数，都封装在一个对象里，导入后用myObj.func1()、myObj.func2()就行，不用逐个解构。

如果想批量导入所有命名导出的内容，还可以这样写：

// module.js
export const func1 = () => console.log('func1');
export const func2 = () => console.log('func2');
export const func3 = () => console.log('func3');

// main.js
// 把所有导出内容打包成一个myModule对象，用法和document完全一致
import * as myModule from './module.js';
myModule.func1();
myModule.func2();

用DOM类比的总结 #

• document是浏览器给你的「现成全局对象」，不用你自己导出，直接用。
• 自定义模块的「对象导出」是你自己创建的「自定义全局对象（仅限导入后的作用域）」，只要你正确完成导出+导入，就能像用document那样，通过对象.方法的形式调用所有功能。

最佳实践 #

1. 功能集合型模块：如果模块是一组相关工具函数（比如日期处理、DOM操作工具），推荐把所有函数封装在一个对象里默认导出，或者用export * as xxx的方式，方便使用者像用document那样统一访问。
2. 独立功能型模块：如果模块里的函数是独立的、可能被单独使用的，适合用命名导出，使用者可以按需解构导入，减少打包体积。
3. 避免混合导出：除非有明确需求（比如模块核心导出一个类，附带几个辅助函数），否则尽量不要同时用默认导出和命名导出，保持代码清晰。

内容的提问来源于stack exchange，提问作者DylanDupont