印客学院大厂前端工程师训练营

//xia仔のke:3w ukoou com

JS 模块化

JavaScript 模块化是指将JavaScript代码划分为独立、可重用的模块，每个模块包含特定的功能。模块化有助于代码的组织、维护和重用，并且可以避免命名空间的冲突。随着JavaScript的不断发展，模块化方案也经历了几个阶段的演变。

模块化方案的演变

IIFE（立即调用函数表达式）: 在ES6（ECMAScript 2015）之前，IIFE是一种常见的模块化模式，通过将代码包裹在匿名函数中来避免变量泄露到全局作用域。

(function() {
    // 模块内部的代码
    var privateVar = 'I am private';
    function privateFunction() {
        // ...
    }
    window.publicFunction = function() {
        // ...
    };
})();

CommonJS: Node.js普及了CommonJS模块系统，它使用module.exports来导出模块，并使用require()来加载模块。

// math.js
function add(a, b) {
    return a + b;
}
module.exports = {
    add: add
};

// main.js
const math = require('./math.js');
console.log(math.add(1, 2));

AMD（Asynchronous Module Definition）: AMD主要用于浏览器端，通过异步加载模块以避免阻塞页面加载。它使用define函数来定义模块。
```
// math.js
```

define(['dependency'], function(dependency) { function add(a, b) { return a + b; } return { add: add }; });

// main.js require(['math'], function(math) { console.log(math.add(1, 2)); });


4. **UMD（Universal Module Definition）**:
UMD是CommonJS和AMD的兼容解决方案，可以在各种环境中工作，包括Node.js和浏览器。

5. **ES6 Modules**:
ES6引入了模块的原生支持，使用`import`和`export`关键字来导入和导出模块。

```javascript
// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(1, 2));

使用 ES6 Modules 的注意事项

默认导出：每个模块只能有一个默认导出，使用export default声明。
```
// myModule.js
export default function() {
    // ...
}
```

命名导出：可以有多个命名导出，使用export关键字声明。

// myModule.js
export function foo() {
    // ...
}
export const bar = 'bar';

动态导入：可以使用import()函数动态地导入模块，这返回一个Promise对象。
```
import('./module.js')
    .then(module => {
        // 使用模块
    });
```
兼容性：虽然ES6模块在现代浏览器和Node.js中得到了支持，但一些旧环境中可能需要使用Babel等工具进行转译。