模块化的基本导出与导入

如图有两种导出方式 ， 左边的为基本导入与导出，右面为默认导出
基本导出与默认导出是可以同时存在的，但是默认导出之能允许有一个默认导出

基本导入与导出

模块的引入

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

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

引入的文件会被当做模块来运行，模块内是所有东西都不会污染全局

基本导出

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

第一种方式
export 声明表达式   
    案例  
  export let b= 123;
第二种方式
export {具名符号} // 此处并不是导出对象
    案例
    let age = 1111;
    export{age} // 将age变量的名称最为导出的名称，age变量的值，作为导出的值
  等效于 export let age = 1111;
    拓展
  export{age as AGE} // 将age变量名修改后导出

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

基本导入

由于使用的是依赖预加载，因此，导入任何其他模块，导入代码必须放置到所有代码之前
绝对不能写入判断语句中/函数内部（会发生语法错误），即使随意写（前提是在全局中，并不是在块级作用域下）会再预编译的时候进行提升至所有代码之前
对于基本导出，如果要进行导入，使用下面的代码 ：导入时使用的符号是常量，不可修改

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

导入时，可以通过关键字as对导入的符号进行重命名

import {a as A}  from './a.js';   // 将导入的关键字进行重命名

a.js里的代码

export let a = 1 ; // 将 变量 a 导出
export function text(){
} // 将函数text导出

导入时使用的符号是常量，不可修改

import {a ,text}  from './a.js';   // 将a.js中的 变量a 与函数text导入
A = 123;

控制台打印

可以使用*号导入所有的基本导出，形成一个对象

import * as a  from './a.js';

控制台打印

仅运行模块

import './a.js'; // 这条导入语句，仅会运行模块，不会用它内部的任何导出

默认导出

每个模块，除了允许有多个基本导出之外，还允许有一个默认导出
默认导出类似于CommonJS中的module.exports，由于只有一个，因此无需具有名称
具体的语法是

export default 默认导出的数据
或
export {默认导出的数据 as default} // 将导出的数据改名后导出

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

默认导入

默认导出是不需要名字的，基本导出是必须需要名字的
需要想要导入一个模块的默认导出，需要使用下面的语法

import 接收变量名 from "模块路径"
类似于CommonJS中的
let 接收变量名 = require("模块路径")

当基本导出与默认导出同时存在时怎吗导入呢

a.js代码

export default {
    b:"这是默认导出变量b的内容",
    deFn: function(){
    }
};
export let a = "变量a的内容";
export function fn(){
}

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

import * as data from './a.js'

控制台打印

同时导入某个模块的默认导出和基本导出

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

案例

import defa, {a,fn} from './a.js'

控制打印效果