JS `import * as name`：导入所有导出成员为一个命名空间对象

各位听众，早上好！今天咱们来聊聊JavaScript里一个挺有意思的家伙：import * as name，也就是把模块里所有的宝贝一股脑儿地塞进一个命名空间对象里。这听起来有点像打包行李，把家里能带走的都塞进一个大箱子里，然后给这个箱子贴个标签。咱们就来细细琢磨一下，这个“打包”的过程，以及这个“大箱子”到底能装些啥。

一、模块化：为什么要打包？

首先，咱们得明白，为啥要搞模块化？想象一下，如果所有的代码都堆在一个文件里，那简直就是一场灾难。变量名冲突、代码混乱、难以维护，想想都头疼。模块化就像是给不同的功能划分了不同的房间，每个房间都有自己的家具（变量、函数、类），互不干扰。

JavaScript的模块化发展历程也是一部血泪史。从最初的全局变量、IIFE（立即执行函数表达式），到CommonJS（Node.js）、AMD（RequireJS）、UMD，再到现在的ES Module，一路走来，都是为了解决代码组织和依赖管理的问题。

ES Module是官方标准，也是我们今天的主角。它提供了 import 和 export 关键字，让我们可以轻松地导入和导出模块。

*二、`import as name`：打包的艺术**

import * as name from 'module' 语句就是把一个模块中所有导出的东西，不管它是变量、函数、类，还是别的什么，都打包到一个叫做 name 的对象里。这个 name 就是我们说的命名空间对象。

举个例子，假设我们有个模块叫做 math.js：

// math.js
export const PI = 3.1415926;

export function add(a, b) {
  return a + b;
}

export class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return PI * this.radius * this.radius;
  }
}

现在，我们可以用 import * as MathUtils from './math.js' 来导入这个模块：

// app.js
import * as MathUtils from './math.js';

console.log(MathUtils.PI); // 输出: 3.1415926
console.log(MathUtils.add(1, 2)); // 输出: 3
const circle = new MathUtils.Circle(5);
console.log(circle.area()); // 输出: 78.539815

看到了吗？ PI、add 函数和 Circle 类，都变成了 MathUtils 对象的属性和方法。

三、命名空间对象：这个箱子里装了啥？

命名空间对象就是一个普通的 JavaScript 对象，它的属性就是模块导出的成员。关键点：

只读性: 命名空间对象是只读的。你不能给它添加新的属性，也不能修改已有的属性。试着修改 MathUtils.PI = 4; 会报错 (严格模式下)或者无效 (非严格模式下)。
属性名: 属性名就是模块中导出的变量、函数或类的名称。
顺序: 导出的顺序在命名空间对象中保持不变。虽然 JavaScript 对象属性的顺序不保证，但模块的导出顺序会被保留，这对于一些依赖于导出顺序的代码很有用。

*四、`import as name` 的优缺点**

任何东西都有两面性，import * as name 也不例外。

优点：

简洁性: 一行代码搞定所有导入，省事！特别是当模块导出很多成员时，不用一个个列出来。
动态性: 如果模块后续添加了新的导出，你的代码不需要修改 import 语句就能访问到新的成员。
避免命名冲突: 可以避免不同模块导出相同名称的成员导致的冲突。例如，如果两个模块都有一个名为 calculate 的函数，你可以用 import * as ModuleA from 'moduleA'; import * as ModuleB from 'moduleB'; 然后用 ModuleA.calculate() 和 ModuleB.calculate() 来区分。

缺点：

代码体积: 即使你只用到了模块中的一小部分成员，也会把整个模块都导入进来，可能造成代码体积增大。虽然现代构建工具（如webpack, Rollup, Parcel）有tree shaking机制可以优化，但还是不如只导入需要的成员效率高。
可读性: 当你不熟悉模块的结构时，需要查看模块的源代码才能知道 name 对象里有哪些成员，可读性稍差。

*五、import { member } vs `import as name`：怎么选？**

既然有两种导入方式，那该怎么选呢？

特性	`import { member }` (具名导入)	`import * as name` (命名空间导入)
精确性	只导入需要的成员	导入所有成员
代码体积	更小	可能更大
可读性	更好	稍差
适用场景	只需要少数几个成员时	需要大量成员或模块结构不清晰时
重构友好性	模块重构可能需要修改导入语句	模块重构影响较小

总的来说：

如果只需要模块中的少数几个成员，优先使用具名导入 import { member } from 'module'。 这样可以减少代码体积，提高可读性。
*如果需要模块中的大部分成员，或者模块的结构比较复杂，不方便一个个列出，可以使用命名空间导入 `import as name from ‘module’`。** 这样可以简化代码，提高开发效率。
在某些情况下，你可能需要结合使用这两种方式。 例如，你可能需要导入一个模块中的几个常用成员，同时导入整个模块以便访问一些不太常用的成员。

六、实际应用场景

导入UI组件库: 许多UI组件库都提供了命名空间导入的方式。例如，import * as Antd from 'antd' 允许你使用 Antd.Button, Antd.Table 等组件，而无需单独导入每个组件。
导入工具函数库: 类似 Lodash, Underscore.js 这样的工具函数库，也适合使用命名空间导入。 import * as _ from 'lodash' 可以方便地使用 _.map, _.filter 等函数。
动态加载模块: 在某些情况下，你可能需要在运行时动态加载模块。 import() 函数返回一个 Promise，可以用来异步加载模块，并返回一个包含模块导出的命名空间对象。
```
async function loadModule() {
  const module = await import('./myModule.js');
  console.log(module.myFunction());
}
```
处理循环依赖: 在复杂的项目中，可能会出现循环依赖的情况。命名空间导入可以帮助你打破循环依赖，因为它可以延迟对模块成员的访问，直到模块完全加载完成。

七、一些需要注意的点

default 导出: 如果模块使用了 export default 导出了一个默认成员，那么在使用 import * as name 导入时，这个默认成员会成为 name 对象的 default 属性。
```
// myModule.js
export default function hello() {
  console.log('Hello!');
}

// app.js
import * as MyModule from './myModule.js';
MyModule.default(); // 输出: Hello!
```
建议：尽量避免使用 default 导出，因为它会增加代码的复杂性。优先使用具名导出。
__esModule 属性: 在使用 import * as name 导入 CommonJS 模块时，命名空间对象会有一个 __esModule 属性，它的值为 true。这个属性是用来区分 ES Module 和 CommonJS 模块的。
TypeScript: 在 TypeScript 中，import * as name 可以很好地与类型定义结合使用。你可以为命名空间对象定义类型，从而获得更好的类型检查和代码提示。

八、总结

import * as name 是一种方便的导入模块的方式，它可以简化代码，避免命名冲突，但同时也可能增加代码体积，降低可读性。在实际开发中，需要根据具体情况选择合适的导入方式，才能写出高质量的 JavaScript 代码。

希望今天的讲解能帮助大家更好地理解和使用 import * as name。记住，没有银弹，只有最适合你的工具！选择合适的工具，才能事半功倍。谢谢大家！

发表回复 取消回复

发表回复取消回复