js模块-ES6模块

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第33天，点击查看活动详情

前言

一直都使用express 框架开发项目的时候，经常都是npm install 第三方包，然后使用 import 方式引入就可以使用该模块。而npm install 安装的模块基本都是在 node_module 文件夹中。但是你会发现你经常要将你的模块能被使用都是使用 export 导出。

export 与 import

• export关键字：主要是控制模块使其对外可见。支持2种导出模式：命名导出和默认导出
• import关键字：主要是引入模块，引入的模块都是最先执行的，且都是单例模式，即多次重复执行都只会执行一次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import 。

let tname = "Tom";
let tage = 20;
let tfunc = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { tname, tage, tfunc, myClass }

export default 命令：

• 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
• export default 中的 default 是对应的导出接口变量。
• 通过 export 方式导出，在导入时要加{ }，export default 则不需要。
• export default 向外暴露的成员，可以使用任意变量来接收。

这就是模块的神奇。ES6 增加模块规范。其集成了AMD 和CommonJs的两部分的功能。

模块

ES6 模块是以一整块 JavaScript 代码块存在的，嵌入到网页中或作为外部文件引入，通过带有 type=“module” 作为标识。

模块的加载的情况：

• 模块执行顺序都是按顺序依次加载的
• 如果存在依赖关系的，会在依赖模块先加载然后再加载其模块
• ES6 模块加载构成都是异步完成的

ES6 模块特性

与CommonJs 和AMD 一致特性：

• 模块代码只在加载后执行
• 模块只能加载一次，无论定义多少次都只加载一次。
• 模块是单例的
• 模块可以定义公共接口，其他模块可以基于这个公共接口观察和鸡哦阿虎
• 模块可以请求加载其他模块
• 支持循环依赖

ES6 模块默认在严格模式下执行，它是不共享全局命名空间。模块顶级 this 的值是 undefined(常规脚本中是 window)。  模块中的 var 声明不会添加到 window 对象。ES6 模块是异步加载和执行的。