《三》.2 - 基本导入导出

基本导入导出

模块的引入

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

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

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

模块的基本导出和导入

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

1. 基本导入导出
2. 默认导入导出

基本导出

类似于 exports.xxx = xxxx

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

基本导出的语法如下：

export 声明表达式

或

export { 具名符号 }

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

基本导入

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

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

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

注意以下细节：

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

代码

index.html
在此，es6模块化不会参生多余的script标签！
<script src="./module/a.js" type="module"></script>

a.js

import { a } from"./b.js";  //  名a必须要和b模块名相同

import "./c.js";  // 可以用于初始化时候直接调用b模块

import  { name , age } from "./c.js"
console.log( a ); // 1

console.log(name, age)

b.js

console.log("b模块运行了！")
export  let a = 1;
export let b = 2;
export let c = { name : "yuwei", age : 18}

c.js

import * as obj from "./b.js";
console.log("我是C模块！")
console.log(obj); // 返回一个b导出的所有内容
var name = "宇威";
var age = "18";
export { name , age }

执行顺序

b模块运行了！
我是C模块！
Module {Symbol(Symbol.toStringTag): "Module"}
1
宇威 18