ES6 export import - 技术栈

1.Export

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出， 声明的同时导出变量、函数以及类

javascript 复制代码

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

或者用更好的方式：用大括号指定要输出的一组变量

javascript 复制代码

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

除了输出变量，还可以输出函数或者类（class)

javascript 复制代码

export function multiply(x, y) {
  return x * y;
};

export 命令规定的是对外接口，必须与模块内部变量建立一一对应的关系

javascript 复制代码

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};


// 报错
export 1;

// 报错
var m = 1;
export m;

总结：

在 JavaScript 中，export 关键字用于将声明（变量、函数、类等）从一个模块导出，使其可以在其他模块中导入和使用。export 关键字可以与 import 关键字一起使用，用于模块之间的依赖管理。

导出语法

命名导出（Named Exports）

使用花括号 {} 将要导出的内容包裹起来。
可以导出多个声明，用逗号分隔。

javascript 复制代码

// 导出单个函数 export function myFunction() {} 
// 导出多个变量 
export const myVar1 = 'Hello'; 
export let myVar2 = 123; 
// 导出多个函数 
export { myFunction1, myFunction2 }; 
function myFunction1() {} 
function myFunction2() {}

默认导出（Default Export）

用 export default 语法导出一个默认的值（可以是函数、类、对象等）。
一个模块只能有一个默认导出。

javascript 复制代码

// 导出一个函数作为默认导出 
export default function() {} 
// 导出一个类作为默认导出 
export default class MyClass {} 
// 导出一个对象作为默认导出 
const myObject = { name: 'John', age: 30 }; 
export default myObject;

解析流程

当 JavaScript 解释器解析模块时，它会执行以下步骤来处理 export 关键字后面的内容：

**命名导出：**解释器会识别 export { ... } 形式的语句，并将花括号中列出的变量、函数或类等声明标记为模块的命名导出。

**默认导出：**解释器会识别 export default ... 形式的语句，并将其后的值标记为模块的默认导出。注意，只有一个默认导出可以存在于一个模块中。

这些导出的声明和默认值会在模块加载时被收集和准备好，以便其他模块可以通过 import 语句访问它们。JavaScript 引擎在执行模块加载时会根据导出的声明和默认值建立模块的导出符号表，以便其他模块可以按名称或默认方式引用它们。

之前的例子中，使用import导入时，都需要知道模块中所要加载的变量名或函数名，用户可能不想阅读源码，只想直接使用接口，就可以用export default命令，为模块指定输出

Import

*******import和export命令只能在模块的顶层，不能在代码块之中。否则会语法报错。

这样的设计，可以提高编译器效率，但是没有办法实现运行时加载。

因为require是运行时加载，所以import命令没有办法代替require的动态加载功能。

所以引入了import()函数。完成动态加载。

复制代码

import(specifier)

specifier用来指定所要加载的模块的位置。import能接受什么参数，import()可以接受同样的参数。

import()返回一个Promise对象。

javascript 复制代码

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

5.import()函数适用场合

1）按需加载：

复制代码

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

above： import模块在事件监听函数中，只有用户点击了按钮，才会加载这个模块。

2）条件加载：

import()可以放在if...else语句中，实现条件加载。

javascript 复制代码

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}