i18n

Author: yangshun

questions/describe-event-bubbling/en-US.langnostic.json

@@ -22,7 +22,7 @@
         "a517a702",
         "9e538dcd",
         "3818abba",
-        "47a90b06",
+        "cd29d4cf",
         "10d6cb7a",
         "1f177e65",
         "d7a0aa2",
@@ -66,7 +66,7 @@
         "a517a702",
         "9e538dcd",
         "3818abba",
-        "47a90b06",
+        "cd29d4cf",
         "10d6cb7a",
         "1f177e65",
         "d7a0aa2",

questions/describe-event-bubbling/zh-CN.mdx

@@ -8,7 +8,7 @@ title: 描述 JavaScript 和浏览器的事件冒泡
 
 事件冒泡对于事件委托至关重要，其中单个事件处理程序管理多个子元素的事件，从而提高性能和代码简洁性。虽然方便，但未能正确管理事件传播可能导致意外行为，例如多个处理程序为单个事件触发。
 
----
+***
 
 ## 什么是事件冒泡？
 
@@ -85,7 +85,7 @@ child.click();
 
 ## 事件委托
 
-事件冒泡是称为 [事件委托](/questions/quiz/describe-event-delegation) 的技术的基础，您将单个事件处理程序附加到多个元素的公共祖先，并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素（如项目列表）并且希望避免将单独的事件处理程序附加到每个项目时，这特别有用。
+事件冒泡是[事件委托](/questions/quiz/explain-event-delegation)技术的基础，您可以在多个元素的公共祖先上附加单个事件处理程序，并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素（如项目列表）并且希望避免将单独的事件处理程序附加到每个项目时，这特别有用。
 
 ```js
 parent.addEventListener('click', (event) => {
@@ -97,15 +97,15 @@ parent.addEventListener('click', (event) => {
 
 ## 优点
 
-- **更简洁的代码：** 减少事件监听器的数量，提高代码可读性和可维护性。
-- **高效的事件处理：** 通过附加更少的监听器，最大限度地减少性能开销。
-- **灵活性：** 允许处理子元素上发生的事件，而无需直接将监听器附加到它们。
+* **更简洁的代码：** 减少事件监听器的数量，提高代码可读性和可维护性。
+* **高效的事件处理：** 通过附加更少的监听器，最大限度地减少性能开销。
+* **灵活性：** 允许处理子元素上发生的事件，而无需直接将监听器附加到它们。
 
 ## 陷阱
 
-- **意外的事件处理：** 请注意，父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
-- **事件顺序：** 事件以特定顺序冒泡。如果多个父元素有事件监听器，它们的执行顺序取决于 DOM 层次结构。
-- **过度委托：** 虽然将事件委托给公共祖先是有效的，但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
+* **意外的事件处理：** 请注意，父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
+* **事件顺序：** 事件以特定顺序冒泡。如果多个父元素有事件监听器，它们的执行顺序取决于 DOM 层次结构。
+* **过度委托：** 虽然将事件委托给公共祖先是有效的，但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
 
 ## 用例
 
@@ -217,6 +217,6 @@ function handleAccordionClick(event) {
 
 ## 延伸阅读
 
-- [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
-- [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
-- [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
+* [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
+* [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
+* [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)

questions/explain-event-delegation/en-US.langnostic.json

@@ -30,7 +30,7 @@
         "d97425a1",
         "b5905a85",
         "4688282c",
-        "1c737627",
+        "5afea3bd",
         "68b07c90",
         "cd5dd65b",
         "b8ab38ac",
@@ -39,7 +39,7 @@
         "2670c799",
         "c7a88171",
         "1f4770e5",
-        "fb9ea696"
+        "b4e3453b"
       ]
     },
     "targets": {
@@ -68,7 +68,7 @@
         "d97425a1",
         "b5905a85",
         "4688282c",
-        "1c737627",
+        "5afea3bd",
         "68b07c90",
         "cd5dd65b",
         "b8ab38ac",
@@ -77,7 +77,7 @@
         "2670c799",
         "c7a88171",
         "1f4770e5",
-        "fb9ea696"
+        "b4e3453b"
       ]
     }
   }

questions/explain-event-delegation/zh-CN.mdx

@@ -108,7 +108,7 @@ userForm.addEventListener('input', (event) => {
 });
 ```
 
-在此示例中，单个 input 事件侦听器附加到表单元素。 它可以响应所有子输入元素的输入更改，从而简化代码，每个 `<input>` 元素使用一个事件侦听器。
+在这个例子中，单个输入事件监听器附加到表单元素。它可以响应所有子输入元素的输入更改，通过消除对每个`<input>`元素上单独监听器的需求来简化代码。
 
 ## 陷阱
 

questions/explain-hoisting/en-US.langnostic.json

@@ -48,7 +48,7 @@
         "b9a03b4e",
         "c314f8b",
         "1f4770e5",
-        "276e19b3"
+        "8d801c81"
       ]
     },
     "targets": {
@@ -95,7 +95,7 @@
         "b9a03b4e",
         "c314f8b",
         "1f4770e5",
-        "276e19b3"
+        "8d801c81"
       ]
     }
   }

questions/explain-hoisting/zh-CN.mdx

@@ -139,5 +139,5 @@ ESLint 是一个静态代码分析器，可以发现违反此类情况，使用
 
 ## 延伸阅读
 
-* [Hoisting | MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting)
-* [JavaScript Visualized: Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h)
+* [Hoisting | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+* [What is Hoisting in JavaScript?](https://www.freecodecamp.org/news/what-is-hoisting-in-javascript)

questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json

@@ -21,8 +21,8 @@
         "be2d34c4",
         "b52ddf94",
         "1dc60677",
-        "11a400e1",
-        "3d40f5c3",
+        "6b3b6f34",
+        "92a0271d",
         "3b5a819f",
         "dae7e089",
         "2b6d6fd1"
@@ -45,8 +45,8 @@
         "be2d34c4",
         "b52ddf94",
         "1dc60677",
-        "11a400e1",
-        "3d40f5c3",
+        "6b3b6f34",
+        "92a0271d",
         "3b5a819f",
         "dae7e089",
         "2b6d6fd1"

questions/explain-how-prototypal-inheritance-works/zh-CN.mdx

@@ -47,8 +47,8 @@ bolt.bark(); // "Woof!"
 
 需要注意的是：
 
-*  `.makeSound` 未在 `Dog` 上定义，因此 JavaScript 引擎会向上查找原型链，并在继承的 `Animal` 上找到 `.makeSound`。
-*  不再推荐使用 `Object.create()` 来构建继承链。请改用 `Object.setPrototypeOf()`。
+* `.makeSound` 未在 `Dog` 上定义，因此 JavaScript 引擎会向上查找原型链，并在继承的 `Animal` 上找到 `.makeSound`。
+* 不再推荐使用 `Object.create()` 来构建继承链。请改用 `Object.setPrototypeOf()`。
 
 ***
 
@@ -105,42 +105,42 @@ console.log(john.sayHello); // undefined
 3. **构造函数**：JavaScript 提供了构造函数来创建对象。当一个函数与 new 关键字一起用作构造函数时，新对象的原型 (`[[Prototype]]`) 将设置为构造函数 的原型属性。
 
 ```js live
-// Define a constructor function
+// 定义一个构造函数
 function Animal(name) {
   this.name = name;
 }
 
-// Add a method to the prototype
+// 将一个方法添加到原型上
 Animal.prototype.sayName = function () {
-  console.log(`My name is ${this.name}`);
+  console.log(`我的名字是 ${this.name}`);
 };
 
-// Define a new constructor function
+// 定义一个新的构造函数
 function Dog(name, breed) {
   Animal.call(this, name);
   this.breed = breed;
 }
 
-// Set the prototype of Dog to be a new instance of Animal
-Dog.prototype = Object.create(Animal.prototype);
+// 设置 Dog 的原型以继承自 Animal 的原型
+Object.setPrototypeOf(Dog.prototype, Animal.prototype);
 
-// Add a method to the Dog prototype
+// 将一个方法添加到 Dog 的原型上
 Dog.prototype.bark = function () {
-  console.log('Woof!');
+  console.log('汪！');
 };
 
-// Create a new object using the Dog constructor function
+// 使用 Dog 构造函数创建一个新对象
 let fido = new Dog('Fido', 'Labrador');
 
-// The new object has access to the methods defined on its own prototype and the Animal prototype
-fido.bark(); // "Woof!"
-fido.sayName(); // "My name is Fido"
+// 新对象可以访问在其自身原型和 Animal 原型上定义的方法
+fido.bark(); // "汪！"
+fido.sayName(); // "我的名字是 Fido"
 
-// If we try to access a method that doesn't exist on the Dog prototype or the Animal prototype, JavaScript will return undefined
+// 如果我们尝试访问 Dog 原型或 Animal 原型上不存在的方法，JavaScript 将返回 undefined
 console.log(fido.fly); // undefined
 ```
 
-4. **`Object.create()`**：此方法使用指定原型对象和属性创建一个新对象。这是设置原型继承的一种直接方法。如果您通过 `Object.create(null)` 创建一个对象，它将不会从 `Object.prototype` 继承任何属性。这意味着该对象将没有任何内置属性或方法，例如 `toString()`、`hasOwnProperty()`
+4. **`Object.create()`**: 此方法创建一个新对象，其内部 `[[Prototype]]` 直接链接到指定的原型对象。这是创建从另一个特定对象继承的对象的最直接方法，无需涉及构造函数。如果通过 `Object.create(null)` 创建一个对象，它将不会从 `Object.prototype` 继承任何属性。这意味着该对象将没有任何内置属性或方法，如 `toString()`、`hasOwnProperty()`,
 
 ```js live
 // Define a prototype object

questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json

@@ -24,7 +24,7 @@
         "5de61f04",
         "cac9a1fb",
         "1f4770e5",
-        "c2276b55"
+        "8e223077"
       ]
     },
     "targets": {
@@ -47,7 +47,7 @@
         "5de61f04",
         "cac9a1fb",
         "1f4770e5",
-        "c2276b55"
+        "8e223077"
       ]
     }
   }

questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx

@@ -96,4 +96,4 @@ fetchData((error, data) => {
 
 * [MDN Web Docs: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
 * [JavaScript.info: Callbacks](https://javascript.info/callbacks)
-* [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/)
+* [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks)

questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json

@@ -29,7 +29,7 @@
         "5248ed8e",
         "46ef02ea",
         "1f4770e5",
-        "c070c801"
+        "b60420e0"
       ]
     },
     "targets": {
@@ -57,7 +57,7 @@
         "5248ed8e",
         "46ef02ea",
         "1f4770e5",
-        "c070c801"
+        "b60420e0"
       ]
     }
   }

questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx

@@ -106,4 +106,7 @@ element.style.height = `${height + 10}px`; // Write
 
 ## 延伸阅读
 
+* [MDN Web Docs: DOM manipulation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Manipulating_the_DOM)
+* [Google Developers: Avoid large, complex layouts and layout thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)
+* [React documentation](https://react.dev/learn)
 * [MDN Web Docs: Using requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json

@@ -31,7 +31,7 @@
         "d9c2bda4",
         "b35115b8",
         "add698fb",
-        "31ad0416",
+        "962a7cae",
         "1f4770e5",
         "7787358c"
       ]
@@ -63,7 +63,7 @@
         "d9c2bda4",
         "b35115b8",
         "add698fb",
-        "31ad0416",
+        "962a7cae",
         "1f4770e5",
         "7787358c"
       ]

questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx

@@ -152,8 +152,8 @@ setTimeout(() => {
 
 ## 笔记
 
-* `AbortController` 并非 `fetch()` 专有，它也可以用于中止其他异步任务。
-* 一个单独的 `AbortContoller` 实例可以被重用或用于多个异步任务，并一次性取消所有任务。
+* `AbortController` 不仅限于 `fetch()`，它也可以用于中止其他异步任务。
+* 一个单独的 `AbortContoller` 实例可以在多个异步任务上重复使用，并一次取消所有任务。
 * 在 `AbortController` 上调用 `abort()` 不会向服务器发送任何通知或信号。服务器不知道取消操作，并将继续处理请求，直到它完成或超时。
 
 ## 延伸阅读

questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json

@@ -18,7 +18,7 @@
         "6f1c138c",
         "772c3745",
         "393b7aae",
-        "6bffb974",
+        "c238d5a7",
         "a65a6657",
         "f3ba35be",
         "fda8e360",
@@ -44,7 +44,7 @@
         "6f1c138c",
         "772c3745",
         "393b7aae",
-        "6bffb974",
+        "c238d5a7",
         "a65a6657",
         "f3ba35be",
         "fda8e360",

questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx

@@ -58,28 +58,33 @@ fetchData(); // Error fetching data: ....
 如果您有多个异步操作，则可以嵌套 `try...catch` 块以处理不同级别的错误。
 
 ```js live
-async function fetchData() {
-  try {
-    // Invalid URl
-    const response = await fetch('https://api.example.com/data');
-    const data = await response.json();
-    console.log(data);
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
+async function fetchUser() {
+  // Simulate a successful async operation
+  return { id: 1, name: 'Alice' };
 }
 
-async function processData() {
+async function fetchUserPosts() {
+  // Simulate a failed async operation
+  throw new Error('Failed to fetch posts');
+}
+
+async function loadUserData() {
   try {
-    await fetchData();
-    // Additional processing
-    console.log(arr); // Trying to reference an undefined variable will throw an error
-  } catch (error) {
-    console.error('Error processing data:', error);
+    const user = await fetchUser();
+    console.log('User:', user);
+
+    try {
+      const posts = await fetchUserPosts();
+      console.log('Posts:', posts);
+    } catch (postsError) {
+      console.error('Error fetching posts:', postsError.message);
+    }
+  } catch (userError) {
+    console.error('Error fetching user:', userError.message);
   }
 }
 
-processData();
+loadUserData();
 ```
 
 ## 使用 `.catch()` 和 Promises

questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json

@@ -29,7 +29,7 @@
         "e22beaf8",
         "750510df",
         "1f4770e5",
-        "d3c9fd72"
+        "b11b22d6"
       ]
     },
     "targets": {
@@ -56,7 +56,7 @@
         "e22beaf8",
         "750510df",
         "1f4770e5",
-        "d3c9fd72"
+        "b11b22d6"
       ]
     }
   }