基本导入导出

模块的引入

注意：这一部分非模块化标准

目前，浏览器使用以下方式引入一个ES6模块文件

<script src="入口文件" type="module">

模块的基本导出和导入

ES6中的模块导入导出分为两种：

基本导入导出
默认导入导出

基本导出

类似于 exports.xxx = xxxx

基本导出可以有多个，每个必须有名称

基本导出的语法如下：

export 声明表达式

或

export {具名符号}

由于基本导出必须具有名称，所以要求导出内容必须跟上声明表达式或具名符号

基本导入

由于使用的是依赖预加载，因此，导入任何其他模块，导入代码必须放置到所有代码之前

对于基本导出，如果要进行导入，使用下面的代码

import {导入的符号列表} from "模块路径"

注意以下细节：

导入时，可以通过关键字as对导入的符号进行重命名
导入时使用的符号是常量，不可修改
可以使用*号导入所有的基本导出，形成一个对象

默认导入导出

默认导出

每个模块，除了允许有多个基本导出之外，还允许有一个默认导出

默认导出类似于CommonJS中的module.exports，由于只有一个，因此无需具名

具体的语法是

export default 默认导出的数据

或

export {默认导出的数据 as default}

由于每个模块仅允许有一个默认导出，因此，每个模块不能出现多个默认导出语句

默认导入

需要想要导入一个模块的默认导出，需要使用下面的语法

import 接收变量名 from "模块路径"

类似于CommonJS中的

var 接收变量名 = require("模块路径")

由于默认导入时变量名是自行定义的，因此没有别名一说

如果希望同时导入某个模块的默认导出和基本导出，可以使用下面的语法

import 接收默认导出的变量, {接收基本导出的变量} from "模块路径"

注：如果使用*号，会将所有基本导出和默认导出聚合到一个对象中，默认导出会作为属性default存在

test.js

export const a = 1;  

// 基本导出
const b = 2;  
const c = function () {  
return "function c";  
};  
export { b, c }; // 注意此处{}不是对象，是浏览器定义的语法格式【可简单的认为是对象】  

// 默认导出
export default 100

--------------------------------------------------
index.js

// 一次性全部导入  
import * as obj from "./test.js";  
console.log(obj);  
  
// 分开导入  
import def,{a,b,c} from "./test.js";  
console.log(def,a,b,c);

模块化四