JavaScript常用模块规范，以及它们的导入导出语法

JavaScript 中有几种主要的模块规范，各自有不同的导入和导出语法。以下是常见的模块规范及其相应的导入和导出方法：

1. CommonJS

描述：CommonJS 是主要用于服务器端 JavaScript 的模块规范，被广泛应用于 Node.js。

导出

使用 module.exports 或 exports 来导出模块内容。

// 导出一个单一值
// module.js
function myFunction() {
    console.log('Hello from myFunction');
}
module.exports = myFunction;

// 导出多个属性
// anotherModule.js
exports.myFunc1 = function() {
    console.log('This is myFunc1');
};
exports.myFunc2 = function() {
    console.log('This is myFunc2');
};

导入

使用 require() 函数来导入模块。

// 导入模块
const myFunction = require('./module');
myFunction(); // 调用导入的函数

const { myFunc1, myFunc2 } = require('./anotherModule');
myFunc1();
myFunc2();

---

2. AMD（Asynchronous Module Definition）

描述：AMD 主要用于浏览器环境，支持异步加载模块。

定义和导出

使用 define 函数来定义模块。

// module.js
define([], function() {
    return {
        myFunction: function() {
            console.log('Hello from myFunction in AMD');
        }
    };
});

导入

使用 require() 函数来加载依赖模块。

// app.js
require(['module'], function(module) {
    module.myFunction(); // 调用导入的函数
});

---

3. ES6 Modules（ECMAScript 2015 Modules）

描述：ES6 Modules 是现代 JavaScript 提供的一种标准化模块机制，可以在浏览器和 Node.js 中使用。

导出

使用 export 和 export default 来导出模块内容。

// module.js
// 命名导出
export const myVariable = 'Hello';

export function myFunction() {
    console.log('Hello from myFunction in ES6');
}

// 默认导出
export default function() {
    console.log('Hello from the default function');
}

导入

使用 import 语句来导入模块。

// app.js
import myDefaultFunction, { myVariable, myFunction } from './module.js';

console.log(myVariable); // 输出: Hello
myFunction(); // 调用 named export
myDefaultFunction(); // 调用 default export

---

4. UMD（Universal Module Definition）

描述：UMD 是一种通用的模块定义模式，旨在兼容多种模块系统（CommonJS、AMD 和全局变量）。

定义和导出

使用 define 和 this 来适配多种环境。

// module.js
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define([], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory();
    } else {
        // Global variable
        root.myModule = factory();
    }
}(this, function () {
    return {
        myFunction: function() {
            console.log('Hello from UMD');
        }
    };
}));

导入

根据环境不同而异。

// 在 AMD 环境中
require(['module'], function(module) {
    module.myFunction();
});

// 在 CommonJS 环境中
const myModule = require('./module');
myModule.myFunction();

// 在全局环境中
myModule.myFunction();

---

总结

• CommonJS：使用 require() 和 module.exports/exports。
• AMD：使用 define() 和 require()。
• ES6 Modules：使用 import 和 export/export default。
• UMD：采用自执行函数来兼容多种模块环境。

选择模块规范时，可以根据项目的运行环境和需求来决定使用哪种方式。对于现代前端开发，ES6 Modules 正逐渐成为主流选择。