From 272e580aa433db105841336d099a975e63362df6 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 09:54:30 +0800 Subject: [PATCH 01/14] Update article.md --- 1-js/02-first-steps/16-arrow-functions-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/16-arrow-functions-basics/article.md b/1-js/02-first-steps/16-arrow-functions-basics/article.md index e96481cf3a..0d61cd2627 100644 --- a/1-js/02-first-steps/16-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/16-arrow-functions-basics/article.md @@ -67,7 +67,7 @@ let welcome = (age < 18) ? () => alert('Hello') : () => alert("Greetings!"); -welcome(); // 现在好了 +welcome(); ``` 一开始，箭头函数可能看起来并不熟悉，也不容易读懂，但一旦我们看习惯了之后，这种情况很快就会改变。 From 3262669e41ad1587af1ed8d5f18e7be4faa4b725 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 09:57:55 +0800 Subject: [PATCH 02/14] Update article.md --- 1-js/03-code-quality/03-comments/article.md | 32 ++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/1-js/03-code-quality/03-comments/article.md b/1-js/03-code-quality/03-comments/article.md index 1a5e35a7ac..b4ad6ea118 100644 --- a/1-js/03-code-quality/03-comments/article.md +++ b/1-js/03-code-quality/03-comments/article.md @@ -125,25 +125,25 @@ function addJuice(container) { 记录函数的参数和用法 : 有一个专门用于记录函数的语法 [JSDoc](http://en.wikipedia.org/wiki/JSDoc)：用法、参数和返回值。 - 例如： - ```js - /** - * 返回 x 的 n 次幂的值。 - * - * @param {number} x 要改变的值。 - * @param {number} n 幂数，必须是一个自然数。 - * @return {number} x 的 n 次幂的值。 - */ - function pow(x, n) { - ... - } - ``` +例如： +```js +/** + * 返回 x 的 n 次幂的值。 + * + * @param {number} x 要改变的值。 + * @param {number} n 幂数，必须是一个自然数。 + * @return {number} x 的 n 次幂的值。 + */ +function pow(x, n) { + ... +} +``` - 这种注释可以帮助我们理解函数的目的，并且不需要研究其内部的实现代码，就可以直接正确地使用它。 +这种注释可以帮助我们理解函数的目的，并且不需要研究其内部的实现代码，就可以直接正确地使用它。 - 顺便说一句，很多诸如 [WebStorm](https://www.jetbrains.com/webstorm/) 这样的编辑器，都可以很好地理解和使用这些注释，来提供自动补全和一些自动化代码检查工作。 +顺便说一句，很多诸如 [WebStorm](https://www.jetbrains.com/webstorm/) 这样的编辑器，都可以很好地理解和使用这些注释，来提供自动补全和一些自动化代码检查工作。 - 当然，也有一些像 [JSDoc 3](https://github.com/jsdoc3/jsdoc) 这样的工具，可以通过注释直接生成 HTML 文档。你可以在 阅读更多关于 JSDoc 的信息。 +当然，也有一些像 [JSDoc 3](https://github.com/jsdoc3/jsdoc) 这样的工具，可以通过注释直接生成 HTML 文档。你可以在 阅读更多关于 JSDoc 的信息。 为什么任务以这种方式解决？ : 写了什么代码很重要。但是为什么 **不** 那样写可能对于理解正在发生什么更重要。为什么任务是通过这种方式解决的？代码并没有给出答案。 From 37a80f5c8d89e13f9855489a986e34bc10ea562d Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 09:59:21 +0800 Subject: [PATCH 03/14] Update article.md --- 1-js/04-object-basics/01-object/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/04-object-basics/01-object/article.md b/1-js/04-object-basics/01-object/article.md index 8d215ba7e7..192ed762c3 100644 --- a/1-js/04-object-basics/01-object/article.md +++ b/1-js/04-object-basics/01-object/article.md @@ -215,7 +215,7 @@ let bag = { function makeUser(name, age) { return { name: name, - age: age + age: age, // ……其他的属性 }; } @@ -233,7 +233,7 @@ function makeUser(name, age) { *!* return { name, // 与 name: name 相同 - age // 与 age: age 相同 + age, // 与 age: age 相同 // ... }; */!* From 5fcbd2a14adb3745fb974ee5e0c8135b491d0f34 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:00:55 +0800 Subject: [PATCH 04/14] Update solution.md --- 1-js/05-data-types/11-date/8-format-date-relative/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/11-date/8-format-date-relative/solution.md b/1-js/05-data-types/11-date/8-format-date-relative/solution.md index eb5fce1b17..cf80e0cddf 100644 --- a/1-js/05-data-types/11-date/8-format-date-relative/solution.md +++ b/1-js/05-data-types/11-date/8-format-date-relative/solution.md @@ -40,7 +40,7 @@ alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" -// 昨天的日期如：31.12.2016, 20:00 +// 昨天的日期如：31.12.2016 20:00 alert( formatDate(new Date(new Date - 86400 * 1000)) ); ``` From d31ed98b069a2ae32bdea4f7c313cbc7c3535ab5 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:04:07 +0800 Subject: [PATCH 05/14] Update task.md --- 1-js/05-data-types/11-date/8-format-date-relative/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/11-date/8-format-date-relative/task.md b/1-js/05-data-types/11-date/8-format-date-relative/task.md index 1ae208297b..5dd110efb2 100644 --- a/1-js/05-data-types/11-date/8-format-date-relative/task.md +++ b/1-js/05-data-types/11-date/8-format-date-relative/task.md @@ -20,6 +20,6 @@ alert( formatDate(new Date(new Date - 30 * 1000)) ); // "30 sec. ago" alert( formatDate(new Date(new Date - 5 * 60 * 1000)) ); // "5 min. ago" -// yesterday's date like 31.12.16, 20:00 +// 昨天的日期，例如 31.12.16 20:00 alert( formatDate(new Date(new Date - 86400 * 1000)) ); ``` From 34b9a8e9d09b8bbfce86301b69be14549a82d8e6 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:06:04 +0800 Subject: [PATCH 06/14] Update article.md --- 1-js/08-prototypes/02-function-prototype/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/08-prototypes/02-function-prototype/article.md b/1-js/08-prototypes/02-function-prototype/article.md index eaf302c590..2ec90a2895 100644 --- a/1-js/08-prototypes/02-function-prototype/article.md +++ b/1-js/08-prototypes/02-function-prototype/article.md @@ -41,7 +41,7 @@ alert( rabbit.eats ); // true 在上图中，`"prototype"` 是一个水平箭头，表示一个常规属性，`[[Prototype]]` 是垂直的，表示 `rabbit` 继承自 `animal`。 ```smart header="`F.prototype` 仅用在 `new F` 时" -`F.prototype` 属性仅在 `new F` 被调用时使用，它为新对象的 `[[Prototype]]` 赋值。之后，`F.prototype` 和新对象之间就没有任何联系了。可以把它看成“一次性的礼物”。 +`F.prototype` 属性仅在 `new F` 被调用时使用，它为新对象的 `[[Prototype]]` 赋值。 如果在创建之后，`F.prototype` 属性有了变化（`F.prototype = `），那么通过 `new F` 创建的新对象也将随之拥有新的对象作为 `[[Prototype]]`，但已经存在的对象将保持旧有的值。 ``` From 152118e90be4aba9d5b98e01a90ce26974d8eecf Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:12:46 +0800 Subject: [PATCH 07/14] Update article.md --- .../2-custom-errors/article.md | 36 ++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/1-js/10-error-handling/2-custom-errors/article.md b/1-js/10-error-handling/2-custom-errors/article.md index 0a34e017c0..79a895cf92 100644 --- a/1-js/10-error-handling/2-custom-errors/article.md +++ b/1-js/10-error-handling/2-custom-errors/article.md @@ -215,11 +215,39 @@ alert( new PropertyRequiredError("field").name ); // PropertyRequiredError 在上面代码中的函数 `readUser` 的目的就是“读取用户数据”。在这个过程中可能会出现不同类型的 error。目前我们有了 `SyntaxError` 和 `ValidationError`，但是将来，函数 `readUser` 可能会不断壮大，并可能会产生其他类型的 error。 -调用 `readUser` 的代码应该处理这些 error。现在它在 `catch` 块中使用了多个 `if` 语句来检查 error 类，处理已知的 error，并再次抛出未知的 error。但是如果函数 `readUser` 产生了多种 error，那么我们应该扪心自问：我们真的想在每个调用 `readUser` 的代码中都一一检查所有的 error 类型吗？ +调用 `readUser` 的代码应该处理这些 error。现在它在 `catch` 块中使用了多个 `if` 语句来检查 error 类，处理已知的 error，并再次抛出未知的 error。 -通常答案是 "No"：外部代码希望“比它高一个级别”，外部代码只想具有几种“数据读取异常” — 为什么发生了这样的 error 通常是无关紧要的（error 信息描述了它）。或者，如果能有一种方法能够获取 error 的详细信息那就更好了，但前提是我们需要这样做。 +The scheme is like this: -因此，让我们创建一个新的类 `ReadError` 来表示此类 error。如果在 `readUser` 内部发生了 error，我们将在那里捕获这个 error 并生成 `ReadError`。我们也会在其 `cause` 属性中保留对原始 error 的引用。然后，外部代码将只需要检查 `ReadError`。 +```js +try { + ... + readUser() // the potential error source + ... +} catch (err) { + if (err instanceof ValidationError) { + // handle validation errors + } else if (err instanceof SyntaxError) { + // handle syntax errors + } else { + throw err; // unknown error, rethrow it + } +} +``` + +In the code above we can see two types of errors, but there can be more. + +If the `readUser` function generates several kinds of errors, then we should ask ourselves: do we really want to check for all error types one-by-one every time? + +Often the answer is "No": we'd like to be "one level above all that". We just want to know if there was a "data reading error" -- why exactly it happened is often irrelevant (the error message describes it). Or, even better, we'd like to have a way to get the error details, but only if we need to. + +The technique that we describe here is called "wrapping exceptions". + +1. We'll make a new class `ReadError` to represent a generic "data reading" error. +2. The function `readUser` will catch data reading errors that occur inside it, such as `ValidationError` and `SyntaxError`, and generate a `ReadError` instead. +3. The `ReadError` object will keep the reference to the original error in its `cause` property. + +Then the code that calls `readUser` will only have to check for `ReadError`, not for every kind of data reading errors. And if it needs more details of an error, it can check its `cause` property. 下面的代码定义了 `ReadError`，并在 `readUser` 和 `try..catch` 中演示了其用法： @@ -293,7 +321,7 @@ try { 所以外部代码检查 `instanceof ReadError`，并且它的确是。不必列出所有可能的 error 类型。 -这种方法被称为“包装异常（wrapping exceptions）”，因为我们将“低级别的异常”包装到 `ReadError` 中，这对于调用代码来说更加抽象和方便。它被广泛应用于面向对象的编程中。 +这种方法被称为“包装异常（wrapping exceptions）”，因为我们将“低级别”的异常“包装”到了更抽象的 `ReadError` 中。它被广泛应用于面向对象的编程中。 ## 总结 From d6153e70033be626b77888f46c44d1ee795df055 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:23:35 +0800 Subject: [PATCH 08/14] Update article.md --- 1-js/11-async/01-callbacks/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index 50e7171a9a..9766f386ee 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -10,11 +10,11 @@ 但是，我们会尽全力使讲解变得更加清晰。在这儿不会有浏览器方面的真正复杂的东西。 ``` -JavaScipt 中的许多行为（action）都是 **异步的**。换句话说，我们现在启动它们，但在稍后再完成。 +JavaScipt 主机（host）环境提供了许多函数，这些函数允许我们安排 **异步** 动作（action）。换句话说，我们现在开始执行的动作，但它们会在稍后完成。 -例如，我们可以使用 `setTimeout` 来安排此类行为。 +例如，我们可以使用 `setTimeout` 来安排此类动作。 -这儿有一些实际中的异步行为的示例，例如加载脚本和模块（我们将在后面的章节中介绍）。 +这儿有一些实际中的异步动作的示例，例如加载脚本和模块（我们将在后面的章节中介绍）。 让我们看一下函数 `loadScript(src)`，该函数使用给定的 `src` 加载脚本： @@ -263,7 +263,7 @@ loadScript('1.js', function(error, script) { ![](callback-hell.svg) -嵌套调用的“金字塔”随着每个异步行为会向右增长。很快它就失控了。 +嵌套调用的“金字塔”随着每个异步动作会向右增长。很快它就失控了。 所以这种编码方式不是很好。 @@ -307,4 +307,4 @@ function step3(error, script) { 我们希望还有更好的方法。 -幸运地是，有其他方法可以避免此类金字塔。最好的方法之一就是 "promise"，我们将在下一章中介绍它。 +幸运的是，有其他方法可以避免此类金字塔。最好的方法之一就是 "promise"，我们将在下一章中介绍它。 From 578bc956cddaeb110ada9ef1e5cbe2625aa9ff31 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:25:05 +0800 Subject: [PATCH 09/14] Update article.md --- 1-js/11-async/01-callbacks/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/01-callbacks/article.md b/1-js/11-async/01-callbacks/article.md index 9766f386ee..07a6163d4d 100644 --- a/1-js/11-async/01-callbacks/article.md +++ b/1-js/11-async/01-callbacks/article.md @@ -12,7 +12,7 @@ JavaScipt 主机（host）环境提供了许多函数，这些函数允许我们安排 **异步** 动作（action）。换句话说，我们现在开始执行的动作，但它们会在稍后完成。 -例如，我们可以使用 `setTimeout` 来安排此类动作。 +例如，`setTimeout` 函数就是一个这样的函数。 这儿有一些实际中的异步动作的示例，例如加载脚本和模块（我们将在后面的章节中介绍）。 From 7a08c812dccd4c7de89d2cdb62a67913d8c5786b Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:27:57 +0800 Subject: [PATCH 10/14] Update index.html --- .../4-put-ball-in-center/ball-half/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html index ca9c4d579b..8f855ecfa0 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html @@ -9,7 +9,7 @@ background-color: #00FF00; position: relative; } - + #ball { position: absolute; } @@ -20,7 +20,7 @@
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
@@ -38,4 +38,4 @@ - \ No newline at end of file + From d31adb8ac074497350b2a3827df23602116e50c8 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:34:22 +0800 Subject: [PATCH 11/14] Update solution.md --- .../4-put-ball-in-center/solution.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md index 64cec9e67d..4caa2e5983 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md @@ -1,4 +1,4 @@ -小球具有 `position:absolute`。这意味着它的 `left/top` 坐标是从最近的具有定位属性的元素开始测量的，这个元素即 `#field`（因为它有 `position:relative`）。 +球具有 `position:absolute`。这意味着它的 `left/top` 坐标是从最近的具有定位属性的元素开始测量的，这个元素即 `#field`（因为它有 `position:relative`）。 坐标从场（field）的左上角内侧开始： @@ -24,17 +24,22 @@ ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px'; ``` -**注意：陷阱！** +现在，球终于居中了。 + +````warn header="注意：陷阱！" 当 `` 没有 width/height 时，代码将无法可靠地工作： ```html ``` +```` 当浏览器不知道图片的 width/height（通过标签 attribute 或 CSS）时，它会假定它们等于 `0`，直到图片加载完成。 -但在实际中，第一次加载后，浏览器通常会缓存该图片，并在下一次加载时，浏览器会立即拥有该图片的大小。但是在第一次加载时， `ball.offsetWidth` 的值为 `0`，这会导致错误的坐标。 +因此，在图片加载完成之前，`ball.offsetWidth` 的值为 `0`。这会导致上面的代码中会有错误的坐标。 + +在第一次加载完成后，浏览器通常会缓存该图片，并在下一次加载时，浏览器会立即拥有该图片的大小。但是在第一次加载时，`ball.offsetWidth` 的值为 `0`。 我们应该通过在 `` 中添加 `width/height` 来解决这个问题： From bb54d654d82c0e3320093446c9152d80076e69f0 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 25 Mar 2020 10:35:34 +0800 Subject: [PATCH 12/14] Update index.html --- .../4-put-ball-in-center/solution.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html index 9ebe6001e7..9f21e54212 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html @@ -26,7 +26,7 @@