JavaScript模块化语法

Es6导入导出

ES6（ECMAScript 2015）引入了一种新的模块化语法，使用 import 和 export 关键字来实现模块的导入和导出。这种语法提供了更直观、简洁和标准化的模块化开发方式。

下面是 ES6 模块的导入和导出语法的示例：

1. 导出单个值（默认导出）：

   // 导出模块
   export default function add(a, b) {
     return a + b;
   }

2. 导入默认导出的值：

   // 导入模块
   import add from './myModule';
   console.log(add(2, 3)); // 输出：5

3. 导出多个值（命名导出）：

   // 导出模块
   export function add(a, b) {
     return a + b;
   }
   
   export function subtract(a, b) {
     return a - b;
   }

4. 导入命名导出的值：

   // 导入模块
   import { add, subtract } from './myModule';
   console.log(add(2, 3)); // 输出：5
   console.log(subtract(5, 2)); // 输出：3

5. 导入所有命名导出的值（命名空间导入）：

   // 导入模块
   import * as myModule from './myModule';
   console.log(myModule.add(2, 3)); // 输出：5
   console.log(myModule.subtract(5, 2)); // 输出：3

6. 导出和导入默认导出与命名导出的组合：

   // 导出模块
   export default function add(a, b) {
     return a + b;
   }
   
   export function subtract(a, b) {
     return a - b;
   }

   // 导入模块
   import myAdd, { subtract } from './myModule';
   console.log(myAdd(2, 3)); // 输出：5
   console.log(subtract(5, 2)); // 输出：3

需要注意的是，ES6 模块的导入和导出语法在支持的现代浏览器和模块打包工具中得到了广泛采用。然而，在旧版浏览器中可能不支持 ES6 模块语法，可以使用工具如 Babel 进行转换或使用其他模块加载器实现兼容性。

旧版的CommonJS和AMD导出导入

CommonJS 和 AMD 都是 JavaScript 中的模块系统，用于在旧版 JavaScript 中实现模块化开发。它们在语法和使用方式上有所不同。

1. CommonJS：

   • 导出模块：使用 module.exports 或 exports 对象将值赋给导出的模块。

     // 导出模块
     module.exports = {
       foo: 'Hello',
       bar: 'World'
     };

   • 导入模块：使用 require 函数导入其他模块，并获取其导出的值。

     // 导入模块
     const module = require('./myModule');
     console.log(module.foo); // 输出：Hello

2. AMD（异步模块定义）：

   • 导出模块：使用 define 函数定义模块，并通过返回值来导出模块。

     // 导出模块
     define(function() {
       return {
         foo: 'Hello',
         bar: 'World'
       };
     });

   • 导入模块：使用 require 函数异步加载其他模块，并在回调函数中获取其导出的值。

     // 导入模块
     require(['./myModule'], function(module) {
       console.log(module.foo); // 输出：Hello
     });

CommonJS 在服务端和 Node.js 环境中被广泛使用，它使用同步加载模块的方式。而 AMD 则主要用于浏览器环境中，支持异步加载模块，适合于大型的前端应用程序。

需要注意的是，随着现代 JavaScript 的发展，ES6 引入了更为直观和标准化的模块语法，即使用 import 和 export 关键字。这种 ES6 模块语法在现代浏览器和支持的环境中得到了广泛采用，逐渐取代了 CommonJS 和 AMD。

希望这些信息能对您有所帮助！如果您有任何其他问题，请随时提问。