22.模块

<script src="my-library.js"></script>

var myModule = function () { // Open IIFE
  // Imports (via global variables)
  var importedFunc1 = otherLibrary1.importedFunc1;
  var importedFunc2 = otherLibrary2.importedFunc2;
  // Body
  function internalFunc() {
    // ···
  }
  function exportedFunc() {
    importedFunc1();
    importedFunc2();
    internalFunc();
  }
  // Exports (assigned to global variable `myModule`)
  return {
    exportedFunc: exportedFunc,
  };
}(); // Close IIFE

• 脚本文件中的库通过全局变量导出和导入功能，这会冒名称冲突的风险。
• 没有明确声明依赖关系，并且脚本没有内置的方法来加载它所依赖的脚本。因此，网页不仅要加载页面所需的脚本，还要加载这些脚本的依赖关系，依赖项的依赖关系等等。它必须按正确的顺序执行！

// Imports
var importedFunc1 = require('other-module1').importedFunc1;
var importedFunc2 = require('other-module2').importedFunc2;
// Body
function internalFunc() {
  // ···
}
function exportedFunc() {
  importedFunc1();
  importedFunc2();
  internalFunc();
}
// Exports
module.exports = {
  exportedFunc: exportedFunc,
};

• 专为服务器设计。
• 模块意味着同步加载。
• 紧凑的语法。

define(['other-module1', 'other-module2'],
  function (otherModule1, otherModule2) {
    var importedFunc1 = otherModule1.importedFunc1;
    var importedFunc2 = otherModule2.importedFunc2;
    function internalFunc() {
      // ···
    }
    function exportedFunc() {
      importedFunc1();
      importedFunc2();
      internalFunc();
    }
    return {
      exportedFunc: exportedFunc,
    };
  });

• 专为浏览器设计。
• 模块意味着异步加载。这对于浏览器来说是一个至关重要的要求，代码不能等到模块下载完毕。必须在模块可用时通知它。
• 语法稍微复杂一些。从好的方面来说，AMD 模块可以直接执行，无需自定义创建和执行源代码（想想eval()）。网上并不总是允许这样做。

• 每个文件有一个模块（AND 每个文件也支持多个模块）。
• 这样的文件基本上是一段执行的代码：
  • 导出：该代码包含声明（变量，函数等）。默认情况下，这些声明保留在模块的本地，但您可以将其中一些声明标记为导出。
  • 导入：模块可以从其他模块导入实体。那些其他模块通过 模块说明符（通常是路径，偶尔 URL）来识别。
• 模块是 单例：即使多次导入模块，也只存在单个实例。
• 没有使用全局变量。相反，模块说明符用作全局 ID。

• 使用 CommonJS，ES 模块共享紧凑语法，单个导出的语法比 命名导出（到目前为止，我们只看到命名导出）和支持循环依赖关系更好。
• 对于 AMD，ES 模块共享异步加载和可配置模块加载的设计（例如，如何解析说明符）。

• 它们的语法比 CommonJS 更紧凑。
• 它们的模块具有静态结构（在运行时无法更改）。这样可以实现静态检查，优化的导入访问，更好的捆绑（交付更少的代码）等等。
• 他们对循环进口的支持是完全透明的。

import {importedFunc1} from 'other-module1';
import {importedFunc2} from 'other-module2';
function internalFunc() {
  ···
}
export function exportedFunc() {
  importedFunc1();
  importedFunc2();
  internalFunc();
}

1. 声明模块语法：什么是模块？如何申报进出口？
2. 语法的语义：如何处理由导入创建的变量绑定？如何处理导出的变量绑定？
3. 用于配置模块加载的编程加载器 API。

lib/my-math.js
main1.js
main2.js

let notExported = 'abc';
export function square(x) {
  return x * x;
}
export const MY_CONSTANT = 123;

import {square} from './lib/my-math.js';
assert.equal(square(3), 9);

import * as myMath from './lib/my-math.js';
assert.equal(myMath.square(3), 9);

my-func.js
main.js

export default function () {
  return 'Hello!';
}

import myFunc from './my-func.js';
assert.equal(myFunc(), 'Hello!');

export default function foo() {} // no semicolon!
export default class Bar {} // no semicolon!

export default 'abc';
export default foo();
export default /^xyz$/;
export default 5 * 7;
export default { no: false, yes: true };

// Not legal JavaScript!
export default const foo = 1, bar = 2, baz = 3;

• 模块文件的名称是破折号的，并以小写字母开头：

  ./my-module.js
  ./some-func.js
  

• 命名空间导入的名称是小写的和驼峰式的：

  import * as myModule from './my-module.js';
  

• 默认导入的名称是小写的和驼峰式的：

  import someFunc from './some-func.js';
  

• npm 不允许包名中的大写字母。因此，我们避免使用驼峰，因此“本地”文件的名称与 npm 包的名称一致。
• 将基于短划线的文件名转换为以驼峰为基础的 JavaScript 变量名称有明确的规则。由于我们如何命名命名空间导入，这些规则适用于命名空间导入和默认导入。

import someFunc from './some-func.js';

counter.js
main.js

export let counter = 3;
export function incCounter() {
  counter++;
}

import { counter, incCounter } from './counter.js';
// The imported value `counter` is live
assert.equal(counter, 3);
incCounter();
assert.equal(counter, 4);

• L 的执行开始。
  • L 进口 M. L's 进口指向 M 内的未初始化槽。
  • L'的尸体尚未执行。
• M 的执行开始（由导入触发）。
  • M 进口 L.
  • M 的主体被执行。现在 L's 进口有值（由于实时连接）。
• L 的主体被执行。现在 M 的进口有值。

一个关键规则是：所有 ES 模块说明符必须是有效的 URL 并指向实际文件。

除此之外，一切仍然有点不稳定。

• 相对路径：以点开头。例子：

  './some/other/module.js'
  '../../lib/counter.js'
  

• 绝对路径：以斜杠开头。例：

  '/home/jane/file-tools.js'
  

• 完整的 URL：包括协议（从技术上讲，路径也是 URL）。例：

  'https://example.com/some-module.js'
  

• 裸路径：不要以点，斜线或协议开头。在 CommonJS 模块中，裸路径很少有文件扩展名。

  'lodash'
  'mylib/string-tools'
  'foo/dist/bar.js'
  

• 相对路径，绝对路径和完整 URL 按预期工作。他们都必须指向真实的文件。
• 裸路径：
  • 内置模块（path，fs等）可以通过裸路径导入。
  • 所有其他裸路径必须指向文件：'foo/dist/bar.js'
• ES 模块的默认文件扩展名为.mjs（可能有一种方法可以切换到每个包的不同扩展名）。

• 相对路径，绝对路径和完整 URL 按预期工作。他们都必须指向真实的文件。
• 最终如何处理裸路径尚不清楚。您最终可以通过查找表将它们映射到其他说明符。
• 模块的文件扩展名无关紧要，只要它们与内容类型text/javascript一起提供即可。

import {foo} from './bar.js'; // import
const {foo} = require('./bar.js'); // destructuring

• 进口与出口保持联系。
• 您可以在解构模式中再次进行解构，但导入语句中的{}不能嵌套。
• 重命名的语法不同：

  import {foo as f} from './bar.js'; // importing
  const {foo: f} = require('./bar.js'); // destructuring
  

  理由：解构让人想起对象字面值（包括嵌套），而导入则唤起重命名的想法。

• 您必须在模块的顶层使用它们。也就是说，当你在一个街区内时，你不能导入一些东西。
• 模块说明符始终是固定的。也就是说，您无法根据条件更改导入的内容，也无法动态检索或组装说明符。

lib/my-math.js
main1.js
main2.js

let notExported = 'abc';
export function square(x) {
  return x * x;
}
export const MY_CONSTANT = 123;

const dir = './lib/';
const moduleSpecifier = dir + 'my-math.js';
function loadConstant() {
  return import(moduleSpecifier)
  .then(myMath => {
    const result = myMath.MY_CONSTANT;
    assert.equal(result, 123);
    return result;
  });
}

• 我们在函数内部导入（不在顶层）。
• 模块说明符来自变量。

const dir = './lib/';
const moduleSpecifier = dir + 'my-math.js';
async function loadConstant() {
  const myMath = await import(moduleSpecifier);
  const result = myMath.MY_CONSTANT;
  assert.equal(result, 123);
  return result;
}

• 更多关于import()：“ES 提案：import() - 在 2ality 上动态导入 ES 模块”。
• 有关 ECMAScript 模块的深入了解，请参考“探索 ES6”。