简介: 在JavaScript中,export
和 export default
是 ES6 模块系统的核心部分,用于从文件中导出函数、关键字,对象或值,使其可以在其他文件中通过 import
语句导入和使用,而 exports
和 module.exports
是CommonJS模块系统的一部分,在 Node.js 环境中,你可以使用 exports
或 module.exports
来导出模块,但这并不是 ES6 标准的一部分。
Tips:默认的js文件中是不支持es6中的import、export语法的,因为Node.js 在早期版本中采用的是 CommonJS 模块规范,它使用 require
和 module.exports
来导入和导出模块。
如何启用 ES6 模块支持?
-
在 package.json 文件中设置 "type": "module",这样 Node.js 就会将所有 .js 文件视为 ES6 模块。
-
将文件扩展名改为 .mjs,这样 Node.js 会自动将其视为 ES6 模块。
-
在html的script 标签中添加type="module"属性,就像这样<script type="module" src="main.js"></script>。
1、export (ES6)
注意事项:
导出时(export)
-
命名导出:使用export关键字导出变量、函数、类或值时,需要为它们指定名称。这些名称将在其他模块中用于导入。
-
默认导出与命名导出:export default用于导出模块的默认值,而命名导出使用export关键字后跟变量名或函数名。一个模块只能有一个默认导出,但可以有多个命名导出。
-
导出表达式:你可以直接导出变量、函数或类的值,或者导出它们的计算结果(如表达式)。
-
重新导出:你可以使用export { name1, name2, ... } from 'module-name'语法来重新导出另一个模块的命名导出。
引入时(import)
-
命名匹配:当使用命名导入时,必须确保导入的名称与导出模块中定义的名称完全匹配。
-
默认导入与命名导入:使用import关键字时,可以指定一个名称来接收默认导出(import name from 'module-name'),或者使用花括号来接收命名导出(import { name1, name2 } from 'module-name')。
-
静态分析:与默认导出一样,import语句也是静态的,需要在编译时确定模块的路径。
-
路径正确性:确保在import语句中指定的模块路径是正确的。相对路径或绝对路径都可以,但如果是相对路径,需要注意当前文件与目标模块文件之间的相对位置。
-
模块加载:import语句会在运行时加载模块,如果模块不存在或发生错误,程序将抛出异常。
export
关键字是ES6模块系统的一部分,它允许你从一个文件中导出多个变量、函数、类或任何其他值。导入时,你可以根据需要选择性地导入这些值。
实例1
// myModule.js
export const myVariable = "Hello from myVariable!";
export function myFunction() {
console.log("Hello from myFunction!");
}
// myIndex.js
import { myVariable, myFunction } from './myModule';
console.log(myVariable); // 输出 "Hello from myVariable!"
myFunction(); // 输出 "Hello from myFunction!"
实例2
// debounce.js导出函数
// 防抖函数实现
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
export { debounce };// 使用 export 导出防抖函数
// app.js
// 导入防抖函数
import { debounce } from './debounce';
// 假设你有一个需要防抖的函数
function doSomething() {
console.log('Doing something...');
}
// 使用防抖函数包装 doSomething
const debouncedDoSomething = debounce(doSomething, 500); // 设置500毫秒的防抖时间
// 在某个高频事件中调用防抖函数
window.addEventListener('resize', debouncedDoSomething);
2、export default (ES6)
注意事项:
导出时(export default)
-
单一导出:export default 只能用于导出一个模块、函数、对象或值。你不能在同一个文件中使用多个 export default。
-
命名无要求:在导出时,你可以为 export default 的内容指定任何名称,但在引入时这个名称会被忽略。
-
函数表达式:你可以直接使用函数表达式进行默认导出,如 export default function myFunc() {},或者使用匿名函数 export default function() {}。
-
变量导出:虽然不能直接使用 export default let variable = ... 这样的语法,但你可以先将变量赋值给一个函数或对象,然后使用 export default 导出这个函数或对象。
引入时(import)
-
命名自由:在引入时,你可以为导入的模块指定任何名称,因为 export default 允许你在导入时使用任意名称。
-
无需花括号:与命名导出不同,引入默认导出时不需要使用花括号 {}。
-
静态分析:由于 import 语句是静态的,编译器需要在编译时就能确定模块的路径。这意味着你不能在运行时动态地改变 import 的路径。
-
路径正确性:确保引入路径(./path/to/module)是正确的,否则会导致模块未找到的错误。
export default
允许你为一个模块指定一个默认导出。这意味着导入该模块的文件可以使用任何名称来接收这个默认导出,而不仅仅是在导出时使用的名称。
实例1
// myModule.js 导出简单对象
const myDefaultValue = "Hello from export default!";
export default myDefaultValue;
// myIndex.js 引入导出的对象
import anythingModule from './myModule';
// 注意这里我们使用了 "anythingModule" 这个名称,但它可以是任何名称
console.log(anythingModule); // 输出 "Hello from export default!"
实例2
// myObject.js
// 使用 export default 导出对象
export default {
name: 'John Doe',
age: 30,
greet: function() {
console.log('Hello, my name is ' + this.name);
}
};
// anotherFile.js
// 这里可以使用任意名称引入导出的对象
import myCustomObject from './myObject.js';
// 现在你可以使用引入的对象
console.log(myCustomObject.name); // 输出 "John Doe"
myCustomObject.greet(); // 输出 "Hello, my name is John Doe"
实例3
// debounce.js 导出防抖函数
// 防抖函数
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
export default debounce;// 使用 export default 导出防抖函数
// app.js 引入导出的防抖函数
import debounce from './debounce';
// 假设你有一个需要防抖的函数
function doSomething() {
console.log('Doing something...');
}
// 使用防抖函数包装 doSomething
const debouncedDoSomething = debounce(doSomething, 500); // 设置500毫秒的防抖时间
// 在某个高频事件中调用防抖函数
window.addEventListener('resize', debouncedDoSomething);
Tips:默认的js文件中是不支持es6中的import、export语法的,
需要在package.json 文件中添加 "type": "module",
或者在html中使用<script type="module" src="main.js"></script>。
3、exports (CommonJS)
注意事项:
导出时(exports)
-
exports 和 module.exports:exports 是 module.exports 的一个引用。当你为 exports 分配一个新值时,它不再引用 module.exports。因此,通常推荐直接使用 module.exports,以避免混淆。
-
导出类型:你可以导出函数、对象、值等。如果导出一个单一的值,通常使用 module.exports = value;。如果导出多个值,则使用 exports.name = value; 或 module.exports = { name: value };。
-
不要混用:在同一个模块中,不要混用 exports 和 module.exports 来导出不同的内容,因为这会导致混淆和不可预期的行为。
-
导出函数或类:当你导出函数或类时,可以直接将函数或类赋值给 module.exports。
引入时(require)
-
路径:使用 require 引入模块时,需要提供正确的文件路径。可以是相对路径(如 ./myModule)或绝对路径(如 /path/to/myModule)。此外,Node.js 还会查找 node_modules 目录中的模块。
-
赋值:require 语句会将引入的模块内容赋值给一个变量。你可以为这个变量指定任何名称。
-
缓存:Node.js 会缓存已加载的模块,这意味着多次 require 同一个模块会返回相同的对象(除非使用 require.cache 手动清除缓存)。
-
循环依赖:虽然Node.js可以处理一定程度的循环依赖,但过度使用或不当使用循环依赖可能导致不可预测的行为或错误。因此,应尽量避免不必要的循环依赖。
exports
对象在Node.js环境中特别常见,它是模块系统的一部分。当你创建一个新的模块文件时,exports
对象默认是可用的,你可以向它添加属性,这些属性可以在其他文件中通过 require
函数导入使用。
实例1
// myModule.js
exports.myFunction = function() {
console.log("Hello from myFunction!");
};
exports.myVariable = "Hello from myVariable!";
// myIndex.js
const myModule = require('./myModule');
myModule.myFunction(); // 输出 "Hello from myFunction!"
console.log(myModule.myVariable); // 输出 "Hello from myVariable!"
4、module.exports
注意事项:
导出时(module.exports)
-
导出内容:module.exports 可以导出任何 JavaScript 数据类型,包括函数、对象、数组、字符串、数字等。一旦你为 module.exports 分配了一个值,它将替代默认的导出对象。
-
不要重复赋值:一旦你为 module.exports 分配了一个值,之后的任何对 module.exports 的赋值操作都将覆盖之前的值。因此,通常建议在文件的顶部进行 module.exports 的赋值。
-
导出函数:如果你导出的是一个函数,确保该函数在调用时可以访问到它需要的所有外部变量和上下文。
-
模块缓存:Node.js 会缓存已加载的模块,这意味着如果你多次 require 同一个模块,它将只执行一次,并返回第一次执行的结果。确保你的模块在导出时处于正确的状态。
-
避免循环依赖:虽然 Node.js 可以处理一定程度的循环依赖,但过度使用或不当使用循环依赖可能导致未定义的行为或错误。
引入时(require)
-
路径:使用 require 引入模块时,需要提供正确的文件路径。可以是相对路径(如 ./myModule)或绝对路径(如 /path/to/myModule)。如果省略路径,Node.js 将查找 node_modules 目录中的模块。
-
命名:你可以为引入的模块指定任何变量名,这通常是模块导出的主要功能的名称。
-
错误处理:如果 require 无法找到指定的模块,它将抛出一个错误。确保你的代码可以妥善处理这些错误,特别是在动态引入模块时。
-
缓存:由于 Node.js 缓存已加载的模块,所以 require 的结果将始终是第一次加载时的结果,除非你清除 require.cache。
可以看到module.exports和exports的使用特性是差不多的,下面是使用实例:
实例1
// myModule.js
const myValue = 'Hello, world!';
// 使用 module.exports 导出单一值
module.exports = myValue;
// app.js
// 引入导出的单一值
const myValue = require('./myModule');
console.log(myValue); // 输出 "Hello, world!"
实例2
// myModule.js
// 使用 module.exports 导出对象
module.exports = {
myFunction: function() { /* ... */ },
anotherValue: 'Another value'
};
// app.js
// 引入导出的多个值(如果 myModule.js 是这样导出的)
const myModule = require('./myModule');
console.log(myModule.myFunction); // 输出 myFunction 函数
console.log(myModule.anotherValue); // 输出 "Another value"
5、module.exports和
exports的
使用建议
-
一致性:在你的模块中,选择使用
module.exports
或exports
,并保持一致。这样可以避免混淆,并使得其他开发者更容易理解你的代码。 -
简洁性:如果你只需要导出一个值(如一个函数或对象),使用
module.exports
通常更简洁。 -
扩展性:如果你打算逐步添加多个导出项,并且想要保持对
exports
对象的引用,那么使用exports
可能更合适。 -
避免混用:不要在同一模块中混用
exports
和module.exports
来导出不同的内容,这会导致不可预期的行为。
小结:
-
exports 是CommonJS模块系统的一部分,常见于Node.js环境。
-
export 和 export default 是ES6模块系统的一部分,适用于现代浏览器和Node.js环境(通过Babel等转换工具)。
-
export 允许你导出多个值,而 export default 允许你指定一个默认导出。
-
exports 和 export 在语法和用法上有所不同,但它们都实现了模块化的核心概念,封装和组织代码以便重用。