export 、
export default
在JavaScript中,export
和export default
都是用于导出模块的关键字,但它们有一些不同的使用方式和应用场景。
export
关键字用于导出模块中的变量、函数或类,并且可以导出多个成员。例如:
// 导出单个变量
export const myVar = 10;
// 导出函数
export function myFunc() {
// code...
}
// 导出类
export class MyClass {
// code...
}
// 导出多个成员
const var1 = 1;
const var2 = 2;
export { var1, var2 };
在导入模块时,需要使用相应的语法来引入导出的成员。例如:
// 导入单个变量
import { myVar } from './myModule';
// 导入函数
import { myFunc } from './myModule';
// 导入类
import { MyClass } from './myModule';
// 导入多个成员
import { var1, var2 } from './myModule';
export default
关键字用于导出模块中的默认成员,一个模块只能有一个默认导出。例如:
// 导出默认成员
export default myVar;
// 导出默认函数
export default function() {
// code...
}
// 导出默认类
export default class {
// code...
}
在导入模块中的默认成员时,可以使用任意的名称来引用,默认成员的名称不需要与导出时的名称相同。例如:
// 导入默认成员
import myDefault from './myModule';
// 导入默认函数
import myDefaultFunc from './myModule';
// 导入默认类
import MyDefaultClass from './myModule';
需要注意的是,如果一个模块既有默认导出又有其他导出成员,则在导入时需要使用花括号来指定需要导入的其他成员。例如:
// 导出默认成员和一个变量
export default myDefault;
export const myVar = 10;
// 导入默认成员和变量
import myDefault, { myVar } from './myModule';
总结起来,export
用于导出模块中的成员,可以导出多个成员;export default
用于导出模块中的默认成员,一个模块只能有一个默认导出。在导入模块时,需要使用相应的语法来引入导出的成员。
import
在JavaScript中,使用import
关键字可以导入其他模块中的变量、函数或类。具体使用方法如下:
- 导入单个变量、函数或类:
import { variable, functionName, className } from './moduleName';
其中,moduleName
是被导入的模块的路径,可以是相对路径或绝对路径。
- 导入所有变量、函数或类:
import * as moduleName from './moduleName';
这种写法将把被导入模块中的所有导出内容作为一个对象赋值给moduleName
。
- 给导入的内容起别名:
import { functionName as aliasName } from './moduleName';
这种写法可以给被导入的函数或变量起一个新的名称。
- 默认导入:
import moduleName from './moduleName';
moduleName
是被导入模块中使用export default
导出的内容。
动态导入
是JavaScript ES2019中新增的语法特性,它可以通过将代码按需导入,从而实现更加高效的加载方式。动态导入允许用户在运行时动态地加载模块,这是ES6中静态导入所无法实现的。
在实际运用当中,我们可以通过导入语法结合WebPack
等打包工具,来构建出一个按需加载的前端工程,实现对运行时依赖的处理。
通过动态导入,我们可以在代码运行时才加载需要的模块,而不是将所有的模块一次性加载,
这样一来,我们就可以避免因为页面过于庞大而导致的页面加载缓慢的问题。在实际应用中,我们可以通过如下方式进行动态导入:
import(模块路径).then((模块) => {
// 使用导入的模块
}).catch((error) => {
// 捕获错误
});
我们可以看到,动态导入语法提供了一种延迟模块加载的方法。当模块加载出现问题时,它还会提供一种机制来处理异常,使得我们可以更好地控制模块加载的过程。此外,与 import 语句的顶层模块静态加载方式不同
(import … from …),动态导入功能也可以在异步上下文中使用。
在实际运用当中,动态导入不仅可以实现包括按需加载的功能,还可以解决一些较为复杂的代码逻辑问题。
例如,当我们希望在实例化一个对象时,只有在特定的条件下才会引入某一个模块,就可以用到动态导入。
比如,我们可以通过如下方法,
async function loadModule() {
const module = await import(模块路径);
return module;
}
if (someCondition) {
const module = await loadModule();
const instance = new module.Class();
}
优点
与传统的模块导入方法相比,动态导入的另一个优点在于它更加灵活。
我们可以直接使用模板字面量来动态构造模块路径,从而实现动态导入的目的。例如:
const dynamicImport = async (moduleName) => {
const module = await import(`./modules/${moduleName}.js`);
return module;
}
const myDynamicModule = await dynamicImport('myDynamicModule');
在此例中,我们使用了模板字面量来构造动态导入的路径。这使得代码不仅更加灵活,而且减少了不必要的目录层次结构。
除了动态导入之外,我们还可以使用 CommonJS
或 AMD 模块
系统来实现相同的效果。不过与 CommonJS
和 AMD
不同之处在于,动态导入还允许我们访问 ES6 模块系统。同时,它也没有 CommonJS 和 AMD 的缓存和阻塞机制,允许我们加载和处理更多的模块。
注意事项:
import
语句必须放在其他代码的前面,不能在函数内部或条件语句中使用。- 导入的模块路径必须是字符串常量,不能使用变量。
- 导入的模块路径可以省略文件扩展名,Node.js会默认添加
.js
扩展名。
以上是import
语句的一些常见用法,具体使用时可以根据实际情况进行调整。