ES6 Module模块化

ES6 Module模块化

概述

ES6提供了模块化的设计，可以将具有某一类特定功能的代码放在一个文件里，在使用时，只需要引入特定的文件，便可以降低文件之间的耦合性。

用法

• export 负责定义模块对外输出内容。
• import 负责引入内容

export

• 相同变量只能 export 1次。
• 可以通过 as 关键字设置别名。

统一导出

let name = "小明";
let age = 18;
let sex = true;
let address = ["北京市", "海淀区"];
let userInfo = {
    name, age, sex
};
function sayHello() {
    console.log("hello");
}

export {name, age, sex, address, userInfo, sayHello};

同时定义变量并且导出

export let name = "小明";
export let age = 18;
export let sex = true;
export let address = ["北京市", "海淀区"];
export let userInfo = {
    name, age, sex
};
export function sayHello() {
    console.log("hello");
}

使用别名

let name = "小明";
let age = 18;

export {name as newName, age as newAge};

import

• import 的变量名必须与 export 的变量名一致。
• 相同的变量名只能 import 1次。
• import 命令具有提升效果，会将 import 的内容提升到文件头部。
• 多次 import，只会加载1次。
• import 变量是只读的，不可修改。
• 通过 as 关键字设置别名。
• 可以通过 * 和 as 关键字进行整体加载。

在 HTML 中使用，需要使用 script 标签：

<script type="module">
    import {name, age} from './myexport.js';
    console.log(name);
    console.log(age);
</script>

统一引入

import {name, age, sex, address, userInfo, sayHello} from './myexport.js';

console.log(name);
console.log(age);
console.log(sex);
console.log(address);
console.log(userInfo);
sayHello();

提升效果：

console.log(name);
console.log(age);
import {name, age} from './myexport.js';

设置别名

import {name as newName, age as newAge} from './myexport.js';

console.log(newName);
console.log(newAge); 

整体加载

import * as user from './myexport.js';

console.log(user.name);
console.log(user.age);
console.log(user.sex);
console.log(user.address);
console.log(user.userInfo);
user.sayHello();

export default

如果不需要设置变量名，可以使用 export default 命令。

一个文件只能有一个 export defalt 命令。

// myexport.js

let name = "小明";
let age = 18;
let sex = true;
let address = ["北京市", "海淀区"];
let userInfo = {
    name, age, sex
};
function sayHello() {
    console.log("hello");
}
const user = {name, age, sex, address, userInfo, sayHello};

export default user

// myimport.js

import user from './myexport.js';

console.log(user.name);
console.log(user.age);
console.log(user.sex);
console.log(user.address);
console.log(user.userInfo);
user.sayHello();

export和export default混用

// myexport.js

let user = {
    name: "小明",
    age: 18,
    sex: true
};

function sayHello() {
    console.log("hello");
}

export default user;
export {sayHello};

// myimport.js

import user from './myexport.js';
import {sayHello} from './myexport.js';

console.log(user);
sayHello();

等价于下面：

// myimport.js

import user, {sayHello} from './myexport.js';

console.log(user);
sayHello();

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()

• import命令具有提升作用，会提升到整个模块的头部，并率先执行。
• import()是一个函数，可以动态导入，返回一个promise对象。

// mobile.js

export default "这是移动端";

// pc.js

export default "这是PC端";

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;

// module2.js

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

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的模块获取的是实时值，就不存在变量的缓存。

// myexport.js

export let count = 0;

export function increaseCount() {
    count += 1;
}

// myimport.js

import {count, increaseCount} from "./myexport.js";

console.log(count); // 0
increaseCount();
console.log(count); // 1