谷粒商城实战笔记-35-前端基础-ES6-模块化

一，什么是模块化

模块化编程是一种软件设计技术，它将程序分解为独立的、可复用的部分，每个部分负责执行特定的功能。

这种设计方法在多种编程语言中都有应用，包括JavaScript（JS）。模块化的概念最早源自于结构化编程，其核心思想是通过将复杂问题分解为更小、更易于管理的单元来简化开发过程，同时也提高了代码的可读性和可维护性。

在Java中，模块化的实现通常是通过“包”（package）来完成的。包是一个命名空间，可以包含类、接口和其他包。要使用一个包中的类或接口，需要在源文件的顶部使用import语句来导入所需的包，这确保了代码的清晰性和封装性。

相比之下，JavaScript在ES6（ECMAScript 2015）之前并没有内置的模块系统，而是通过一些模式如CommonJS或AMD来模拟模块化行为。然而，随着ES6的发布，JavaScript正式引入了原生的模块支持，使用export和import关键字来定义和使用模块。

export命令允许你从一个模块中暴露函数、对象或变量，使其可供其他模块使用。例如：

// module1.js
export function sayHello() {console.log('Hello!');
}

而import命令则用于从其他模块中导入这些暴露的元素。例如：

// main.js
import { sayHello } from './module1.js';
sayHello(); // 输出: Hello!

通过这种方式，你可以创建一系列相互独立但又可以协同工作的模块，每个模块专注于单一职责。这种分离关注点的方法不仅有助于代码的重用，也使得大型项目更加易于管理和扩展。此外，模块化还有助于避免全局命名空间的污染，因为模块内部的变量和函数默认是私有的，除非它们被明确地导出。

模块化是现代编程实践中不可或缺的一部分，它帮助开发者构建更加健壮、灵活和可维护的应用程序。

无论是Java中的包还是JavaScript中的模块，都是为了达到这一目标而设计的工具。

二，export

模块化编程在JavaScript中引入了一种全新的组织代码的方式，使得代码更加结构化、可维护和可重用。export语句在其中扮演着关键角色，它允许我们从一个模块中公开某些属性或者方法，以供其他模块使用。下面我们将进一步探讨export的不同用法及其在实际编程中的应用。

1. export语法

当我们想要从一个模块中导出一个对象时，可以像下面这样使用export语句：

// hello.js
const util = {sum(a, b) {return a + b;}
};
export { util };

但是，如果这个对象是模块中唯一的导出项，我们可以直接使用export default来简化代码：

// hello.js
export default {sum(a, b) {return a + b;}
};

这样，其他模块在导入时就不需要指定具体的名字，而是可以自由选择。

2. 批量导出

在实际开发中，一个模块可能需要导出多个变量、函数或对象。在这种情况下，可以使用export关键字批量导出多个标识符：

// user.js
let name = 'Jack';
let age = 21;export { name, age };

这样，其他模块就可以分别导入这些变量，而不需要导入整个模块：

// main.js
import { name, age } from './user.js';console.log(name); // 输出: Jack
console.log(age);  // 输出: 21

3. 默认导出

export default是一个非常有用的特性，它可以让我们在一个模块中导出一个默认的导出项，这个导出项可以是任何有效的JavaScript表达式。当有多个导出项时，通常会有一个最重要的导出项，这时使用export default就显得尤为合适。

例如，如果我们想从一个模块中导出一个函数，可以这样写：

// calculator.js
export default function sum(a, b) {return a + b;
}

然后，在另一个模块中，我们可以使用import语句并给这个函数起一个新的名字：

// main.js
import mySum from './calculator.js';console.log(mySum(5, 10)); // 输出: 15

使用export default的一个好处是，导入模块时不需要大括号，使得代码更加简洁。然而，每个模块只能有一个export default语句，这意味着如果模块中有多个需要导出的项，就需要结合使用export和export default。

以下是一个示例，展示如何在一个模块中同时使用export default和export：

// mathUtils.js
function add(a, b) {return a + b;
}function subtract(a, b) {return a - b;
}// 默认导出一个乘法函数
export default function multiply(a, b) {return a * b;
}// 命名导出加法和减法函数
export { add, subtract };

在这个例子中，multiply函数被作为默认导出，而add和subtract函数则是命名导出。这意味着其他模块可以以不同的方式导入这些函数：

// main.js
import multiply, { add, subtract } from './mathUtils.js';console.log(multiply(5, 10)); // 输出: 50
console.log(add(5, 10));     // 输出: 15
console.log(subtract(10, 5)); // 输出: 5

或者，如果你只想导入默认导出的multiply函数，可以这样写：

// main.js
import multiply from './mathUtils.js';console.log(multiply(5, 10)); // 输出: 50

如果你想要导入所有的命名导出，可以使用* as语法来导入一个对象，该对象包含了所有命名导出：

// main.js
import multiply, * as math from './mathUtils.js';console.log(math.add(5, 10));     // 输出: 15
console.log(math.subtract(10, 5)); // 输出: 5

通过这种方式，你可以创建一个模块，其中包含一个核心功能（通过export default提供），以及一些辅助功能（通过export提供），从而提高代码的灵活性和可扩展性。在大型项目中，这种模块化策略尤其有用，因为它允许你精细地控制模块的接口和依赖。

三，import

1，import语法

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
例如要使用上面导出的 util：

// 导入 util
import util from 'hello.js'
// 调用 util 中的属性
util.sum(1,2)

2，批量导入

要批量导入前面导出的 name 和 age：

import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")

但是上面的代码暂时无法测试，因为浏览器目前还不支持 ES6 的导入和导出功能。

除非借助于工具，把 ES6 的语法进行编译降级到 ES5，比如Babel-cli工具。