正文

JavaScript模块调用全攻略：从ES6导入到CommonJS，一网打尽！

/0 浏览量
0416

在JavaScript的世界里，模块化编程是提高代码可维护性和可重用性的关键。随着ES6（ECMAScript 2015）的推出，模块化编程变得更加简单和强大。本文将带你深入了解JavaScript模块的调用方法，从ES6模块导入到CommonJS模块，让你一网打尽！

ES6模块导入

ES6模块是JavaScript模块化编程的未来。它通过使用import和export语句，使得模块的导入和导出变得简单明了。

1. ES6模块导出

在ES6模块中，可以使用export关键字来导出模块中的变量、函数或类。以下是一些常见的导出方式：

  • 导出单个变量：
// myModule.js
let myVar = 'I am a variable';

export { myVar };
  • 导出多个变量：
// myModule.js
let myVar1 = 'I am a variable 1';
let myVar2 = 'I am a variable 2';

export { myVar1, myVar2 };
  • 导出函数：
// myModule.js
function myFunc() {
  console.log('I am a function');
}

export { myFunc };
  • 导出类：
// myModule.js
class MyClass {
  constructor() {
    console.log('I am a class');
  }
}

export { MyClass };

2. ES6模块导入

在另一个文件中，你可以使用import语句来导入ES6模块中的导出。以下是一些常见的导入方式：

  • 导入单个变量：
// main.js
import { myVar } from './myModule.js';

console.log(myVar);
  • 导入多个变量：
// main.js
import { myVar1, myVar2 } from './myModule.js';

console.log(myVar1);
console.log(myVar2);
  • 导入函数：
// main.js
import { myFunc } from './myModule.js';

myFunc();
  • 导入类：
// main.js
import { MyClass } from './myModule.js';

const myClassInstance = new MyClass();

CommonJS模块导入

CommonJS模块是Node.js中使用的模块化规范。它与ES6模块有所不同，但同样重要。

1. CommonJS模块导出

在CommonJS模块中，使用module.exports或exports对象来导出模块中的变量、函数或类。

  • 导出单个变量：
// myModule.js
let myVar = 'I am a variable';

module.exports = myVar;
  • 导出多个变量：
// myModule.js
let myVar1 = 'I am a variable 1';
let myVar2 = 'I am a variable 2';

module.exports = { myVar1, myVar2 };
  • 导出函数：
// myModule.js
function myFunc() {
  console.log('I am a function');
}

module.exports = myFunc;
  • 导出类：
// myModule.js
class MyClass {
  constructor() {
    console.log('I am a class');
  }
}

module.exports = MyClass;

2. CommonJS模块导入

在另一个文件中，你可以使用require函数来导入CommonJS模块中的导出。

  • 导入单个变量：
// main.js
const myVar = require('./myModule.js');

console.log(myVar);
  • 导入多个变量：
// main.js
const { myVar1, myVar2 } = require('./myModule.js');

console.log(myVar1);
console.log(myVar2);
  • 导入函数：
// main.js
const myFunc = require('./myModule.js');

myFunc();
  • 导入类：
// main.js
const MyClass = require('./myModule.js');

const myClassInstance = new MyClass();

总结

本文详细介绍了JavaScript模块的调用方法，包括ES6模块和CommonJS模块。通过了解这两种模块化规范，你可以更好地组织和管理JavaScript代码，提高代码的可维护性和可重用性。希望这篇文章能帮助你更好地掌握JavaScript模块调用技巧！

-- 展开阅读全文 --