ES6 module模块

概述
ES6中的module指的是JavaScript模块化规范中的一种。它通过export和import语法来导出和导入模块中的变量、函数、类等内容。

使用ES6模块化的好处包括：解决了模块化的问题。消除了全局变量。管理加载顺序。

使用
在ES6模块中，一个文件代表一个模块
当使用script标签加载模块时，需要加type="module"。
export命令用于导出内容。
import命令用于导入内容。

export default 和 import

• 一个模块只能有一个export default。
• 相同内容的import命令只会执行一次。

方式一：导出变量

// module.js
const age = 18;
export default age;

　import age from "./module.js";
　console.log(age); //18

等价于

// module.js

export default 18;

import age from "./module.js";
console.log(age); //18

方式二：导出方法

// module.js
function sayHello() {
  console.log("hello");
}
export default sayHello;

  import sayHello from "./module.js";
  sayHello();

等价于：

// module.js

export default function () {
console.log("hello");
}

import sayHello from "./module.js";
sayHello();

方式三：导出对象

// module.js

let user = { name: "小明", age: 18 };
export default user;

import user from "./module.js";
console.log(`${user.name}今年${user.age}岁`);

等价于：

// module.js

export default { name: "小明", age: 18 };

import user from "./module.js";
console.log(`${user.name}今年${user.age}岁`);

别名

导出别名：
// module.js
let name = "小明";
let age = 18;
function sayHello() {
  console.log("hello");
}
export { name as name2, age as age2, sayHello as sayHello2 };

import { name2, age2, sayHello2 } from "./module.js";
console.log(name2); //小明
console.log(age2); //18
sayHello2(); //hello

导入别名：

// module.js

let name = "小明";
let age = 18;
function sayHello() {
console.log("hello");
}
export { name, age, sayHello };import {name as name2,age as age2,sayHello as sayHello2,} from "./module.js";

console.log(name2); //小明
console.log(age2); //18
sayHello2(); //hello

整体别名：

// module.js

let name = "小明";
let age = 18;
function sayHello() {
console.log("hello");
}
export { name, age, sayHello };

import * as obj from "./module.js";
console.log(obj.name); //小明
console.log(obj.age); //18
obj.sayHello(); //hello

export default 和 export混用

// module.js

let name = "小明";
let age = 18;
function sayHello() {
  console.log("hello");
}
export { name, age, sayHello };
export default "北京市";

import address from "./module.js";
import { name, age, sayHello } from "./module.js";
console.log(address); //北京市
console.log(name); //小明
console.log(age); //18
sayHello(); //hello

等价于：

// export default必须放在前面
import address, { name, age, sayHello } from "./module.js";
console.log(address); //北京市
console.log(name); //小明
console.log(age); //18
sayHello(); //hello

this指向问题

• 在js中，顶层的this指向window对象。
• 模块中，顶层的this指向undefined。、、

// module.js

console.log(this);

<script src="./module.js"></script>
<script src="./module.js" type="module"></script>

打印输出：

import 和 import()

// mobile.js

export default "这是移动端";

// mobile.js

export default "这是移动端";

let isPc = true;
if (isPc) {
    import("./pc.js").then((module) => {
        console.log(module.default);
    });
} else {
    import("./mobile.js").then((module) => {
        console.log(module.default);
    });
}

导入导出复合写法

// module1.js

export const age = 18;

// module1.js

export const age = 18;

import { age } from "./module2.js";
console.log(age); //18

module2.js可简写为：

// module2.js

export { age } from "./module1.js";

模块的继承

//base.js

let name = "Tom";
let age = 28;
let address = "beijing";

export { name, age, address }

//children.js

export * from "./base.js"
export function sayHello() {
    console.log("sayHello");
};

<script type="module">
    import * as myobj from "./js/children.js";

    console.log(myobj.name, myobj.age, myobj.address);
    myobj.sayHello();
</script>

//Tom 18 beijing
//sayHello

module加载的本质

ES6模块的运行机制是这样的：当遇到import命令时，不会立马去执行模块，而是生成一个动态的模块只读引用，等到需要用到时，才去解析引用对应的值。

由于ES6的模块获取的是实时值，就不存在变量的缓存。

//export1.js
export let count = 1;
export function add() {
    count++;
}

<img id="myImg">
<script type="module">
    import {count,add} from "./js/export1.js";
    console.log(count); //1
    add();
    add();
    console.log(count); //3
</script>