Skip to content

Commit 52975b9

Browse files
committed
i18n
1 parent 51b5823 commit 52975b9

File tree

40 files changed

+260
-186
lines changed

40 files changed

+260
-186
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"a517a702",
2323
"9e538dcd",
2424
"3818abba",
25-
"47a90b06",
25+
"cd29d4cf",
2626
"10d6cb7a",
2727
"1f177e65",
2828
"d7a0aa2",
@@ -66,7 +66,7 @@
6666
"a517a702",
6767
"9e538dcd",
6868
"3818abba",
69-
"47a90b06",
69+
"cd29d4cf",
7070
"10d6cb7a",
7171
"1f177e65",
7272
"d7a0aa2",

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

+11-11
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ title: 描述 JavaScript 和浏览器的事件冒泡
88

99
事件冒泡对于事件委托至关重要,其中单个事件处理程序管理多个子元素的事件,从而提高性能和代码简洁性。虽然方便,但未能正确管理事件传播可能导致意外行为,例如多个处理程序为单个事件触发。
1010

11-
---
11+
***
1212

1313
## 什么是事件冒泡?
1414

@@ -85,7 +85,7 @@ child.click();
8585

8686
## 事件委托
8787

88-
事件冒泡是称为 [事件委托](/questions/quiz/describe-event-delegation) 的技术的基础,您将单个事件处理程序附加到多个元素的公共祖先,并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素(如项目列表)并且希望避免将单独的事件处理程序附加到每个项目时,这特别有用。
88+
事件冒泡是[事件委托](/questions/quiz/explain-event-delegation)技术的基础,您可以在多个元素的公共祖先上附加单个事件处理程序,并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素(如项目列表)并且希望避免将单独的事件处理程序附加到每个项目时,这特别有用。
8989

9090
```js
9191
parent.addEventListener('click', (event) => {
@@ -97,15 +97,15 @@ parent.addEventListener('click', (event) => {
9797

9898
## 优点
9999

100-
- **更简洁的代码:** 减少事件监听器的数量,提高代码可读性和可维护性。
101-
- **高效的事件处理:** 通过附加更少的监听器,最大限度地减少性能开销。
102-
- **灵活性:** 允许处理子元素上发生的事件,而无需直接将监听器附加到它们。
100+
* **更简洁的代码:** 减少事件监听器的数量,提高代码可读性和可维护性。
101+
* **高效的事件处理:** 通过附加更少的监听器,最大限度地减少性能开销。
102+
* **灵活性:** 允许处理子元素上发生的事件,而无需直接将监听器附加到它们。
103103

104104
## 陷阱
105105

106-
- **意外的事件处理:** 请注意,父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
107-
- **事件顺序:** 事件以特定顺序冒泡。如果多个父元素有事件监听器,它们的执行顺序取决于 DOM 层次结构。
108-
- **过度委托:** 虽然将事件委托给公共祖先是有效的,但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
106+
* **意外的事件处理:** 请注意,父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
107+
* **事件顺序:** 事件以特定顺序冒泡。如果多个父元素有事件监听器,它们的执行顺序取决于 DOM 层次结构。
108+
* **过度委托:** 虽然将事件委托给公共祖先是有效的,但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
109109

110110
## 用例
111111

@@ -217,6 +217,6 @@ function handleAccordionClick(event) {
217217

218218
## 延伸阅读
219219

220-
- [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
221-
- [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
222-
- [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
220+
* [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
221+
* [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
222+
* [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

+4-4
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"d97425a1",
3131
"b5905a85",
3232
"4688282c",
33-
"1c737627",
33+
"5afea3bd",
3434
"68b07c90",
3535
"cd5dd65b",
3636
"b8ab38ac",
@@ -39,7 +39,7 @@
3939
"2670c799",
4040
"c7a88171",
4141
"1f4770e5",
42-
"fb9ea696"
42+
"b4e3453b"
4343
]
4444
},
4545
"targets": {
@@ -68,7 +68,7 @@
6868
"d97425a1",
6969
"b5905a85",
7070
"4688282c",
71-
"1c737627",
71+
"5afea3bd",
7272
"68b07c90",
7373
"cd5dd65b",
7474
"b8ab38ac",
@@ -77,7 +77,7 @@
7777
"2670c799",
7878
"c7a88171",
7979
"1f4770e5",
80-
"fb9ea696"
80+
"b4e3453b"
8181
]
8282
}
8383
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ userForm.addEventListener('input', (event) => {
108108
});
109109
```
110110

111-
在此示例中,单个 input 事件侦听器附加到表单元素。 它可以响应所有子输入元素的输入更改,从而简化代码,每个 `<input>` 元素使用一个事件侦听器
111+
在这个例子中,单个输入事件监听器附加到表单元素。它可以响应所有子输入元素的输入更改,通过消除对每个`<input>`元素上单独监听器的需求来简化代码
112112

113113
## 陷阱
114114

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"b9a03b4e",
4949
"c314f8b",
5050
"1f4770e5",
51-
"276e19b3"
51+
"8d801c81"
5252
]
5353
},
5454
"targets": {
@@ -95,7 +95,7 @@
9595
"b9a03b4e",
9696
"c314f8b",
9797
"1f4770e5",
98-
"276e19b3"
98+
"8d801c81"
9999
]
100100
}
101101
}

questions/explain-hoisting/zh-CN.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -139,5 +139,5 @@ ESLint 是一个静态代码分析器,可以发现违反此类情况,使用
139139

140140
## 延伸阅读
141141

142-
* [Hoisting | MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting)
143-
* [JavaScript Visualized: Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h)
142+
* [Hoisting | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
143+
* [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

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
"be2d34c4",
2222
"b52ddf94",
2323
"1dc60677",
24-
"11a400e1",
25-
"3d40f5c3",
24+
"6b3b6f34",
25+
"92a0271d",
2626
"3b5a819f",
2727
"dae7e089",
2828
"2b6d6fd1"
@@ -45,8 +45,8 @@
4545
"be2d34c4",
4646
"b52ddf94",
4747
"1dc60677",
48-
"11a400e1",
49-
"3d40f5c3",
48+
"6b3b6f34",
49+
"92a0271d",
5050
"3b5a819f",
5151
"dae7e089",
5252
"2b6d6fd1"

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

+16-16
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ bolt.bark(); // "Woof!"
4747

4848
需要注意的是:
4949

50-
* `.makeSound` 未在 `Dog` 上定义,因此 JavaScript 引擎会向上查找原型链,并在继承的 `Animal` 上找到 `.makeSound`
51-
* 不再推荐使用 `Object.create()` 来构建继承链。请改用 `Object.setPrototypeOf()`
50+
* `.makeSound` 未在 `Dog` 上定义,因此 JavaScript 引擎会向上查找原型链,并在继承的 `Animal` 上找到 `.makeSound`
51+
* 不再推荐使用 `Object.create()` 来构建继承链。请改用 `Object.setPrototypeOf()`
5252

5353
***
5454

@@ -105,42 +105,42 @@ console.log(john.sayHello); // undefined
105105
3. **构造函数**:JavaScript 提供了构造函数来创建对象。当一个函数与 new 关键字一起用作构造函数时,新对象的原型 (`[[Prototype]]`) 将设置为构造函数 的原型属性。
106106

107107
```js live
108-
// Define a constructor function
108+
// 定义一个构造函数
109109
function Animal(name) {
110110
this.name = name;
111111
}
112112

113-
// Add a method to the prototype
113+
// 将一个方法添加到原型上
114114
Animal.prototype.sayName = function () {
115-
console.log(`My name is ${this.name}`);
115+
console.log(`我的名字是 ${this.name}`);
116116
};
117117

118-
// Define a new constructor function
118+
// 定义一个新的构造函数
119119
function Dog(name, breed) {
120120
Animal.call(this, name);
121121
this.breed = breed;
122122
}
123123

124-
// Set the prototype of Dog to be a new instance of Animal
125-
Dog.prototype = Object.create(Animal.prototype);
124+
// 设置 Dog 的原型以继承自 Animal 的原型
125+
Object.setPrototypeOf(Dog.prototype, Animal.prototype);
126126

127-
// Add a method to the Dog prototype
127+
// 将一个方法添加到 Dog 的原型上
128128
Dog.prototype.bark = function () {
129-
console.log('Woof!');
129+
console.log('汪!');
130130
};
131131

132-
// Create a new object using the Dog constructor function
132+
// 使用 Dog 构造函数创建一个新对象
133133
let fido = new Dog('Fido', 'Labrador');
134134

135-
// The new object has access to the methods defined on its own prototype and the Animal prototype
136-
fido.bark(); // "Woof!"
137-
fido.sayName(); // "My name is Fido"
135+
// 新对象可以访问在其自身原型和 Animal 原型上定义的方法
136+
fido.bark(); // "汪!"
137+
fido.sayName(); // "我的名字是 Fido"
138138

139-
// If we try to access a method that doesn't exist on the Dog prototype or the Animal prototype, JavaScript will return undefined
139+
// 如果我们尝试访问 Dog 原型或 Animal 原型上不存在的方法,JavaScript 将返回 undefined
140140
console.log(fido.fly); // undefined
141141
```
142142

143-
4. **`Object.create()`**:此方法使用指定原型对象和属性创建一个新对象。这是设置原型继承的一种直接方法。如果您通过 `Object.create(null)` 创建一个对象,它将不会从 `Object.prototype` 继承任何属性。这意味着该对象将没有任何内置属性或方法,例如 `toString()``hasOwnProperty()`
143+
4. **`Object.create()`**: 此方法创建一个新对象,其内部 `[[Prototype]]` 直接链接到指定的原型对象。这是创建从另一个特定对象继承的对象的最直接方法,无需涉及构造函数。如果通过 `Object.create(null)` 创建一个对象,它将不会从 `Object.prototype` 继承任何属性。这意味着该对象将没有任何内置属性或方法, `toString()``hasOwnProperty()`,
144144

145145
```js live
146146
// Define a prototype object

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"5de61f04",
2525
"cac9a1fb",
2626
"1f4770e5",
27-
"c2276b55"
27+
"8e223077"
2828
]
2929
},
3030
"targets": {
@@ -47,7 +47,7 @@
4747
"5de61f04",
4848
"cac9a1fb",
4949
"1f4770e5",
50-
"c2276b55"
50+
"8e223077"
5151
]
5252
}
5353
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,4 @@ fetchData((error, data) => {
9696

9797
* [MDN Web Docs: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
9898
* [JavaScript.info: Callbacks](https://javascript.info/callbacks)
99-
* [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/)
99+
* [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

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"5248ed8e",
3030
"46ef02ea",
3131
"1f4770e5",
32-
"c070c801"
32+
"b60420e0"
3333
]
3434
},
3535
"targets": {
@@ -57,7 +57,7 @@
5757
"5248ed8e",
5858
"46ef02ea",
5959
"1f4770e5",
60-
"c070c801"
60+
"b60420e0"
6161
]
6262
}
6363
}

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

+3
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,7 @@ element.style.height = `${height + 10}px`; // Write
106106

107107
## 延伸阅读
108108

109+
* [MDN Web Docs: DOM manipulation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Manipulating_the_DOM)
110+
* [Google Developers: Avoid large, complex layouts and layout thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)
111+
* [React documentation](https://react.dev/learn)
109112
* [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

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"d9c2bda4",
3232
"b35115b8",
3333
"add698fb",
34-
"31ad0416",
34+
"962a7cae",
3535
"1f4770e5",
3636
"7787358c"
3737
]
@@ -63,7 +63,7 @@
6363
"d9c2bda4",
6464
"b35115b8",
6565
"add698fb",
66-
"31ad0416",
66+
"962a7cae",
6767
"1f4770e5",
6868
"7787358c"
6969
]

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,8 @@ setTimeout(() => {
152152

153153
## 笔记
154154

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

159159
## 延伸阅读

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"6f1c138c",
1919
"772c3745",
2020
"393b7aae",
21-
"6bffb974",
21+
"c238d5a7",
2222
"a65a6657",
2323
"f3ba35be",
2424
"fda8e360",
@@ -44,7 +44,7 @@
4444
"6f1c138c",
4545
"772c3745",
4646
"393b7aae",
47-
"6bffb974",
47+
"c238d5a7",
4848
"a65a6657",
4949
"f3ba35be",
5050
"fda8e360",

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

+21-16
Original file line numberDiff line numberDiff line change
@@ -58,28 +58,33 @@ fetchData(); // Error fetching data: ....
5858
如果您有多个异步操作,则可以嵌套 `try...catch` 块以处理不同级别的错误。
5959

6060
```js live
61-
async function fetchData() {
62-
try {
63-
// Invalid URl
64-
const response = await fetch('https://api.example.com/data');
65-
const data = await response.json();
66-
console.log(data);
67-
} catch (error) {
68-
console.error('Error fetching data:', error);
69-
}
61+
async function fetchUser() {
62+
// Simulate a successful async operation
63+
return { id: 1, name: 'Alice' };
7064
}
7165

72-
async function processData() {
66+
async function fetchUserPosts() {
67+
// Simulate a failed async operation
68+
throw new Error('Failed to fetch posts');
69+
}
70+
71+
async function loadUserData() {
7372
try {
74-
await fetchData();
75-
// Additional processing
76-
console.log(arr); // Trying to reference an undefined variable will throw an error
77-
} catch (error) {
78-
console.error('Error processing data:', error);
73+
const user = await fetchUser();
74+
console.log('User:', user);
75+
76+
try {
77+
const posts = await fetchUserPosts();
78+
console.log('Posts:', posts);
79+
} catch (postsError) {
80+
console.error('Error fetching posts:', postsError.message);
81+
}
82+
} catch (userError) {
83+
console.error('Error fetching user:', userError.message);
7984
}
8085
}
8186

82-
processData();
87+
loadUserData();
8388
```
8489

8590
## 使用 `.catch()` 和 Promises

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"e22beaf8",
3030
"750510df",
3131
"1f4770e5",
32-
"d3c9fd72"
32+
"b11b22d6"
3333
]
3434
},
3535
"targets": {
@@ -56,7 +56,7 @@
5656
"e22beaf8",
5757
"750510df",
5858
"1f4770e5",
59-
"d3c9fd72"
59+
"b11b22d6"
6060
]
6161
}
6262
}

0 commit comments

Comments
 (0)