ES6中的模块化

概述

历史上,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。
其他语言如java、python等都具备这项功能,唯独Javascript没有,在ES6之前,要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS。

特点

ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;
模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。

export与import

export

在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。
第一种:分别暴露

export let msg = "Hello Module";

export const showMsg = function () {
    console.log("你好");
}

第二种:统一暴露(不想暴露模块变量名称可以通过as定义别名)

let message = "Hello Module";

const sayHello = function () {
    console.log("Hi !");
}

export { message as msg, sayHello };

第三种:默认暴露(一个模块只能有一个默认导出,导入的名称可以和导出的名称不一致)

let name="张三";

export default {
    name
}

除此之外,还可以混合导出

let name = "张三";

export default {
    name
}

export const myFun = function () {
    console.log("myFun");
}

import

第一种:通用导入方式

<script type="module">
    // 引入 m1.js 模块内容
    import * as m1 from "./m1.js";
    // 引入 m2.js 模块内容
    import * as m2 from "./m2.js";
    // 引入 m3.js 模块内容
    import * as m3 from "./m3.js";
</script>

第二种:解构赋值形式(有名称重复的话可以是用as定义别名)

<script type="module">
    import { msg, showMsg } from './m1.js';
    import { msg as hello, sayHello } from './m2.js';
    import { default as m3 } from './m3.js';
</script>

第三种:简便形式 (只针对默认暴露)

<script type="module">
    import m3 from './m3.js';
</script>

同样支持混合导入

<script type="module">
    import m4, { myFun } from './m4.js';
</script>
posted @ 2021-10-15 15:19  Liming_Code  阅读(144)  评论(0编辑  收藏  举报