diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 3f843e142d..4823e764e6 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -73,7 +73,7 @@ JavaScript 的能力很大程度上依赖于它执行的环境。例如:[Node. 这就是“同源策略”。为了解决“同源策略”问题,两个标签页必须**都**包含一些处理这个问题的特殊的 JavaScript 代码,并均允许数据交换,这样才能够实现两个同源标签页的数据交换。本教程会讲到这部分相关的知识。 这个限制也是为了用户的信息安全。例如,用户打开的 `http://anysite.com` 网页的 JavaScript 肯定不能访问 `http://gmail.com`(另外一个标签页打开的网页)也不能从那里窃取信息。 -- JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站/域名的服务器中获取数据的能力是受限的。尽管这可以实现,但是需要来自远程服务器的明确协议(在 HTTP 头中)。这也是为了用户的数据安全。 +- JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站/域名的服务器中获取数据的能力是受限的。尽管这可以实现,但是需要来自远程服务器的明确协议(在 HTTP header 中)。这也是为了用户的数据安全。 ![](limitations.svg) diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md index 83761fc96c..fcf58ad3d2 100644 --- a/1-js/03-code-quality/02-coding-style/article.md +++ b/1-js/03-code-quality/02-coding-style/article.md @@ -225,7 +225,7 @@ function pow(x, n) { ## 函数位置 -如果你正在写几个“辅助类”的函数和一些使用它们的代码,那么有三种方式来组织这些函数。 +如果你正在写几个“辅助”函数和一些使用它们的代码,那么有三种方式来组织这些函数。 1. 在调用这些函数的代码的 **上方** 声明这些函数: @@ -256,7 +256,7 @@ function pow(x, n) { setHandler(elem); walkAround(); - // --- *!*辅助类函数*/!* --- + // --- *!*辅助函数*/!* --- function createElement() { ... } diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md index 6083b53192..ebbf20d765 100644 --- a/1-js/06-advanced-functions/06-function-object/article.md +++ b/1-js/06-advanced-functions/06-function-object/article.md @@ -347,6 +347,6 @@ welcome(); // Hello, Guest(嵌套调用有效) 此外,函数可以带有额外的属性。很多知名的 JavaScript 库都充分利用了这个功能。 -它们创建一个“主”函数,然后给它附加很多其它 "helper" 函数。例如,[jQuery](https://jquery.com) 库创建了一个名为 `$` 的函数。[lodash](https://lodash.com) 库创建一个 `_` 函数,然后为其添加了 `_.add`、`_.keyBy` 以及其它属性(欲了解详情,参见 [docs](https://lodash.com/docs))。实际上,它们这么做是为了减少对全局空间的污染,这样一个库就只会有一个全局变量。这样就降低了命名冲突的可能性。 +它们创建一个“主”函数,然后给它附加很多其它“辅助”函数。例如,[jQuery](https://jquery.com) 库创建了一个名为 `$` 的函数。[lodash](https://lodash.com) 库创建一个 `_` 函数,然后为其添加了 `_.add`、`_.keyBy` 以及其它属性(欲了解详情,参见 [docs](https://lodash.com/docs))。实际上,它们这么做是为了减少对全局空间的污染,这样一个库就只会有一个全局变量。这样就降低了命名冲突的可能性。 所以,一个函数本身可以完成一项有用的工作,还可以在自身的属性中附带许多其他功能。 diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md index c7583e7732..64c02cd763 100644 --- a/1-js/11-async/03-promise-chaining/article.md +++ b/1-js/11-async/03-promise-chaining/article.md @@ -232,7 +232,7 @@ JavaScript 检查在 `(*)` 行中由 `.then` 处理程序(handler)返回的 let promise = fetch(url); ``` -执行这条语句,向 `url` 发出网络请求并返回一个 promise。当远程服务器返回响应头(是在 **全部响应加载完成前**)时,该 promise 用使用一个 `response` 对象来进行 resolve。 +执行这条语句,向 `url` 发出网络请求并返回一个 promise。当远程服务器返回 header(是在 **全部响应加载完成前**)时,该 promise 用使用一个 `response` 对象来进行 resolve。 为了读取完整的响应,我们应该调用 `response.text()` 方法:当全部文字(full text)内容从远程服务器下载完成后,它会返回一个 promise,该 promise 以刚刚下载完成的这个文本作为 result 进行 resolve。 diff --git a/1-js/13-modules/02-import-export/article.md b/1-js/13-modules/02-import-export/article.md index e8ab1043e0..1aaf328ff1 100755 --- a/1-js/13-modules/02-import-export/article.md +++ b/1-js/13-modules/02-import-export/article.md @@ -321,7 +321,7 @@ export {default as User} from './user.js'; // 重新导出 default 为什么要这样做?我们看一个实际开发中的用例。 -想象一下,我们正在编写一个 "package":一个包含大量模块的文件夹,其中一些功能是导出到外部的(像 NPM 这样的工具允许发布和分发这样的 package),并且其中一些模块仅仅是供其他 package 中的模块内部使用的“帮助器(helper)”。 +想象一下,我们正在编写一个 "package":一个包含大量模块的文件夹,其中一些功能是导出到外部的(像 NPM 这样的工具允许发布和分发这样的 package),并且其中一些模块仅仅是供其他 package 中的模块内部使用的 "helpers"。 文件结构可能是这样的: ``` 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 8074771721..1f34ead94e 100755 --- a/1-js/13-modules/03-modules-dynamic-imports/article.md +++ b/1-js/13-modules/03-modules-dynamic-imports/article.md @@ -1,4 +1,4 @@ -# 动态导入(Dynamic import) +# 动态导入 我们在前面章节中介绍的导出和导入语句称为“静态”导入。语法非常简单且严格。 diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index dc1d436eeb..bcbcc52340 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -188,7 +188,7 @@ tagName 和 nodeName 之间有什么不同吗? 如果我们只处理元素,那么 `tagName` 和 `nodeName` 这两种方法,我们都可以使用,没有区别。 ```smart header="标签名称始终是大写的,除非是在 XML 模式下" -浏览器有两种处理文档(document)的模式:HTML 和 XML。通常,HTML 模式用于网页。只有在浏览器接收到带有 `Content-Type: application/xml+xhtml` 报头(header)的 XML-document 时,XML 模式才会被启用。 +浏览器有两种处理文档(document)的模式:HTML 和 XML。通常,HTML 模式用于网页。只有在浏览器接收到带有 header `Content-Type: application/xml+xhtml` 的 XML-document 时,XML 模式才会被启用。 在 HTML 模式下,`tagName/nodeName` 始终是大写的:它是 `BODY`,而不是 `` 或 ``。 diff --git a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md index ef78f789b5..f9c137c8b2 100644 --- a/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md +++ b/2-ui/2-events/04-default-browser-action/3-image-gallery/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# 图片库 +# 图册 -创建一个图片库,通过点击缩略图可以更改主图像。 +创建一个图册,通过点击缩略图可以更改主图片。 像这样: diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index 6c49d9945f..51bdec9b6a 100755 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -1,5 +1,5 @@ -# Script 标签属性:async, defer +# 脚本:async,defer 现代的网站中,脚本往往比 HTML 更“重”:它们的大小通常更大,处理时间也更长。 @@ -7,15 +7,15 @@ 这会导致两个重要的问题: -1. 脚本不能访问到位于它们下面的 DOM 元素,因此,脚本不能给它们添加事件等。 -2. 如果页面顶部有一个庞大的脚本,它会“阻塞页面”。在脚本下载并执行结束前,用户都不能看到页面内容: +1. 脚本不能访问到位于它们下面的 DOM 元素,因此,脚本无法给它们添加处理程序等。 +2. 如果页面顶部有一个笨重的脚本,它会“阻塞页面”。在该脚本下载并执行结束前,用户都不能看到页面内容: ```html run height=100

...content before script...

- +

...content after script...

``` @@ -29,17 +29,17 @@ ``` -但是这样的方案绝非完美。例如:浏览器只有在下载完整的 HTML 文档后才会注意到脚本(并且开始下载它)。对于长的 HTML 文档来说,这样的延迟必须引起注意。 +但是这种解决方案远非完美。例如,浏览器只有在下载了完整的 HTML 文档之后才会注意到该脚本(并且可以开始下载它)。对于长的 HTML 文档来说,这样可能会造成明显的延迟。 -对于网络连接很快的人来说,这不值一提。但是这个世界上仍然有很多地区的人们他们使用很慢的网络连接,并且使用着远非完美的移动互联网。 +这对于使用高速连接的人来说,这不值一提,他们不会感受到这种延迟。但是这个世界上仍然有很多地区的人们所使用的网络速度很慢,并且使用的是远非完美的移动互联网连接。 -幸运的是,这里有两个 ` @@ -80,28 +80,28 @@ Defer 脚本保持他们的相对顺序,就像常规脚本一样。 ``` ```smart header="短脚本先下载完成,但是后执行" -浏览器解析页面找到 script 属性并并行下载它们,以提高性能。因此,在上面的实例中,两个脚本并行下载。`small.js` 可能会先下载完成。 +浏览器扫描页面寻找脚本,然后并行下载它们,以提高性能。因此,在上面的示例中,两个脚本是并行下载的。`small.js` 可能会先下载完成。 -但是规范要求脚本按照文档顺序执行,因此它要等到 `long.js` 执行结束才会被执行。 +但是规范要求脚本按照文档顺序执行,因此,它需要等到 `long.js` 执行结束才会被执行。 ``` -```smart header="`defer` 属性仅适用于外部脚本" -`defer` 属性会忽略没有 `src` 属性的 ` ``` -我们可以看到一个很好的错误报告,就像这样: +我们可以看到一个很好的 error 报告,就像这样: ``` Uncaught ReferenceError: noSuchFunction is not defined https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1 ``` -现在,再从其他域名中加载这个脚本: +现在,让我们从另一个域中加载相同的脚本: ```html run height=0 ``` -错误报告与上面不同,就像这样: +此报告与上面那个示例中的不同,就像这样: ``` Script error. , 0:0 ``` -错误细节可能因浏览器而异,但是原理是相同的:任何有关脚本内部的信息都是不可见的。确切来说是因为它来自于其他域。 +error 的详细信息可能因浏览器而异,但是原理是相同的:有关脚本内部的任何信息(包括 error 堆栈跟踪)都被隐藏了。正是因为它来自于另一个域。 -我们为什么需要细节信息? +为什么我们需要 error 的详细信息? -因为有很多服务(我们也可以自己建立)监听 `window.onerror`,在服务器上保存错误信息,并分析它们,以提供用户相应的错误页面。这很棒,因为我们可以看到由用户触发的真实错误。但是我们不能获得来自其他域名的脚本的任何错误信息。 +因为有很多服务(我们也可以构建自己的服务)使用 `window.onerror` 监听全局 error,保存 error 并提供访问和分析 error 的接口。这很好,因为我们可以看到由用户触发的实际中的 error。但是,如果一个脚本来自于另一个源(origin),那么正如我们刚刚看到的那样,其中没有太多有关 error 的信息。 -类似的跨源策略(CORS)也适用于其他类型资源。 +对其他类型的资源也执行类似的跨源策略(CORS)。 -**要允许跨域访问,我们需要 `crossorigin` 属性,同样对于服务器也需要提供特殊的响应头。** +**要允许跨源访问,` ``` -现在,假设服务器提供 `Access-Control-Allow-Origin` 头,一切都正常。我们有完整的错误报告。 +现在,假设服务器提供了 `Access-Control-Allow-Origin` header,一切都正常。我们有了完整的 error 报告。 ## 总结 -`` 图像、外部样式表、脚本和其他资源都提供了 `load` 和 `error` 事件来追踪它们的加载: +图片 ``,外部样式,脚本和其他资源都提供了 `load` 和 `error` 事件以跟踪它们的加载: - `load` 在成功加载时被触发。 - `error` 在加载失败时被触发。 -只有 `