From 8134d820a5875e57af7e5cc7db4aa8c67883a9b3 Mon Sep 17 00:00:00 2001 From: LycheeEng Date: Tue, 4 Jun 2019 15:29:27 +0800 Subject: [PATCH 01/28] Translate 1-js/13-modules/02-import-export/article.md --- 1-js/13-modules/02-import-export/article.md | 441 ++++++++++++++++++++ 1 file changed, 441 insertions(+) create mode 100755 1-js/13-modules/02-import-export/article.md diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md new file mode 100755 index 0000000000..982168cd2c --- /dev/null +++ b/1-js/13-modules/02-import-export/article.md @@ -0,0 +1,441 @@ +# 导出和导入 + +导出和导入语句非常有用。 + +在前面的章节里我们已经初试牛刀，那么现在让我们探索更多的应用吧。 + +## 声明前导出 + +我们可以通过在声明之前放置 `export` 来标记任何声明为导出，无论声明的是变量，函数还是类都可以。 + +例如，这里的所有导出都是正确的： + +```js +// 导出数组 +*!*export*/!* let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + +// 导出 const 声明的变量 +*!*export*/!* const MODULES_BECAME_STANDARD_YEAR = 2015; + +// 导出类 +*!*export*/!* class User { + constructor(name) { + this.name = name; + } +} +``` + +````smart header="No semicolons after export class/function" +注意，在类或者函数前导出 `export` 不会让它们变成 [函数表达式](info:function-expressions-arrows)。尽管被导出了，但它仍然是一个函数声明。 + +大部分 JavaScript 样式指南都推荐在语句之后使用分号，但是在函数和类声明时候不会使用分号。 + +这就是为什么在 `export class` 和 `export function` 后也没有分号的原因。 + +```js +export function sayHi(user) { + alert(`Hello, ${user}!`); +} *!* // no ; at the end */!* +``` + +```` + +## 其他导出声明方式 + +我们可以单独使用 `export` 导出。 + +下面的例子中，我们先声明函数，然后再导出它们： + +```js +// 📁 say.js +function sayHi(user) { + alert(`Hello, ${user}!`); +} + +function sayBye(user) { + alert(`Bye, ${user}!`); +} + +*!* +export {sayHi, sayBye}; // 导出变量列表 +*/!* +``` + +从技术上讲，我们也可以把 `export` 放在函数上面。 + +## 导入所有（import *） + +通常，我们把要导入的东西放到 `import {...}` 列表里，就像这样： + +```js +// 📁 main.js +*!* +import {sayHi, sayBye} from './say.js'; +*/!* + +sayHi('John'); // Hello, John! +sayBye('John'); // Bye, John! +``` + +但是如果这个列表很长呢？我们可以使用 `import * as ` 导入任何东西，例如： + +```js +// 📁 main.js +*!* +import * as say from './say.js'; +*/!* + +say.sayHi('John'); +say.sayBye('John'); +``` + +乍一看，“导入一切”看起来很酷，语法也很短，但是我们通常为什么要明确列出我们需要导入的内容？ + +这里有几个原因： + +1. 现在的构建工具（[webpack](http://webpack.github.io) 或者其他的）把模块打包到一起，然后优化它们以使加载更快，并且还会删除无用的代码。 + + 比如说，我们在项目里添加第三方库 `lib.js` 中的几个函数： + ```js + // 📁 lib.js + export function sayHi() { ... } + export function sayBye() { ... } + export function becomeSilent() { ... } + ``` + + 现在，如果我们只在项目里使用 `lib.js` 中的一个函数： + ```js + // 📁 main.js + import {sayHi} from './lib.js'; + ``` + 然后，打包工具会自动检测优化它，并且在打包文件中完全删除其他无用的函数以使得打包后的文件更小。这就是所谓的“tree-shaking”技术。 + +2. 明确列出要导入的内容会使得名称较短：`sayHi()` 取代 `lib.sayHi()`。 +3. 显示导入可以更好的概述代码结构：在哪里使用了什么。它使得代码阅读和重构更容易。 + +## 导入为（import as） + +我们也可以使用 `as` 让导入具有不同的名字。 + +例如，为了简洁起见，我们将 `sayHi` 导入到局部变量 `hi`，同样将 `sayBye` 导入到 `bye`： + +```js +// 📁 main.js +*!* +import {sayHi as hi, sayBye as bye} from './say.js'; +*/!* + +hi('John'); // Hello, John! +bye('John'); // Bye, John! +``` + +## 导出为（export as） + +导出也具有以上相同的语法。 + +我们将函数导出为 `hi` 和 `bye`： + +```js +// 📁 say.js +... +export {sayHi as hi, sayBye as bye}; +``` + +现在 `hi` 和 `bye` 是在外面使用时的正式名称： + +```js +// 📁 main.js +import * as say from './say.js'; + +say.hi('John'); // Hello, John! +say.bye('John'); // Bye, John! +``` + +## 默认导出（export default） + +到目前为止，我们已经看到了如何导入/导出（import/export）多个内容，也可以用“as”语法导入/导出为其他名称。 + +在开发中，模块包含： + +- 一个库，一组函数，就像 `lib.js` 这样。 +- 或者在 `user.js` 中描述了一个实体，比如 `class User` 这样，整个模块只有这个类。 + +大部分情况下，开发者倾向于使用第二种方式，因此每个“thing”都存在于自己的模块中。 + +当然，如果每个文件都需要自己的模块，这就导致了许多的文件出现，但是这不算什么大问题。实际上，如果文件命名以及文件夹结构得当，代码导航将会变得更容易。 + +模块提供特殊的默认导出 `export default` 语法，以使得“一个模块只做一件事”看起来更好。 + +默认导出要求下列的 `export` 和 `import` 语句： + +1. `export default` 放在模块“主导出（main export）”之前。 +2. `import` 导入时不使用花括号 + +例如，`user.js` 导出 `class User`： + +```js +// 📁 user.js +export *!*default*/!* class User { // 只要添加“default”即可 + constructor(name) { + this.name = name; + } +} +``` + +在 `main.js` 中添加导入： + +```js +// 📁 main.js +import *!*User*/!* from './user.js'; // 不需要花括号 {User}, 仅仅是 User 就可以了 + +new User('John'); +``` + +不用花括号的导入看起来很酷。开始使用模块时常见的错误就是忘记花括号。所以请记住，命名导入需要使用花括号，而默认导入不需要。 + +| 命名导出 | 默认导出 | +|--------------|----------------| +| `export class User {...}` | `export default class User {...}` | +| `import {User} from ...` | `import User from ...`| + +当然，每个文件只有一个“默认”导出。 + +我们可能在单个模块中同时使用默认导出和命名导出，但是在日常开发中，开发者一般不会这样做。模块要么是命名导出要么是默认导出。 + +**另外需要注意的是命名导出必须（理应）具有名称，而 `export default` 可能是匿名的（没有名称）** + +例如，下面这些都是完全有效的默认导出： + +```js +export default class { // 没有类名 + constructor() { ... } +} + +export default function(user) { // 没有函数名 + alert(`Hello, ${user}!`); +} + +// 导出一个值而不使用变量 +export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; +``` + +这些都是可行的，因为每个文件只有一个 `export default`。相反，省略命名导入的名称将会出错： + +```js +export class { // Error!（非命名导出需要名称） + constructor() {} +} +``` + +### “Default” 别名 + +“default”关键词用于默认导出的别名“alias”，常用于我们需要引用单独导出和其他脚本的情况。 + +例如，如果我们已经声明了一个函数，然后导出它 `export default`（和定义分开）： + +```js +function sayHi(user) { + alert(`Hello, ${user}!`); +} + +export {sayHi as default}; // 和我们在函数前添加“export default”一样 +``` + +又如，假设模块 `user.js` 导出一个默认导出“default”和几个命名导出（虽然很少出现，但是会发生）： + +```js +// 📁 user.js +export default class User { + constructor(name) { + this.name = name; + } +} + +export function sayHi(user) { + alert(`Hello, ${user}!`); +} +``` + +那么，如何导入默认导出和命名导出： + +```js +// 📁 main.js +import {*!*default as User*/!*, sayHi} from './user.js'; + +new User('John'); +``` + +再如，我们想要把 `*` 作为对象导入，那么 `default` 属性就是默认导出： + +```js +// 📁 main.js +import * as user from './user.js'; + +let User = user.default; +new User('John'); +``` + +### 我应该使用默认导出吗？ + +开发者应该谨慎使用默认导出，因为这将会使代码更难维护。 + +命名导出是显式的。它们准确命名导入的内容，因此我们能得到更多的信息，这对于代码阅读与维护都是非常有利的。 + +此外，命名导出会强制我们使用正确的名称来导入： + +```js +import {User} from './user.js'; +// 使用 {MyUser} 导入将不起作用，导入名字应该为 {User} +``` + +对于默认导出，我们总是在导入时选择名称： + +```js +import User from './user.js'; // works +import MyUser from './user.js'; // works too +// 使用任何名称导入都没有问题 +``` + +对于相同的导入，团队成员可能使用不同的命名，因此，默认导出的命名可能会被滥用， + +通常，为了避免这种情况并保持代码的整洁一致，可以遵从下面这条规则，即导入的变量应该与文件名相对应，例如： + +```js +import User from './user.js'; +import LoginForm from './loginForm.js'; +import func from '/path/to/func.js'; +... +``` + +另一种解决方案是在任何地方都使用命名导出。即使只导出一个东西，它仍然使用命名导出，而不是默认导出 `default`。 + +这也使得重新导出（见下一节）更容易。 + +## Re-export + +“Re-export”语法 `export ... from ...` 允许直接导出刚刚导入的内容（可能是其他名字），就像这样： + +```js +export {sayHi} from './say.js'; +export {default as User} from './user.js'; +``` + +重点是，为什么要这样做？我们看一个开发中的用例： + +想象一下，我们正在编写一个“包（package）”：一个包含大量模块的文件夹，主要是内部需要的模块，其中一些功能是导出到外部的（像 NPM 这样的工具允许发布和分发包，但这里我们不细说）。 + +目录结构可能是这样的： +``` +auth/ + index.js + user.js + helpers.js + tests/ + login.js + providers/ + github.js + facebook.js + ... +``` + +我们想通过单个入口公开包的功能，主文件 `auth/index.js` 可以这样使用： + +```js +import {login, logout} from 'auth/index.js' +``` + +我们的想法是，使用我们软件包的开发者，不应该干涉其内部结构。他们不应该搜索我们包文件夹中的文件。我们只导出 `auth/index.js` 中需要的内容，并保持其余部分“不可见”。 + +现在，由于实际导出的功能分散在包中，我们可以在 `auth/index.js` 中收集并“重新导出（re-export）”它： + +```js +// 📁 auth/index.js +import {login, logout} from './helpers.js'; +export {login, logout}; + +import User from './user.js'; +export {User}; + +import Github from './providers/github.js'; +export {Github}; +... +``` + +“重新导出（re-export）”仅仅是一个短符号： + +```js +// 📁 auth/index.js +export {login, logout} from './helpers.js'; +// 或者，为了重新导出所有的 helpers 内容，我们可以使用： +// export * from './helpers.js'; + +export {default as User} from './user.js'; + +export {default as Github} from './providers/github.js'; +... +``` + +````warn header="Re-exporting default is tricky" +请注意：`export User from './user.js'` 语句无效。这实际上是一个语法错误。要重新导出默认导出，我们必须明确指出 `{default as ...}`，就像上面例子一样。 + +另外，还有另外一个奇怪之处是，`export * from './user.js'` 只重新导出命名导出，不导出默认导出。再次重申，我们需要像上面那样明确指出 `{default as ...}`。 + +例如，重新导入所有内容，需要下面两条语句： +```js +export * from './module.js'; // 重新导出命名导出 +export {default} from './module.js'; // 重新导出默认导出 +``` + +只有在重新导出时才应该明确指出默认值：`import * as obj` 正常工作。它将默认导出导入为 `obj.default`。所以这里的导入和导出结构存在一些不对称。 +```` + +## 总结 + +导出 `export` 类型有以下几种： + +- 声明之前： + - `export [default] class/function/variable ...` +- 单个导出： + - `export {x [as y], ...}`. +- 重新导出： + - `export {x [as y], ...} from "mod"` + - `export * from "mod"`（不会重新导出 default） + - `export {default [as y]} from "mod"`（重新导出 default） + +导入 `import` 类型有以下几种： + +- 模块中的命名导出： + - `import {x [as y], ...} from "mod"` +- 默认导出： + - `import x from "mod"` + - `import {default as x} from "mod"` +- 导入全部导出： + - `import * as obj from "mod"` +- 导入模块（可运行），但是没有将其赋值给变量： + - `import "mod"` + +我们把导入/导出语句放在脚本的顶部或者底部都是没问题的。 + +下面这样的方式完全可以： +```js +sayHi(); + +// ... + +import {sayHi} from './say.js'; // 在脚本底部导入 +``` + +在开发中，导入通常位于文件开头，但是这只是为了方便。 + +**请注意在 `{...}` 中的导入/导出语句无效** + +像这样的导入语句是无效的： +```js +if (something) { + import {sayHi} from "./say.js"; // Error: import must be at top level +} +``` + +但是，如果我们真的需要根据某些条件来导入东西呢？比如在某些合适的时间？就像根据要求加载模块，什么时候才是真正需要？ + +我们将在下一章探讨这些关于动态导入的内容。 \ No newline at end of file From a7c63923f270c08108263df3fea20bebafacdc3b Mon Sep 17 00:00:00 2001 From: LycheeEng Date: Tue, 4 Jun 2019 15:30:13 +0800 Subject: [PATCH 02/28] Translate 1-js/13-modules/03-modules-dynamic-imports/article.md --- .../03-modules-dynamic-imports/article.md | 52 +++++++++++++++++++ .../say.view/index.html | 10 ++++ .../say.view/say.js | 11 ++++ 3 files changed, 73 insertions(+) create mode 100755 1-js/13-modules/03-modules-dynamic-imports/article.md create mode 100755 1-js/13-modules/03-modules-dynamic-imports/say.view/index.html create mode 100755 1-js/13-modules/03-modules-dynamic-imports/say.view/say.js diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md new file mode 100755 index 0000000000..ac8ccf452a --- /dev/null +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -0,0 +1,52 @@ +# 动态导入（Dynamic imports） + +我们在前面章节中介绍的导出和导入语句成为“静态”导入。 + +这是因为它们确实是静态的，语法非常严格。 + +首先，我们不能动态生成 `import` 的任何参数。 + +模块路径必须是原始类型字符串，不能是函数调用，下面的语句不起作用： + +```js +import ... from *!*getModuleName()*/!*; // 错误，只能是原始类型字符串 +``` + +其次，我们无法根据条件或者在运行时导入： + +```js +if(...) { + import ...; // 错误，不允许这样做 +} + +{ + import ...; // 错误, 不能将导入放到块中 +} +``` + +这是因为，导入/导出的目的是为了代码提供主干结构。这是非常好的事情，因为这样可以分析代码结构，可以收集和打包模块，可以删除未使用的导出（tree-shaken）。这些都是可能的，因为一切都是固定的。 + +但是，我们如何才能动态的按需导入模块呢？ + +## import() 函数 + +`import(module)` 函数可以从任何地方调用。它返回一个解析为模块对象的 promise。 + +使用模式如下： +```js run +let modulePath = prompt("Module path?"); + +import(modulePath) + .then(obj => ) + .catch(err => ) +``` + +另外，如果在一个 async 函数里，我们可以这样使用 `let module = await import(modulePath)`。 + +就像这样： + +[codetabs src="say" current="index.html"] + +所以，动态导入用起来很简单。 + +此外，动态导入可以像常规脚本一样工作，不需要额外指出 `script type="module"`。 \ No newline at end of file diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html new file mode 100755 index 0000000000..80909cf94d --- /dev/null +++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/index.html @@ -0,0 +1,10 @@ + + + diff --git a/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js new file mode 100755 index 0000000000..cff234b7c5 --- /dev/null +++ b/1-js/13-modules/03-modules-dynamic-imports/say.view/say.js @@ -0,0 +1,11 @@ +export function hi() { + alert(`Hello`); +} + +export function bye() { + alert(`Bye`); +} + +export default function() { + alert("Module loaded (export default)!"); +} From eb6fba171808099029045d1ab83c38f7cded504c Mon Sep 17 00:00:00 2001 From: LycheeEng Date: Tue, 4 Jun 2019 15:30:40 +0800 Subject: [PATCH 03/28] Translate 1-js/13-modules/index.md --- 1-js/13-modules/index.md | 1 + 1 file changed, 1 insertion(+) create mode 100755 1-js/13-modules/index.md diff --git a/1-js/13-modules/index.md b/1-js/13-modules/index.md new file mode 100755 index 0000000000..fb4522ae6e --- /dev/null +++ b/1-js/13-modules/index.md @@ -0,0 +1 @@ +# 模块 From c6be1cd9558d0c807140a60248ccd95f051fb7fa Mon Sep 17 00:00:00 2001 From: LeviDing Date: Mon, 10 Jun 2019 10:41:21 +0800 Subject: [PATCH 04/28] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=A0=A1=E5=AF=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../13-modules/03-modules-dynamic-imports/article.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/1-js/13-modules/03-modules-dynamic-imports/article.md b/1-js/13-modules/03-modules-dynamic-imports/article.md index ac8ccf452a..4ebe4179e1 100755 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,6 +1,7 @@ + # 动态导入（Dynamic imports） -我们在前面章节中介绍的导出和导入语句成为“静态”导入。 +我们在前面章节中介绍的导出和导入语句称为“静态”导入。 这是因为它们确实是静态的，语法非常严格。 @@ -20,19 +21,20 @@ if(...) { } { - import ...; // 错误, 不能将导入放到块中 + import ...; // 错误，不能将导入放到块中 } ``` -这是因为，导入/导出的目的是为了代码提供主干结构。这是非常好的事情，因为这样可以分析代码结构，可以收集和打包模块，可以删除未使用的导出（tree-shaken）。这些都是可能的，因为一切都是固定的。 +这是因为，导入/导出的目的是为代码提供主干结构。这是非常好的事情，因为这样便于分析代码结构，可以收集和打包模块，可以删除未使用的导出（tree-shaken）。这些只有在这一切都是固定的情况才能够实现。 但是，我们如何才能动态的按需导入模块呢？ ## import() 函数 -`import(module)` 函数可以从任何地方调用。它返回一个解析为模块对象的 promise。 +`import(module)` 函数可以在任何地方调用。它返回一个解析为模块对象的 promise。 使用模式如下： + ```js run let modulePath = prompt("Module path?"); @@ -49,4 +51,4 @@ import(modulePath) 所以，动态导入用起来很简单。 -此外，动态导入可以像常规脚本一样工作，不需要额外指出 `script type="module"`。 \ No newline at end of file +此外，动态导入可以像常规脚本一样工作，不需要额外指出 `script type="module"`。 From 7415b42386d99f0a545cf5dc0897c8cc7a6c94b9 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Mon, 10 Jun 2019 19:04:47 +0800 Subject: [PATCH 05/28] Update article.md --- 1-js/13-modules/02-import-export/article.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 982168cd2c..745bdecb38 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -156,7 +156,6 @@ say.bye('John'); // Bye, John! 到目前为止，我们已经看到了如何导入/导出（import/export）多个内容，也可以用“as”语法导入/导出为其他名称。 在开发中，模块包含： - - 一个库，一组函数，就像 `lib.js` 这样。 - 或者在 `user.js` 中描述了一个实体，比如 `class User` 这样，整个模块只有这个类。 @@ -438,4 +437,4 @@ if (something) { 但是，如果我们真的需要根据某些条件来导入东西呢？比如在某些合适的时间？就像根据要求加载模块，什么时候才是真正需要？ -我们将在下一章探讨这些关于动态导入的内容。 \ No newline at end of file +我们将在下一章探讨这些关于动态导入的内容。 From 04d341b4620d142ad3a7c601cfd7e81264cb50cb Mon Sep 17 00:00:00 2001 From: LeviDing Date: Mon, 10 Jun 2019 19:38:00 +0800 Subject: [PATCH 06/28] Update article.md --- 1-js/13-modules/02-import-export/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 745bdecb38..f3277a2104 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -274,6 +274,7 @@ let User = user.default; new User('John'); ``` + ### 我应该使用默认导出吗？ 开发者应该谨慎使用默认导出，因为这将会使代码更难维护。 From e227bed8d519dfd3e2a1ca68b09d2ca87e6adb78 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:08:47 +0800 Subject: [PATCH 07/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index f3277a2104..a67a23f34c 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -25,7 +25,7 @@ } ``` -````smart header="No semicolons after export class/function" +````smart header="导出类/函数后没有分号" 注意，在类或者函数前导出 `export` 不会让它们变成 [函数表达式](info:function-expressions-arrows)。尽管被导出了，但它仍然是一个函数声明。 大部分 JavaScript 样式指南都推荐在语句之后使用分号，但是在函数和类声明时候不会使用分号。 From 3b7ca803bf6b02c6d497ad30d3e550b808777aa5 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:09:02 +0800 Subject: [PATCH 08/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index a67a23f34c..5fd27b16ce 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -26,7 +26,7 @@ ``` ````smart header="导出类/函数后没有分号" -注意，在类或者函数前导出 `export` 不会让它们变成 [函数表达式](info:function-expressions-arrows)。尽管被导出了，但它仍然是一个函数声明。 +注意，在类或者函数前的 `export` 不会让它们变成 [函数表达式](info:function-expressions-arrows)。尽管被导出了，但它仍然是一个函数声明。 大部分 JavaScript 样式指南都推荐在语句之后使用分号，但是在函数和类声明时候不会使用分号。 From 08f0391caff2277e8676b1a252996643b924b17a Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:09:13 +0800 Subject: [PATCH 09/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 5fd27b16ce..f9c05e20d8 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -28,7 +28,7 @@ ````smart header="导出类/函数后没有分号" 注意，在类或者函数前的 `export` 不会让它们变成 [函数表达式](info:function-expressions-arrows)。尽管被导出了，但它仍然是一个函数声明。 -大部分 JavaScript 样式指南都推荐在语句之后使用分号，但是在函数和类声明时候不会使用分号。 +大部分 JavaScript 样式指南都推荐在语句之后使用分号，但是不要在函数和类的声明后使用分号。 这就是为什么在 `export class` 和 `export function` 后也没有分号的原因。 From d010c5486faad279950c54bf6de0e58f6c290c83 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:09:40 +0800 Subject: [PATCH 10/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index f9c05e20d8..4327cad2c0 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -30,7 +30,7 @@ 大部分 JavaScript 样式指南都推荐在语句之后使用分号，但是不要在函数和类的声明后使用分号。 -这就是为什么在 `export class` 和 `export function` 后也没有分号的原因。 +这就是为什么在 `export class` 和 `export function` 后不使用分号。 ```js export function sayHi(user) { From 0c11c5c04c6f5135faa93bb3b3ddde0f112248ee Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:09:53 +0800 Subject: [PATCH 11/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 4327cad2c0..89664cb8fa 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -61,7 +61,7 @@ export {sayHi, sayBye}; // 导出变量列表 */!* ``` -从技术上讲，我们也可以把 `export` 放在函数上面。 +...从技术上讲，我们也可以把 `export` 放在函数上面。 ## 导入所有（import *） From 15904293f09bd88cc28e65f8a6ff8459251ee3a2 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:10:05 +0800 Subject: [PATCH 12/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 89664cb8fa..06f7e78219 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -63,7 +63,7 @@ export {sayHi, sayBye}; // 导出变量列表 ...从技术上讲，我们也可以把 `export` 放在函数上面。 -## 导入所有（import *） +## 导入所有（`import *`） 通常，我们把要导入的东西放到 `import {...}` 列表里，就像这样： From 08722a6fe8cf96d13774d55471c5335d083c06da Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:10:16 +0800 Subject: [PATCH 13/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 06f7e78219..e6bb3d661e 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -65,7 +65,7 @@ export {sayHi, sayBye}; // 导出变量列表 ## 导入所有（`import *`） -通常，我们把要导入的东西放到 `import {...}` 列表里，就像这样： +通常，我们把要导入的东西列在 `import {...}` 中，就像这样： ```js // 📁 main.js From ab6c2f4e2014b82b339e89d7c4a0d04bef0e1b9e Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:10:32 +0800 Subject: [PATCH 14/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index e6bb3d661e..46a07c72b2 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -77,7 +77,7 @@ sayHi('John'); // Hello, John! sayBye('John'); // Bye, John! ``` -但是如果这个列表很长呢？我们可以使用 `import * as ` 导入任何东西，例如： +但是如果这个列表很长呢？我们可以使用 `import * as ` 导入所有内容，例如： ```js // 📁 main.js From 51c42f1005ff6d103f8db8f6f6277775fa799caf Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:10:43 +0800 Subject: [PATCH 15/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 46a07c72b2..bdecca9f24 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -89,7 +89,7 @@ say.sayHi('John'); say.sayBye('John'); ``` -乍一看，“导入一切”看起来很酷，语法也很短，但是我们通常为什么要明确列出我们需要导入的内容？ +乍一看，“通通导入”看起来很酷，语法也很短，但是我们通常为什么要明确列出我们需要导入的内容？ 这里有几个原因： From d47ff9d65abd9cf8b1a7c84946b7e18c4d51705f Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:11:11 +0800 Subject: [PATCH 16/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index bdecca9f24..525826196f 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -93,7 +93,7 @@ say.sayBye('John'); 这里有几个原因： -1. 现在的构建工具（[webpack](http://webpack.github.io) 或者其他的）把模块打包到一起，然后优化它们以使加载更快，并且还会删除无用的代码。 +1. 现在的构建工具（[webpack](http://webpack.github.io) 或者其他的）把模块打包到一起，然后对其进行优化以获得更快的加载速度，并且还会删除无用的代码。 比如说，我们在项目里添加第三方库 `lib.js` 中的几个函数： ```js From 0e428ec2c1957344fedd5faea54a5a71718a6b5e Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:11:23 +0800 Subject: [PATCH 17/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 525826196f..e14325be32 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -108,7 +108,7 @@ say.sayBye('John'); // 📁 main.js import {sayHi} from './lib.js'; ``` - 然后，打包工具会自动检测优化它，并且在打包文件中完全删除其他无用的函数以使得打包后的文件更小。这就是所谓的“tree-shaking”技术。 + ...然后，打包工具会自动检测优化它，并且在打包文件中完全删除其他无用的函数以使得打包后的文件更小，这就是所谓的“tree-shaking”技术。 2. 明确列出要导入的内容会使得名称较短：`sayHi()` 取代 `lib.sayHi()`。 3. 显示导入可以更好的概述代码结构：在哪里使用了什么。它使得代码阅读和重构更容易。 From 19f015116a2201df05d2e9e3e935290cdd8c58f0 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:11:37 +0800 Subject: [PATCH 18/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index e14325be32..cb1604e376 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -161,7 +161,7 @@ say.bye('John'); // Bye, John! 大部分情况下，开发者倾向于使用第二种方式，因此每个“thing”都存在于自己的模块中。 -当然，如果每个文件都需要自己的模块，这就导致了许多的文件出现，但是这不算什么大问题。实际上，如果文件命名以及文件夹结构得当，代码导航将会变得更容易。 +当然，如果每个文件都需要自己的模块，这就使得文件很多，但是这不算什么大问题。实际上，如果文件命名以及文件夹结构得当，代码导航会变得更容易。 模块提供特殊的默认导出 `export default` 语法，以使得“一个模块只做一件事”看起来更好。 From d8109a5b2687afff048c85185ff78279ee175ec0 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:11:51 +0800 Subject: [PATCH 19/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index cb1604e376..e45947f287 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -168,7 +168,7 @@ say.bye('John'); // Bye, John! 默认导出要求下列的 `export` 和 `import` 语句： 1. `export default` 放在模块“主导出（main export）”之前。 -2. `import` 导入时不使用花括号 +2. `import` 导入时不使用花括号 例如，`user.js` 导出 `class User`： From 07ce8ea46aee9c26fe5eeeec17aa0f6d32b32b8d Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:12:05 +0800 Subject: [PATCH 20/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index e45947f287..4169678f1d 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -181,7 +181,7 @@ export *!*default*/!* class User { // 只要添加“default”即可 } ``` -在 `main.js` 中添加导入： +...在 `main.js` 中添加导入： ```js // 📁 main.js From e5c34037c92b8e22198b185f027d0d4998bd57b6 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:12:19 +0800 Subject: [PATCH 21/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 4169678f1d..058faf7b42 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -228,7 +228,7 @@ export class { // Error!（非命名导出需要名称） ### “Default” 别名 -“default”关键词用于默认导出的别名“alias”，常用于我们需要引用单独导出和其他脚本的情况。 +“default”关键词用于默认导出的别名，常用于我们需要引用单独导出和其他脚本的情况。 例如，如果我们已经声明了一个函数，然后导出它 `export default`（和定义分开）： From ce84b7b2c841020c8326b18f32ce8cb4214f8c43 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:12:32 +0800 Subject: [PATCH 22/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 058faf7b42..e8a51ca2b8 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -296,7 +296,7 @@ import MyUser from './user.js'; // works too // 使用任何名称导入都没有问题 ``` -对于相同的导入，团队成员可能使用不同的命名，因此，默认导出的命名可能会被滥用， +对于相同的导入，团队成员可能使用不同的命名，因此，默认导入的命名可能会被滥用， 通常，为了避免这种情况并保持代码的整洁一致，可以遵从下面这条规则，即导入的变量应该与文件名相对应，例如： From 86ddf4cd531548eb7984ab684266a41c43627305 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:12:53 +0800 Subject: [PATCH 23/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index e8a51ca2b8..128228bff4 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -298,7 +298,7 @@ import MyUser from './user.js'; // works too 对于相同的导入，团队成员可能使用不同的命名，因此，默认导入的命名可能会被滥用， -通常，为了避免这种情况并保持代码的整洁一致，可以遵从下面这条规则，即导入的变量应该与文件名相对应，例如： +通常，为了避免这种情况并保持代码的整洁一致，可以遵从这条规则，即导入的变量应该与文件名相对应，例如： ```js import User from './user.js'; From 5eac2a75428aea3be4287471227f177e87208cbf Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:13:06 +0800 Subject: [PATCH 24/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 128228bff4..1a56d637ea 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -307,7 +307,7 @@ import func from '/path/to/func.js'; ... ``` -另一种解决方案是在任何地方都使用命名导出。即使只导出一个东西，它仍然使用命名导出，而不是默认导出 `default`。 +另一种解决方案是在任何地方都使用命名导出。即使只导出一个东西，也仍然使用命名导出，而不是默认导出 `default`。 这也使得重新导出（见下一节）更容易。 From 87bc07c99c31e80df5080d85f0ceab5da08cba84 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:13:21 +0800 Subject: [PATCH 25/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 1a56d637ea..ca7c27ea3d 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -375,7 +375,7 @@ export {default as Github} from './providers/github.js'; ... ``` -````warn header="Re-exporting default is tricky" +````warn header="重新导出“默认导出”则很棘手" 请注意：`export User from './user.js'` 语句无效。这实际上是一个语法错误。要重新导出默认导出，我们必须明确指出 `{default as ...}`，就像上面例子一样。 另外，还有另外一个奇怪之处是，`export * from './user.js'` 只重新导出命名导出，不导出默认导出。再次重申，我们需要像上面那样明确指出 `{default as ...}`。 From 10180428eccf0b1a6e0bd17ac634f4f7be378fc8 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:13:35 +0800 Subject: [PATCH 26/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index ca7c27ea3d..efc694865c 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -380,7 +380,7 @@ export {default as Github} from './providers/github.js'; 另外，还有另外一个奇怪之处是，`export * from './user.js'` 只重新导出命名导出，不导出默认导出。再次重申，我们需要像上面那样明确指出 `{default as ...}`。 -例如，重新导入所有内容，需要下面两条语句： +例如，重新导出所有内容，需要下面两条语句： ```js export * from './module.js'; // 重新导出命名导出 export {default} from './module.js'; // 重新导出默认导出 From 0e7285e02a42c68baef373698432a67b23a50ced Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:13:47 +0800 Subject: [PATCH 27/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index efc694865c..0bb88677eb 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -427,7 +427,7 @@ import {sayHi} from './say.js'; // 在脚本底部导入 在开发中，导入通常位于文件开头，但是这只是为了方便。 -**请注意在 `{...}` 中的导入/导出语句无效** +**请注意在 `{...}` 中的导入/导出语句无效。** 像这样的导入语句是无效的： ```js From b6fca32d36b2de751cd41b18206c2258637e7ed9 Mon Sep 17 00:00:00 2001 From: lycheeEng Date: Mon, 10 Jun 2019 21:13:59 +0800 Subject: [PATCH 28/28] Update 1-js/13-modules/02-import-export/article.md Co-Authored-By: LeviDing --- 1-js/13-modules/02-import-export/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index 0bb88677eb..08b8aab2fb 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -436,6 +436,6 @@ if (something) { } ``` -但是，如果我们真的需要根据某些条件来导入东西呢？比如在某些合适的时间？就像根据要求加载模块，什么时候才是真正需要？ +...但是，如果我们真的需要根据某些条件来导入东西呢？或者在某些合适的时间？就像根据要求加载模块，什么时候才是真正需要？ 我们将在下一章探讨这些关于动态导入的内容。