ES6中的模块化

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

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

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

第一种:通用导入方式


    // 引入 m1.js 模块内容
    import * as m1 from "./m1.js";
    // 引入 m2.js 模块内容
    import * as m2 from "./m2.js";
    // 引入 m3.js 模块内容
    import * as m3 from "./m3.js";

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


    import { msg, showMsg } from './m1.js';
    import { msg as hello, sayHello } from './m2.js';
    import { default as m3 } from './m3.js';

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


    import m3 from './m3.js';

同样支持混合导入


    import m4, { myFun } from './m4.js';

Original: https://www.cnblogs.com/lm66/p/15411204.html
Author: Liming_Code
Title: ES6中的模块化

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/575989/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球