177资源论坛 2021-08-28[ES6深度解析]15：模块 Module

sys G综合资源

2023-01-02 0 168 百度已收录

JavaScript新项目早已进步到让人目瞪口呆的经营规模，小区早已研发了用以规模性工作中的专用工具。你需要的最主要的物品之一是一个控制模块系统软件，这也是一种将你的工作中分散化到好几个文档和列表的方式——但依然要保障你的全部编码精彩片段能够按照必须互相浏览——并且还需要可以高效地载入全部编码。因此很当然，JavaScript有一个控制模块系统软件。事实上,有许多控制模块系统软件。也有一些包管理工具，用以安裝全部这种手机软件和解决高級相互依赖的专用工具。你也许会觉得，有着新的控制模块英语的语法的ES6有点儿晚了。

今日大家将见到ES6是不是会在这种目前体系中加上任何东西，及其将来的规范和设备是不是可以在它的根基上搭建。但最先，使我们深层次了解一下ES6控制模块是什么样子的。

Module 基本知识

ES6控制模块是一个包括JS编码的文档。沒有特别的module关键词;控制模块读起來如同脚本制作。有两个差别。

ES6控制模块是自行的严格模式编码，即便你没有写use strict。
能够在控制模块中应用import和export。

使我们先谈一谈export。默认设置状况下，在控制模块中申明的任何信息全是该板块的部分內容。假如你想要在控制模块中申明的某种特点是公共性的，便于别的控制模块能够运用它，则务必export该特点。有几种办法能够保证这一点。非常简单的办法是加上export关键词。

// kittydar.js - Find the locations of all the cats in an image.

export function detectCats(canvas, options) {
  var kittydar = new Kittydar(options);
  return kittydar.detectCats(canvas);
}

export class Kittydar {
  ... several methods doing image processing ...
}

// This helper function isn't exported.
function resizeCanvas() {
  ...
}

能够export一切顶尖function、class、var、let或const。

这就是撰写控制模块所必须了解的所有内容!你不用把全部的東西都放进IIFE或回调函数中。去申明你需要的事物吧。因为编码是一个控制模块，而不是一个脚本制作，因此全部的申明都将修饰符限制在该控制模块，而不是在全部脚本制作和控制模块中全局性由此可见。

除开export以外，控制模块中的源代码大部分全是一般编码。它还可以应用局部变量，如Object和Array。假如您的控制模块在web电脑浏览器中运作，它还可以应用document和XMLHttpRequest。

在一个独立的资料中，我们可以导进并应用detectCats()涵数:

// demo.js - Kittydar demo program

import {detectCats} from "kittydar.js";

function go() {
    var canvas = document.getElementById("catpix");
    var cats = detectCats(canvas);
    drawRectangles(canvas, cats);
}

要从一个控制模块中导进好几个名字，能够那样写:

import {detectCats, Kittydar} from "kittydar.js";

如果你运作包括import申明的控制模块时，它最先载入所导进的控制模块，随后在相互依赖图的深度优先解析xml中实行每一个控制模块行为主体，根据绕过早已运行的一切內容来防止循环系统解析xml。这种是板块的基本。这确实非常简单。;-）

export 目录

你能用花括号{}括起來，列举你要想导出来的全部（方式，自变量，类等）名字，而不是给每一个导出来的特点再加上标识:

export {detectCats, Kittydar};

// no `export` keyword required here
function detectCats(canvas, options) { ... }
class Kittydar { ... }

export目录不一定是文档中的第一项內容;它能够发生在控制模块文档的顶尖修饰符中的任何地方。您能够有好几个export目录，或是将export目录与别的export申明混和在一起，只需沒有名字被反复多次导出来。

重新命名导进和导出来

有时候，导进的名字会与你必须采用的其它名字发生争执。因此ES6容许你一直在导进时重新命名:

// suburbia.js

// Both these modules export something named `flip`.
// To import them both, we must rename at least one.
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";
...

相近地，您能够在导出来时重新命名他们。假如你想要在两种不一样的名字下导出来同样的值，这也是很便捷的，这有时候会产生:

// unlicensed_nuclear_accelerator.js - media streaming without drm
// (not a real library, but maybe it should be)

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

默认设置导出来

新标准致力于与目前的CommonJS和AMD控制模块互操作性。假定你有一个Node新项目，你早已完成了npm install lodash。你的ES6编码能够从Lodash中导进独立的涵数:

import {each, map} from "lodash";

each([3, 2, 1], x => console.log(x));

但或许你早已习惯性见到_.each，而不是each，你依然要想那样写。或是你将_做为涵数应用，由于这在Lodash中很常见。因此，你能应用略微不一样的英语的语法:导进沒有花括号的控制模块。

import _ from "lodash";

这类缩写等额的于import {default as _} from "lodash"。全部的CommonJS和AMD控制模块在ES6中都是有一个default export，这和你一直在require()涵数中启用该控制模块时获得的是一样的，也就是exports目标。

ES6控制模块被制定成容许你导出来好几个物品，可是针对目前的CommonJS控制模块，你只有获得默认设置的导出来。比如，在编写此文时，根据我所知道，知名的colors包沒有一切特别的ES6适用。它是CommonJS控制模块的结合，如同npm上的大部分包一样。可是你能立即导到你的ES6编码中。

// ES6 equivalent of `var colors = require("colors/safe");`
import colors from "colors/safe";

假如你需要自个的ES6控制模块有一个默认设置的导出来，这比较容易保证。默认设置导出来没什么魔法;它如同所有别的导出来一样，除开它被取名为default。你能应用大家早已探讨过的重新命名英语的语法:

let myObject = {
  field1: value1,
  field2: value2
};
export {myObject as default};

或是更强的作法是，应用下列缩写:

export default {
  field1: value1,
  field2: value2
};

关键词export default后边能够跟一切值:涵数、类、目标字面量。

控制模块目标

import * as cows from "cows";

如果你import *时，所导进的是一个控制模块名字室内空间目标(module namespace object)。它的特性是板块的exports。因而，假如cows控制模块导出来了一个名叫moo()的涵数，那麼在以这些方法导进cows以后，你能写:cows.moo()。

汇聚控制模块

有时，一个包的主控制模块比导进包的任何别的控制模块并以统一的方法导出来他们了不起是多少。为了更好地简单化这类编码，有一种一体化的import-and-export缩写:

// world-foods.js - good stuff from all over

// import "sri-lanka" and re-export some of its exports
export {Tea, Cinnamon} from "sri-lanka";

// import "equatorial-guinea" and re-export some of its exports
export {Coffee, Cocoa} from "equatorial-guinea";

// import "singapore" and export ALL of its exports
export * from "singapore";

每一个export-from句子都类似import-from句子后跟export句子。与真正意义上的导进不一样，它不易将再次导出来的关联加上到您的修饰符。因而，假如你准备在world-food.js中撰写一些运用Tea的编码，请不要应用这类缩写。你能看到它并不会有。

假如singapore輸出的一切名字与别的輸出名字发生争执，那将是一个不正确，因而要谨慎应用export *。

英语的语法早已说完了!如今说说有意思的一部分。

import事实上是做什么工作的?

你能坚信…任何东西都不没做吗?

哦，你不容易上当受骗。你可以坚信规范并沒有说import究竟做过那些事儿吗?这也是件好事儿吗?

ES6将控制模块载入的小细节彻底交给了完成。控制模块实行方法是详尽特定的。粗略地说，如果你告知JS模块运作一个控制模块时，它务必表現得像下列四个流程已经产生:

分析（Parsing）:
完成载入控制模块的源码并查验拼写错误。
载入（Loading）:
完成载入全部导进的控制模块(递归算法地)。这一部分都还没规范化。
连接（Linking）:
针对每一个新载入的控制模块，完成建立一个控制模块修饰符，并且用该板块中申明的全部关联添充它，包含从别的控制模块导进的內容。
假如你尝试import {cake} from "paleo"，可是paleo控制模块事实上沒有导出来一切名叫cake的物品，你能获得一个不正确。这太不妙了，由于你离真真正正运作一些JS编码早已非常近了。
运作时（Runtime）:
最终，完成运作每一个新载入控制模块的编码体里的句子。这时，导进解决早已进行，因此当实行到有import申明的编码行后……什么也没有产生!

见到了没有?我告诉过你回答是”import任何东西都没做”，有关计算机语言，也没有说谎。

如今大家来了解一下这一体系中有意思的一部分。有一个很帅的方法。由于系统软件不特定载入是怎样工作中的,由于你能够事先根据网页源代码import申明算出全部的相互依赖,一种载入的建立方法是在编译程序时进行全部的工作中,你任何的控制模块装包成一个文档,并把它放到互联网上传送!像webpack那样的专用工具能够保证这一点。

这也是一件大事儿，由于利用互联网载入脚本制作必须花费时间，并且每一次获得一个脚本制作时，您也许会看到它包括必须载入几十个之上的导进申明。一个简洁的加载器将需用大批量的互联网来回通信。可是拥有webpack，你如今不但还可以应用含有控制模块的ES6，还能够在没有危害运作时特性的情形下得到全部的软件开发益处。

ES6中控制模块载入的具体标准最开始是方案并搭建的。它沒有发生在最后规范中的一个因素是，针对怎么达到这一捆缚特点沒有达成一致。希望有些人能彻底解决这个问题，由于人们将见到，控制模块载入的确应当规范化。强卖太棒了，不可以舍弃。

静态数据 vs 动态性，或是:标准及其怎样摆脱标准

做为一种动态语言，JavaScript让自已具有了一个让人吃惊的静态数据控制模块系统软件。

在一个控制模块中，全部类别的添加和导出来都只容许在高层。沒有标准导进或导出来，而且无法在涵数内应用导进。
全部导出来的标志符务必在源码中按名字显式导出来。你不能根据程序编写方法遍历数组并以数据驱动的方法导出来一组名字。
控制模块目标被冻洁（没法改动）。没有办法将一个新特性hack到一个控制模块目标中，polyfill设计风格。
在一切控制模块程序执行以前，控制模块的全部依靠项都务必被载入、分析和连接。沒有英语的语法能够完成按需可塑性载入的导进。
导进产生不正确沒有不正确修复。一个应用软件很有可能包括数以百计控制模块，如果有一切控制模块没法载入或连接，就没法运作。不可以把import包囊在try/catch块中。(这儿的益处是，由于操作系统是静止的，因此webpack能够在编译程序时检查到这种不正确。)
沒有勾子容许控制模块在依靠项载入以前运作一些编码。这代表着控制模块控制不了他们的依靠项是怎样载入的。