Skip to content

Commit bc0920d

Browse files
authored
Merge pull request #188 from yatoogamii/Proxy-and-Reflect
Proxy and Reflect
2 parents 65025fd + ceee719 commit bc0920d

File tree

6 files changed

+321
-321
lines changed

6 files changed

+321
-321
lines changed

1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
# Error on reading non-existant property
1+
# Erreur lors de la lecture d'une propriété inexistante
22

3-
Usually, an attempt to read a non-existant property returns `undefined`.
3+
Habituellement, une tentative de lecture d'une propriété inexistante renvoie `undefined`.
44

5-
Create a proxy that throws an error for an attempt to read of a non-existant property instead.
5+
Créez à la place un proxy qui génère une erreur pour une tentative de lecture d'une propriété inexistante.
66

7-
That can help to detect programming mistakes early.
7+
Cela peut aider à détecter précocement les erreurs de programmation.
88

9-
Write a function `wrap(target)` that takes an object `target` and return a proxy that adds this functionality aspect.
9+
Écrivez une fonction `wrap(target)` qui prend un objet `target` et retourne un proxy qui ajoute cet aspect fonctionnel.
1010

11-
That's how it should work:
11+
Voilà comment cela devrait fonctionner:
1212

1313
```js
1414
let user = {
@@ -27,6 +27,6 @@ user = wrap(user);
2727

2828
alert(user.name); // John
2929
*!*
30-
alert(user.age); // ReferenceError: Property doesn't exist "age"
30+
alert(user.age); // ReferenceError: la propriété n'existe pas "age"
3131
*/!*
3232
```

1-js/99-js-misc/01-proxy/02-array-negative/solution.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ let array = [1, 2, 3];
55
array = new Proxy(array, {
66
get(target, prop, receiver) {
77
if (prop < 0) {
8-
// even if we access it like arr[1]
9-
// prop is a string, so need to convert it to number
8+
// même si on y accède comme arr[1]
9+
// prop est une chaîne, il faut donc la convertir en nombre
1010
prop = +prop + target.length;
1111
}
1212
return Reflect.get(target, prop, receiver);
Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11

2-
# Accessing array[-1]
2+
# Accès au tableau [-1]
33

4-
In some programming languages, we can access array elements using negative indexes, counted from the end.
4+
Dans certains langages de programmation, nous pouvons accéder aux éléments du tableau à l'aide d'index négatifs, comptés à partir de la fin.
55

6-
Like this:
6+
comme ça:
77

88
```js
99
let array = [1, 2, 3];
1010

11-
array[-1]; // 3, the last element
12-
array[-2]; // 2, one step from the end
13-
array[-3]; // 1, two steps from the end
11+
array[-1]; // 3, le premier élément en partant de la fin
12+
array[-2]; // 2, le second élément en partant de la fin
13+
array[-3]; // 1, le troisième élément en partant de la fin
1414
```
1515

16-
In other words, `array[-N]` is the same as `array[array.length - N]`.
16+
En d'autres termes, `array[-N]` est identique à `array[array.length - N]`.
1717

18-
Create a proxy to implement that behavior.
18+
Créez un proxy pour implémenter ce comportement.
1919

20-
That's how it should work:
20+
Voilà comment cela devrait fonctionner:
2121

2222
```js
2323
let array = [1, 2, 3];
@@ -29,5 +29,5 @@ array = new Proxy(array, {
2929
alert( array[-1] ); // 3
3030
alert( array[-2] ); // 2
3131

32-
// Other array functionality should be kept "as is"
32+
// Les autres fonctionnalités de array doivent être conservées
3333
```

1-js/99-js-misc/01-proxy/03-observable/solution.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
The solution consists of two parts:
1+
La solution se compose de deux parties:
22

3-
1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store handlers right in the object, using our symbol as the property key.
4-
2. We need a proxy with `set` trap to call handlers in case of any change.
3+
1. Chaque fois que `.observe(handler)` est appelé, nous devons nous souvenir du handler quelque part, pour pouvoir l'appeler plus tard. Nous pouvons stocker des handler directement dans l'objet, en utilisant notre symbole comme clé de propriété
4+
2. Nous avons besoin d'un proxy avec le piège `set` pour appeler les handler en cas de changement
55

66
```js run
77
let handlers = Symbol('handlers');
88

99
function makeObservable(target) {
10-
// 1. Initialize handlers store
10+
// 1. initialiser le stockage de l'handler
1111
target[handlers] = [];
1212

13-
// Store the handler function in array for future calls
13+
// Stocker la fonction de l'handler dans un tableau pour les appels futurs
1414
target.observe = function(handler) {
1515
this[handlers].push(handler);
1616
};
1717

18-
// 2. Create a proxy to handle changes
18+
// 2. Créer un proxy pour gérer les modifications
1919
return new Proxy(target, {
2020
set(target, property, value, receiver) {
21-
let success = Reflect.set(...arguments); // forward the operation to object
22-
if (success) { // if there were no error while setting the property
23-
// call all handlers
21+
let success = Reflect.set(...arguments); // transmettre l'opération à l'objet
22+
if (success) { // s'il n'y a pas eu d'erreur lors de la définition de la propriété
23+
// appeler tous les handler
2424
target[handlers].forEach(handler => handler(property, value));
2525
}
2626
return success;

1-js/99-js-misc/01-proxy/03-observable/task.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22
# Observable
33

4-
Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy.
4+
Créez une fonction `makeObservable(target)` qui "rend l'objet observable" en renvoyant un proxy.
55

6-
Here's how it should work:
6+
Voici comment cela devrait fonctionner:
77

88
```js run
99
function makeObservable(target) {
@@ -20,8 +20,8 @@ user.observe((key, value) => {
2020
user.name = "John"; // alerts: SET name=John
2121
```
2222

23-
In other words, an object returned by `makeObservable` is just like the original one, but also has the method `observe(handler)` that sets `handler` function to be called on any property change.
23+
En d'autres termes, un objet retourné par `makeObservable` est exactement comme celui d'origine, mais possède également la méthode `observe(handler)` qui définit la fonction de `handler` à appeler lors de tout changement de propriété.
2424

25-
Whenever a property changes, `handler(key, value)` is called with the name and value of the property.
25+
Chaque fois qu'une propriété change, le `handler(key, value)` est appelé avec le nom et la valeur de la propriété.
2626

27-
P.S. In this task, please only take care about writing to a property. Other operations can be implemented in a similar way.
27+
P.S. Dans cette tâche, veillez uniquement à écrire sur une propriété. D'autres opérations peuvent être implémentées de manière similaire.

0 commit comments

Comments
 (0)