ES6模块化模块化是一种设计和组织系统、产品或软件的方法，通过将其分解为相对独立的模块或组件，以便更容易管理、维护和理解

一、模块化

模块化是一种设计和组织系统、产品或软件的方法，通过将其分解为相对独立的模块或组件，以便更容易管理、维护和理解。

模块化的一些关键特点和优势

分解复杂性：模块化将系统分解为小的、可管理的部分，使其更易于理解和开发。
可重用性：模块可以独立开发和测试，然后在不同的项目中重复使用，从而提高效率和减少重复工作。
灵活性：通过替换、添加或删除模块，系统可以轻松地进行定制和扩展，以满足不同的需求。
维护性：当系统中的某个部分需要修改或修复时，只需关注受影响的模块，而不必改动整个系统。
并行开发：多个团队或开发者可以同时工作在不同的模块上，以加快开发进程。
降低错误率：模块化允许更容易进行单元测试和验证，从而降低错误的风险。

二、ES6模块化

1. 模块定义

在ES6中，一个文件就是一个模块。每个模块都有自己的作用域，模块内部的变量和函数默认不会污染全局作用域。

2. 导出

通过关键字 export，可以将模块内的变量、函数、类等导出。

作为一个模块，我们不希望所有的内容全都暴露给外部

2.1 默认导出（`一个模块中只有一个默认导出`）

export default xxx;

2.2 命名导出

export const b = 1;
export { obj, fn }

const a = 0
export const b = 1 // 命名导出
export const c = 2 // 命名导出
const obj = {
    name: 'lili',
    age: 18,
    gender: '女'
}
const fn = () => {
    console.log('我是fn');
}
export default a; // 将变量a作为默认导出暴露
export { obj, fn } // 命名导出

3. 导入

通过关键字 import，可以引入其他模块导出的内容

3.1 导入默认模块时，变量名可以自主指定，无需和模块中的变量名对应

import n from './m.js' <=> import a from './m.js'
在网页中导入模块时，模块的路径必须写完整（/或./或../开头，扩展名也得写上）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        默认情况下，script标签中不能使用import语句，
        如果想让其支持模块化，必须设置script的type属性为module
     -->
    <script type="module">
        // 导入m模块中的默认模块
        import n from './m.js'
        console.log(n); // 0
        console.log(window.n); // undefined
    </script>
</body>

</html>

3.2 导入指定内容

import { b, c } from './m.js'

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        默认情况下，script标签中不能使用import语句，
        如果想让其支持模块化，必须设置script的type属性为module
     -->
    <script type="module">
        // 导入m模块中的命名模块
        import { b, c } from './m.js'
        console.log(b);// 1
        console.log(c);// 2
    </script>
</body>

</html>

import { b as hello, c } from './m.js' 导入b并重命名为hello,这个时候使用hello作为变量名，b在这里失效了，无法使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        默认情况下，script标签中不能使用import语句，
        如果想让其支持模块化，必须设置script的type属性为module
     -->
    <script type="module">
        // 导入m模块中的命名模块
        // 导入b并重命名为hello,这个时候b就没有用了
        import { b as hello } from './m.js'
        console.log(hello);// 1
        console.log(b);// Uncaught ReferenceError: b is not defined
    </script>
</body>

</html>

3.3 导入默认及指定内容

import a, { b, c, obj, fn } from './m.js'

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        默认情况下，script标签中不能使用import语句，
        如果想让其支持模块化，必须设置script的type属性为module
     -->
     <script type="module">
        // 命名和默认都导入
        import a, { b, c, obj, fn } from './m.js'
        console.log(a); // 0
        console.log(window.a); // undefined
        console.log(b);// 1
        console.log(c);// 2
        console.log(obj); // {name: 'lili', age: 18, gender: '女'}
        fn() // 我是fn
    </script>
</body>

</html>

4. 总结

ES6模块化的引入使JavaScript更具结构性和组织性，有助于管理大型项目，减少全局作用域的污染，并提高代码的可维护性。

ES6模块化