模块

概览

文章内容选自《你不知道的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来说,导出基本标量类型亦是到这个变量的绑定。如果模块修改了此基本标量,外部导入绑定会决议新的值。

推荐阅读更多精彩内容