模块

概览

文章内容选自《你不知道的JavaScript 下》，本文的内容是：模块。

在所有的JavaScript代码中，模块是其唯一最重要的代码组织方式，它驱动了大多数代码。

小结

内容

旧方法

传统的模块模式基于一个带有内部变量和函数的外层函数,以及一个被返回的“public API”，这个“public API”带有对内部数据和功能拥有闭包的方法。
通常这样表达：

function Hello(name) {
  function greeting() {
    console.log(`Hello, ${name}!`)
  }

  // public API
  return {
    greeting,
  }
}

const me = Hello('access')
me.greeting()  // Hello, access!

IIFE：Immediately Invoked Function Expression

继续调用Hello(...)模块可以产生多个实例。有时一个模块只作为 单例（singleton），
即立即调用函数表达式：

// IIFE
const me = (function Hello(name) {
  function greeting() {
    console.log(`Hello, ${name}!`)
  }

  return {
    greeting,
  }
})('access')  

me.greeting()  // Hello, access!

前进

对于ES6来说，不再需要依赖于封装函数和闭包提供模块支持。ES6中模块已经具有一等（first class）语法和功能支持。

ES6和旧模块的区别：

1. ES6 使用 基于文件的模块，也就是说一个文件一个模块。目前，还没有把多个模块合并到单个文件的标准方法。
   这说明：想要把ES6模块直接加载到浏览器web应用中，需要分别加载，而不是作为一大组放在单个文件中加载。在过去，为了性能优化，后者这种加载方式是很常见的。
   HTTP/2的到来能够显著消除所有这样的性能担忧，因为它运行在持久的socket连接上，所以能够高效并发、交替加载多个小文件。

2. ES6模块的API是静态的，需要在模块的公共API中静态定义所有最高层导出。

3. ES6模块是单例。模块只有一个实例，内部维护了它的状态。每次向其他模块导入这个模块的时候，得到的是对单个中心实例的引用。

4. 模块的公共API中暴露的属性和方法并不仅仅是基本变量类型或者复合类型的赋值。它们是到内部模块定义中的标识符的实际绑定。
   在ES6之前的模块中，如果把基本标量类型的值作为模块公共API的导出，它是通过值复制赋值，任何对于基本标量的更新将会是独立的，不会影响API对象的公开复制。
   对于ES6来说，导出基本标量类型亦是到这个变量的绑定。如果模块修改了此基本标量，外部导入绑定会决议新的值。