From 6f24e2482a0490f496a9e7da86269c004dd43baf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Wed, 21 Jul 2021 00:33:40 +0100 Subject: [PATCH 001/138] add portuguese translations for 09-call-apply-decorators --- .../01-spy-decorator/solution.md | 2 +- .../01-spy-decorator/task.md | 12 +- .../02-delay/solution.md | 16 +- .../09-call-apply-decorators/02-delay/task.md | 16 +- .../03-debounce/solution.md | 3 +- .../03-debounce/task.md | 35 +-- .../04-throttle/solution.md | 10 +- .../04-throttle/task.md | 52 ++-- .../09-call-apply-decorators/article.md | 253 +++++++++--------- 9 files changed, 197 insertions(+), 202 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md index 0c8a211b4..05aed9316 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md @@ -1 +1 @@ -The wrapper returned by `spy(f)` should store all arguments and then use `f.apply` to forward the call. +O encapsulador retornado pelo `spy(f)` deve guardar todos argumentos e então usar `f.apply` para encaminhar a chamada. \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md index a3843107c..d2764ae6d 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Spy decorator +# Decorador Spy (espião) -Create a decorator `spy(func)` that should return a wrapper that saves all calls to function in its `calls` property. +Criar um decorador `spy(func)` que deve retornar um encapsulador que guarda todas chamadas de uma função em sua propriedade `calls`. -Every call is saved as an array of arguments. +Todas chamadas são guardadas como um array de argumentos. -For instance: +Por exemplo: ```js function work(a, b) { - alert( a + b ); // work is an arbitrary function or method + alert( a + b ); // work é uma função ou método arbitrário } *!* @@ -27,4 +27,4 @@ for (let args of work.calls) { } ``` -P.S. That decorator is sometimes useful for unit-testing. Its advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library. +P.S. Que o decorador é algumas vezes útil para teste unitário. Sua forma avançada é `sinon.spy` na biblioteca [Sinon.JS](http://sinonjs.org). \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index 24bb4d448..1512aba09 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -1,4 +1,4 @@ -The solution: +A solução: ```js run demo function delay(f, ms) { @@ -11,24 +11,24 @@ function delay(f, ms) { let f1000 = delay(alert, 1000); -f1000("test"); // shows "test" after 1000ms +f1000("test"); // imprima "test" depois 1000ms ``` -Please note how an arrow function is used here. As we know, arrow functions do not have own `this` and `arguments`, so `f.apply(this, arguments)` takes `this` and `arguments` from the wrapper. +Por favor note como uma função em seta (arrow function) é usada aqui. Tal como sabemos, funções em setas não tem seu próprio `this` e `arguments`, então `f.apply(this, arguments)` recebem `this` e `arguments` a partir de um encapsulador. -If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (assuming we're in the browser). +Se passassemos uma função normal, `setTimeout` a chamaria sem argumentos e `this=window` (assumindo que estamos no browser). -We still can pass the right `this` by using an intermediate variable, but that's a little bit more cumbersome: +Ainda podemos passar o `this` certo atráves do uso de uma variável intermediador, porém é um pouco mais difícil: ```js function delay(f, ms) { return function(...args) { - let savedThis = this; // store this into an intermediate variable + let savedThis = this; // guarde isto dentro de uma variável intermediador setTimeout(function() { - f.apply(savedThis, args); // use it here + f.apply(savedThis, args); // use-o aqui }, ms); }; } -``` +``` \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md index c04c68d7e..6716c2f20 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md @@ -2,25 +2,25 @@ importance: 5 --- -# Delaying decorator +# Atrasando o decorador -Create a decorator `delay(f, ms)` that delays each call of `f` by `ms` milliseconds. +Criar um decorador `delay(f, ms)` que atrasa cada chamada de `f` por `ms` milissegundos. -For instance: +Por exemplo: ```js function f(x) { alert(x); } -// create wrappers +// cria encapsuladores let f1000 = delay(f, 1000); let f1500 = delay(f, 1500); -f1000("test"); // shows "test" after 1000ms -f1500("test"); // shows "test" after 1500ms +f1000("test"); // imprima "test" depois 1000ms +f1500("test"); // imprima "test" depois 1500ms ``` -In other words, `delay(f, ms)` returns a "delayed by `ms`" variant of `f`. +Em outras palavras, `delay(f, ms)` retorna uma variante de `f` "atrasada em `ms`". -In the code above, `f` is a function of a single argument, but your solution should pass all arguments and the context `this`. +No código acima, `f` é uma função de um único argumento, porém sua solução deve passar todos argumentos e o contexto `this`. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md index 83e75f315..3e01c0e57 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md @@ -9,5 +9,4 @@ function debounce(func, ms) { ``` -A call to `debounce` returns a wrapper. When called, it schedules the original function call after given `ms` and cancels the previous such timeout. - +Uma chamada para `debounce` retorna um encapsulador. Quando chamado, ela agenda a função original chama depois de receber `ms` e cancela o tempo limite anterior. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 5b0fcc5f8..9ba439312 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -2,21 +2,21 @@ importance: 5 --- -# Debounce decorator +# O Decorador Debounce -The result of `debounce(f, ms)` decorator is a wrapper that suspends calls to `f` until there's `ms` milliseconds of inactivity (no calls, "cooldown period"), then invokes `f` once with the latest arguments. +O resultado do decorador `debounce(f, ms)` é um encapsulador que suspende chamadas para `f` até haver `ms` milissegundos de inactividade (sem chamadas, "período de espera"), depois invoca `f` uma vez com os últimos argumentos. -In other words, `debounce` is like a secretary that accepts "phone calls", and waits until there's `ms` milliseconds of being quiet. And only then it transfers the latest call information to "the boss" (calls the actual `f`). +Em outras palavras, `debounce` é como uma secretária que aceita "chamadas de telefones", e espera até existir `ms` milissegundos de espera. E somente então transferir as últimas informações de chamadas para "o chefe" (chama a `f` atual). -For instance, we had a function `f` and replaced it with `f = debounce(f, 1000)`. +Por exemplo, tinhamos uma função `f` e a substituimos com `f = debounce(f, 1000)`. -Then if the wrapped function is called at 0ms, 200ms and 500ms, and then there are no calls, then the actual `f` will be only called once, at 1500ms. That is: after the cooldown period of 1000ms from the last call. +Então se a função encapsulada é chamada aos 0ms, 200ms, e 500ms, e depois não houver chamadas, a `f` atual será somente chamada uma vez, aos 1500ms. Ou seja: depois do período de espera de 1000ms da última chamada. ![](debounce.svg) -...And it will get the arguments of the very last call, other calls are ignored. +...E receberão os argumentos de toda última chamada, outras chamadas são ignorada. -Here's the code for it (uses the debounce decorator from the [Lodash library](https://lodash.com/docs/4.17.15#debounce)): +Aqui estão o código para isto (que usa o decorador debounce da [biblioteca Lodash](https://lodash.com/docs/4.17.15#debounce)): ```js let f = _.debounce(alert, 1000); @@ -24,28 +24,29 @@ let f = _.debounce(alert, 1000); f("a"); setTimeout( () => f("b"), 200); setTimeout( () => f("c"), 500); -// debounced function waits 1000ms after the last call and then runs: alert("c") +// função tratada pelo debounce espera 1000ms depois da última chamada e depois executa: alert("*") ``` -Now a practical example. Let's say, the user types something, and we'd like to send a request to the server when the input is finished. +Agora um exemplo prático. Vamos dizer, que usuário digite alguma coisa, e gostariamos enviar uma requisição para o servidor quando a entrada estiver terminda. -There's no point in sending the request for every character typed. Instead we'd like to wait, and then process the whole result. -In a web-browser, we can setup an event handler -- a function that's called on every change of an input field. Normally, an event handler is called very often, for every typed key. But if we `debounce` it by 1000ms, then it will be only called once, after 1000ms after the last input. +Não adianta enviar uma requesição para character digitado. Ao invés disso gostariamos de esperar, e depois processar todo resultado. + +Em um web-browser, nós podemos configurar um manipulador de evento -- uma função que é chamada em todas mundanças no campo de entrada. Normalmente, um manipulador de evento é chamado sempre, para toda tecla pressionada. Porém se nós `debounce` ela por 1000ms, logo ela será chamanda apenas uma vez, depois 1000ms depois da última entrada. ```online -In this live example, the handler puts the result into a box below, try it: +Neste exemplo funcionando, o manipulador coloca o resultado dentro da caixa abaixo, experimente: [iframe border=1 src="debounce" height=200] -See? The second input calls the debounced function, so its content is processed after 1000ms from the last input. +Vês? A segunda entrada chama a função na qual foi aplicada o debounce, então o seu conteúdo será processado depois de 1000ms da última entrada. ``` -So, `debounce` is a great way to process a sequence of events: be it a sequence of key presses, mouse movements or something else. +Portanto, `debounce` é excelente maneira de processar uma sequência de eventos: seja ela uma sequência de pressões de teclas, movimentos de mouse ou alguma coisa do genero. -It waits the given time after the last call, and then runs its function, that can process the result. +Isto espera o tempo dado depois da última chamada, e depois executa sua função, que pode processar o resultado. -The task is to implement `debounce` decorator. +A tarefa está em implementar o decorador `debounce`. -Hint: that's just a few lines if you think about it :) +Dica: são apenas uma poucas linhas se você pensar sobre ela :) \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 6950664be..2448a6c52 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -29,10 +29,10 @@ function throttle(func, ms) { } ``` -A call to `throttle(func, ms)` returns `wrapper`. +Uma chamada para `throttle(func, ms` retorna `wrapper`. -1. During the first call, the `wrapper` just runs `func` and sets the cooldown state (`isThrottled = true`). -2. In this state all calls are memorized in `savedArgs/savedThis`. Please note that both the context and the arguments are equally important and should be memorized. We need them simultaneously to reproduce the call. -3. After `ms` milliseconds pass, `setTimeout` triggers. The cooldown state is removed (`isThrottled = false`) and, if we had ignored calls, `wrapper` is executed with the last memorized arguments and context. +1. Durante a primeira chamada, o `wrapper` apenas executa a `func` e configura o estado de espera (`isThrottled = true`). +2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos o contexto e os argumentos são igualmente importante e devem ser memorizado. Nós precisamos deles simultaneamente reproduzir a chamada. +3. Depois `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivemos ignorado as chamadas, `wrapper` é executado com os últimos argumentos e contexto memorizados. -The 3rd step runs not `func`, but `wrapper`, because we not only need to execute `func`, but once again enter the cooldown state and setup the timeout to reset it. +O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos executar o `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reconfigurá-lo. \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 43136dcb5..aa9555c66 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -2,52 +2,52 @@ importance: 5 --- -# Throttle decorator +# O Decorador Throttle -Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper. +Crie um decorador de "throttling" `throttle(f, ms)` -- que retorna um encapsulador. -When it's called multiple times, it passes the call to `f` at maximum once per `ms` milliseconds. +Quando é chamada várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. -The difference with debounce is that it's completely different decorator: -- `debounce` runs the function once after the "cooldown" period. Good for processing the final result. -- `throttle` runs it not more often than given `ms` time. Good for regular updates that shouldn't be very often. +A diferença com debounce é que é um decorador completamente diferente: +- `debounce` executa a função uma vez depois do período de "espera". Boa para o processamento final do resultado. +- `throttle` executa-o não mais frequentemente do que no tempo `ms` determinado. -In other words, `throttle` is like a secretary that accepts phone calls, but bothers the boss (calls the actual `f`) not more often than once per `ms` milliseconds. +Em outras palavras, `throttle` é como uma secretária que aceita chamadas de telefone, mas incomonda o chefe (chama `f` atual) não mais do que uma vez por`ms` milissegundos. -Let's check the real-life application to better understand that requirement and to see where it comes from. +Vamos verificar a aplicação na vida real para melhor entender esse requesito e ver de onde ela vem. -**For instance, we want to track mouse movements.** +**Por exemplo, queremos rastrear os movimentos do mouse** -In a browser we can setup a function to run at every mouse movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms). -**We'd like to update some information on the web-page when the pointer moves.** +Em um browser nós podemos configurar uma função para executar em todo movimento do mouse e receber a localização do ponteiro conforme ele se move. Durante o uso constante do mouse, esta função geralmente é executada com muita frequência, pode ser algo como 100 vezes por segundo (a cada 10 ms). +**Gostariamos de atualizar algumas informações na página web sempre que o ponteiro se mover.** -Updating function `update()` is too heavy to do it on every micro-movement. There is also no sense in making it more often than once per 100ms. +A atualização da função `update()` é uma tarefa muito pesada de se fazer em todo micro-movimento. Também não há sentido em fazer isso mais do que uma vez por 100ms. -So we'll assign `throttle(update, 100)` as the function to run on each mouse move instead of the original `update()`. The decorator will be called often, but `update()` will be called at maximum once per 100ms. +Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executar em cada movimento de mouse ao invés do `update()` original. O decorador será chamada sempre, porém o `update()` será chamado no máximo uma vez por 100ms. -Visually, it will look like this: +Visualmente, ela parecerá com algo como isso: -1. For the first mouse movement the decorated variant passes the call to `update`. That's important, the user sees our reaction to their move immediately. -2. Then as the mouse moves on, until `100ms` nothing happens. The decorated variant ignores calls. -3. At the end of `100ms` -- one more `update` happens with the last coordinates. -4. Then, finally, the mouse stops somewhere. The decorated variant waits until `100ms` expire and then runs `update` with last coordinates. So, perhaps the most important, the final mouse coordinates are processed. +1. Para o primeiro movimento do mouse a variante decorada passa a chamada para `update`. É importante, os usuários verem nossa reação aos seus movimentos imediatamente. +2. Assim ao mover o mouse, até `100ms` nada acontece. A variante decorada é ignora chamadas. +3. Ao final de `100ms` -- mais um `update` acontece com as últimas coordenadas. +4. Assim, finalmente, o mouse para em algum lugar. A variante decorada espera até `100ms` expirar e depois executa o `update` com as últimas coordinadas. Então, talvez o mais importante, a coordenadas finais do mouse são processadas. -A code example: +Um código de exemplo: ```js function f(a) { console.log(a); } -// f1000 passes calls to f at maximum once per 1000 ms +// f1000 passa a chamada para f no máximo uma vez por 1000ms let f1000 = throttle(f, 1000); -f1000(1); // shows 1 -f1000(2); // (throttling, 1000ms not out yet) -f1000(3); // (throttling, 1000ms not out yet) +f1000(1); // exibi 1 +f1000(2); // (throttling, 1000ms ainda não saiu) +f1000(3); // (throttling, 1000ms ainda não saiu) -// when 1000 ms time out... -// ...outputs 3, intermediate value 2 was ignored +// quando o tempo de 1000ms estiver esgotado... +// ...exibi 3, o valor intermediário 2 foi ignorado ``` -P.S. Arguments and the context `this` passed to `f1000` should be passed to the original `f`. +P.S. Os argumentos e o contexto `this` passados para `f1000` devem ser passados para a função original `f`. \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 12f4e654b..db12f41bd 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -1,20 +1,20 @@ -# Decorators and forwarding, call/apply +# Decoradores e Repassamento, call/apply -JavaScript gives exceptional flexibility when dealing with functions. They can be passed around, used as objects, and now we'll see how to *forward* calls between them and *decorate* them. +JavaScript oferece uma flexibilidade excepcional ao lidar com funções. Elas podem ser repassadas, usadas como objetos, e agora iremos ver como *repassar* suas chamas entre elas e *decorá-las*. -## Transparent caching +## Cache Transparente -Let's say we have a function `slow(x)` which is CPU-heavy, but its results are stable. In other words, for the same `x` it always returns the same result. +Digamos que temos uma função `slow(x)` que usa muita CPU, mas seus resultados estáveis. Em outras palavras para o mesmo `x` ele sempre retorna o resultado. -If the function is called often, we may want to cache (remember) the results for different `x` to avoid spending extra-time on recalculations. +Se a função for chamada várias vezes, nós podemos requer armazenar em cache (lembrar) os resultados para diferentes `x` para evitar gastar tempo extra em recalculações. -But instead of adding that functionality into `slow()` we'll create a wrapper. As we'll see, there are many benefits of doing so. +Mas ao invés de adicionar essa funcionalidade dentro de `slow()`, criaremos um encapsulador. Como veremos existem muitos benefícios em proceder deste modo. -Here's the code, and explanations follow: +Abaixo está o código de exemplo, e a seguir a sua explicação: ```js run function slow(x) { - // there can be a heavy CPU-intensive job here + // pode exigir um trabalho intensivo por parte da CPU alert(`Called with ${x}`); return x; } @@ -23,67 +23,67 @@ function cachingDecorator(func) { let cache = new Map(); return function(x) { - if (cache.has(x)) { // if the result is in the map - return cache.get(x); // return it + if (cache.has(x)) { // se o resultado estiver dentro do mapa + return cache.get(x); // retorne-o } - let result = func(x); // otherwise call func + let result = func(x); // caso não estiver, chame a func - cache.set(x, result); // and cache (remember) the result + cache.set(x, result); // e faz cache (lembrar) do resultado return result; }; } slow = cachingDecorator(slow); -alert( slow(1) ); // slow(1) is cached and the result returned -alert( "Again: " + slow(1) ); // slow(1) result returned from cache +alert( slow(1) ); // slow(1) é cacheada e o resultado retornado +alert( "Again: " + slow(1) ); // slow(1) resultado retornado do cache -alert( slow(2) ); // slow(2) is cached and the result returned -alert( "Again: " + slow(2) ); // slow(2) result returned from cache +alert( slow(2) ); // slow(2) é cacheada e o resultado retornado +alert( "Again: " + slow(2) ); // slow(2) resultado retornado do cache ``` -In the code above `cachingDecorator` is a *decorator*: a special function that takes another function and alters its behavior. +No código acima `cachingDecorator` é um *decorador*: uma função especial que recebe outra função e altera seu comportamento. -The idea is that we can call `cachingDecorator` for any function, and it will return the caching wrapper. That's great, because we can have many functions that could use such a feature, and all we need to do is to apply `cachingDecorator` to them. +A ideia é que podemos chamar `cachingDecorator` para qualquer função, e ele retornará um encapsulador do cache. É ótimo, porque podemos ter muitas funções que poderiam usar essa funcionalidade, e tudo o que precisamos fazer é aplicar `cachingDecorator` a elas. -By separating caching from the main function code we also keep the main code simpler. +Ao separar o cache do código principal da função, também mantemos o código principal símples. -Now let's get into details of how it works. +Agora vamos entrar em detalhes de como ela funciona. -The result of `cachingDecorator(func)` is a "wrapper": `function(x)` that "wraps" the call of `func(x)` into caching logic: +O resultado do `cachingDecorator(func)` é um "encapsulador": `function(x)` que "envolve" a chamada de `func(x)` dentro da lógica do cache: ![](decorator-makecaching-wrapper.svg) -As we can see, the wrapper returns the result of `func(x)` "as is". From an outside code, the wrapped `slow` function still does the same. It just got a caching aspect added to its behavior. +Como podemos ver, o encapsulador retorna o resultado da `func(x)` "como é". A partir de um código de fora, a função `slow` encapsulada ainda faz o mesmo. Ela apenas teve o aspecto de cache adicionado ao seu comportamento. -To summarize, there are several benefits of using a separate `cachingDecorator` instead of altering the code of `slow` itself: +Resumindo, existem outros benefícios de se usar um `cacheDecorator` separado ao invés de alterar o código do próprio `slow`: -- The `cachingDecorator` is reusable. We can apply it to another function. -- The caching logic is separate, it did not increase the complexity of `slow` itself (if there was any). -- We can combine multiple decorators if needed (other decorators will follow). +- O `cacheDecorator` é reusável. Nós podemos aplicar-lo em outras funções. +- A lógica de cache está separada, ela não adicionou a complexidade do `slow` (se havia alguma). +- Nós podemos combinar vários decoradores se for necessário (outros decoradores irão seguir). -## Using "func.call" for the context +## Usando "func.call" para o contexto -The caching decorator mentioned above is not suited to work with object methods. +O decorador de cache mencionado acima é adequado para trabalhar com os métodos de objeto. -For instance, in the code below `worker.slow()` stops working after the decoration: +Por exemplo, no código abaixo `worker.slow()` para funcionar após a decoração: ```js run -// we'll make worker.slow caching +// vamos fazer o cache do worker.slow let worker = { someMethod() { return 1; }, slow(x) { - // scary CPU-heavy task here + // uma tarefa que faz uso assustador da CPU alert("Called with " + x); return x * this.someMethod(); // (*) } }; -// same code as before +// o mesmo código de antes function cachingDecorator(func) { let cache = new Map(); return function(x) { @@ -98,49 +98,49 @@ function cachingDecorator(func) { }; } -alert( worker.slow(1) ); // the original method works +alert( worker.slow(1) ); // o método original funciona -worker.slow = cachingDecorator(worker.slow); // now make it caching +worker.slow = cachingDecorator(worker.slow); // agora faz o cache dele *!* -alert( worker.slow(2) ); // Whoops! Error: Cannot read property 'someMethod' of undefined +alert( worker.slow(2) ); // Uoops! Erro: não é possível ler a propriedade 'someMethod' de undefined */!* ``` -The error occurs in the line `(*)` that tries to access `this.someMethod` and fails. Can you see why? +O erro ocorre na linha `(*)` que tenta acessar `this.someMethod` e falha. Consegues perceber o porquê? -The reason is that the wrapper calls the original function as `func(x)` in the line `(**)`. And, when called like that, the function gets `this = undefined`. +A razão é que o encapsulador chama a função original como `func(x)` na linha `(**)`. E, quando invocada dessa maneira, a função recebe `this = undefined`. -We would observe a similar symptom if we tried to run: +Nós obervariamos um sintoma similar se tentássemos executar: ```js let func = worker.slow; func(2); ``` -So, the wrapper passes the call to the original method, but without the context `this`. Hence the error. +Então, o encapsulador passa a chamada para o método da função original, mas sem o contexto `this`. Daí o erro. -Let's fix it. +Vamos resolver isso. -There's a special built-in function method [func.call(context, ...args)](mdn:js/Function/call) that allows to call a function explicitly setting `this`. +Existe um método de função embutido [func.call(context, ...args)](mdn:js/Function/call) que permite chamar uma função explicitamente configurando o `this`. -The syntax is: +A sintáxe é: ```js func.call(context, arg1, arg2, ...) ``` -It runs `func` providing the first argument as `this`, and the next as the arguments. +Ele executa `func` provendo o primeiro argumento como `this`, e os próximos como argumentos. -To put it simply, these two calls do almost the same: +Para simplificar, essas duas chamadas fazem quase a mesma: ```js func(1, 2, 3); func.call(obj, 1, 2, 3) ``` -They both call `func` with arguments `1`, `2` and `3`. The only difference is that `func.call` also sets `this` to `obj`. +Ambos eles chamam `func` com argumentos `1`, `2` e `3`. A única diferença é que `func.call` também configura o `this` para `obj`. -As an example, in the code below we call `sayHi` in the context of different objects: `sayHi.call(user)` runs `sayHi` providing `this=user`, and the next line sets `this=admin`: +Como um exemple, no código abaixo chamamos `sayHi` no contexto de um objeto diferente: `sayHi.call(user)` executa `sayHi` provendo `this=user`, e a próxima linha configura `this=admin`: ```js run function sayHi() { @@ -150,13 +150,12 @@ function sayHi() { let user = { name: "John" }; let admin = { name: "Admin" }; -// use call to pass different objects as "this" +// use call para passar objetos diferentes como "this" sayHi.call( user ); // John sayHi.call( admin ); // Admin ``` -And here we use `call` to call `say` with the given context and phrase: - +E aqui usamos `call` para chamar `say` com o contexto dado e frase (phrase): ```js run function say(phrase) { @@ -165,11 +164,11 @@ function say(phrase) { let user = { name: "John" }; -// user becomes this, and "Hello" becomes the first argument +// user se torna this, e "Hello" se torna o primeiro argumento say.call( user, "Hello" ); // John: Hello ``` -In our case, we can use `call` in the wrapper to pass the context to the original function: +Em nosso caso, podemos usar `call` no encapsulador para passar o contexto para a função original: ```js run let worker = { @@ -190,60 +189,59 @@ function cachingDecorator(func) { return cache.get(x); } *!* - let result = func.call(this, x); // "this" is passed correctly now + let result = func.call(this, x); // "this" é passado corretamente agora */!* cache.set(x, result); return result; }; } -worker.slow = cachingDecorator(worker.slow); // now make it caching +worker.slow = cachingDecorator(worker.slow); // agora faça o cache alert( worker.slow(2) ); // works -alert( worker.slow(2) ); // works, doesn't call the original (cached) +alert( worker.slow(2) ); // works, não chama o original (cacheado) ``` -Now everything is fine. +Agora tudo está bem. -To make it all clear, let's see more deeply how `this` is passed along: +Para deixar tudo claro, vamos analisar mais profundamente como `this` é passado: -1. After the decoration `worker.slow` is now the wrapper `function (x) { ... }`. -2. So when `worker.slow(2)` is executed, the wrapper gets `2` as an argument and `this=worker` (it's the object before dot). -3. Inside the wrapper, assuming the result is not yet cached, `func.call(this, x)` passes the current `this` (`=worker`) and the current argument (`=2`) to the original method. +1. Depois da decoração `worker.slow` é agora o encapsulador `function (x) { ... }`. +2. Então quando `worker.slow(2)` é executado, o encapsulador recebe `2` como um argumento e `this=worker` (é o objeto antes do ponto). +3. Dentro do encapsulador, assumindo que o resultado não está cacheado, `func.call(this, x)` passa o `this` (`=worker`) atual e o argumento atual (`=2`) para o método original. -## Going multi-argument +## Passado vários argumentos -Now let's make `cachingDecorator` even more universal. Till now it was working only with single-argument functions. +Agora, vamos fazer `cachingDecorator` mais universal. Até ao momento ele estava somente funcionando com funções com um único argumento. -Now how to cache the multi-argument `worker.slow` method? +Agora como fazer cache de vários argumentos `worker.slow` método? ```js let worker = { slow(min, max) { - return min + max; // scary CPU-hogger is assumed + return min + max; // assustador devorador de CPU é assumido } }; -// should remember same-argument calls +// deveria lembrar de chamadas com o mesmo argumento worker.slow = cachingDecorator(worker.slow); ``` -We have two tasks to solve here. - -First is how to use both arguments `min` and `max` for the key in `cache` map. Previously, for a single argument `x` we could just `cache.set(x, result)` to save the result and `cache.get(x)` to retrieve it. But now we need to remember the result for a *combination of arguments* `(min,max)`. The native `Map` takes single value only as the key. +Temos dois problemas para resolver aqui. -There are many solutions possible: +Primeiro é, como usar ambos argumentos `min` e `max` para a chave no mapa de `cache`. Anteriormente, para um único argumento `x` poderiamos apenas `cache.set(x, result)` para guardar o resultado e `cache.get(x)` para recuperá-lo. Porém agora precisamos lembrar o resultado para uma *combinação de argumentos* `(min,max)`. O `Map` nativo recebe um único valor somente como a chave. -1. Implement a new (or use a third-party) map-like data structure that is more versatile and allows multi-keys. -2. Use nested maps: `cache.set(min)` will be a `Map` that stores the pair `(max, result)`. So we can get `result` as `cache.get(min).get(max)`. -3. Join two values into one. In our particular case we can just use a string `"min,max"` as the `Map` key. For flexibility, we can allow to provide a *hashing function* for the decorator, that knows how to make one value from many. +Existem muitas soluções possíveis: +1. Implemente uma nova (ou use um terceiro) estrutura de dados parecida ao mapa que seja mais versátil e que permita várias chaves. +2. Usar mapas aninhados: `cache.set(min)` será um `Map` que armazena o par `(max, result)`. Então, podemos receber `result` como `cache.get(min).get(max)`. +3. Junte dois valores dentro de um. Em nosso caso particular podemos apenas usar uma string `"min,max"` como a chave do `Map`. Para flexibilizar, podemos permitir prover uma *função de hashing* para o decorador, que sabem fazer um valor a partir de muitos. -For many practical applications, the 3rd variant is good enough, so we'll stick to it. +Para muitas aplicações práticas, a terceira variante é boa o suficiente, então vamos segui-la. -Also we need to pass not just `x`, but all arguments in `func.call`. Let's recall that in a `function()` we can get a pseudo-array of its arguments as `arguments`, so `func.call(this, x)` should be replaced with `func.call(this, ...arguments)`. +Também precisamos passar não apenas o `x`, mas todos argumentos em `func.call`. Vamos recapitular que em uma `function()` podemos receber um pseudo-array de seus argumentos como `arguments`, então `func.call(this, x)` deveria ser substituido com `func.call(this, ...arguments)`. -Now let's bake it all into the more powerful `cachingDecorator`: +Agora vamos condensar tudo dentro do mais poderoso `cachingDecorator`: ```js run let worker = { @@ -279,49 +277,49 @@ function hash(args) { worker.slow = cachingDecorator(worker.slow, hash); alert( worker.slow(3, 5) ); // works -alert( "Again " + worker.slow(3, 5) ); // same (cached) +alert( "Again " + worker.slow(3, 5) ); // mesmo (cacheado) ``` -Now it works with any number of arguments (though the hash function would also need to be adjusted to allow any number of arguments. An interesting way to handle this will be covered below). +Agora ele funciona com qualquer número de argumentos (embora a função hash também precise ser ajustada para permitir qualquer número de argumentos. Um maneira interessante para lidar com isto será coberto abaixo). -There are two changes: +Existem duas mudanças: -- In the line `(*)` it calls `hash` to create a single key from `arguments`. Here we use a simple "joining" function that turns arguments `(3, 5)` into the key `"3,5"`. More complex cases may require other hashing functions. -- Then `(**)` uses `func.apply` to pass both the context and all arguments the wrapper got (no matter how many) to the original function. +- Na linha `(*)` ele chama `hash` para criar uma única chave a partir de `arguments`. Agora nós podemos usar uma única função "joining" que transforma os argumentos `(3, 5)` na chave `"3,5"`. Casos mais complexos podem requerer outras funções de hashing. +- Então `(**)` usa `func.apply` para passar ambos o contexto e todos argumentos que o encapsulador recebeu (não importa quantos) para função original. ## func.apply -Instead of `func.call(this, ...arguments)` we could use `func.apply(this, arguments)`. +Ao invés de `func.call(this, ...arguments)` poderiamos usar `func.apply(this, arguments)`. -The syntax of built-in method [func.apply](mdn:js/Function/apply) is: +A sintáxe do método embutido [func.apply](mdn:js/Function/apply) é: ```js func.apply(context, args) ``` -It runs the `func` setting `this=context` and using an array-like object `args` as the list of arguments. +Ele executa o `func` configurando `this=context` e usando um objeto `args` parecido com array como a lista de argumentos. -The only syntax difference between `call` and `apply` is that `call` expects a list of arguments, while `apply` takes an array-like object with them. +O única diferença de sintáxe entre `call` e `apply` é que `call` espera uma lista de argumentos, enquanto `apply` pega um objeto parecido com um array com eles. -So these two calls are almost equivalent: +Então essas duas chamadas são quase equivalentes: ```js func.call(context, ...args); func.apply(context, args); ``` -They perform the same call of `func` with given context and arguments. +Eles performam a mesma chamada de `func` com o contexto e argumentos dado. -There's only a subtle difference regarding `args`: +Há somente uma diferença sútil em relação a `args`: -- The spread syntax `...` allows to pass *iterable* `args` as the list to `call`. -- The `apply` accepts only *array-like* `args`. +- A sintáxe spread(espalhar) `...` permite passar `args` *iterável* como a lista para `call`. +- O `apply` aceita somente `args` *parecido com array (array-like)*. -...And for objects that are both iterable and array-like, such as a real array, we can use any of them, but `apply` will probably be faster, because most JavaScript engines internally optimize it better. +...E para objetos que são ambos iterável e parecido a array, tal como um array real, podemos usar qualquer um deles, porém `apply` irá provavelmente ser o mais rápido, porque a maioria dos motores de JavaScript internamente otimizam ele melhor. -Passing all arguments along with the context to another function is called *call forwarding*. +Passar todos argumentos junto com o contexto para outra função é chamado de *encaminhamento de chamada*. -That's the simplest form of it: +Esta é a forma mais símples disso: ```js let wrapper = function() { @@ -329,11 +327,11 @@ let wrapper = function() { }; ``` -When an external code calls such `wrapper`, it is indistinguishable from the call of the original function `func`. +Quando um código externo chama tal `encapsulador`, ele é indistinguível da chamada da função original `func`. -## Borrowing a method [#method-borrowing] +## Emprestando um método [#emprestando-método] -Now let's make one more minor improvement in the hashing function: +Agora vamos fazer mais uma pequena melhoria na função de hashing: ```js function hash(args) { @@ -341,9 +339,9 @@ function hash(args) { } ``` -As of now, it works only on two arguments. It would be better if it could glue any number of `args`. +A partir de agora, ele funciona somente sobre dois argumentos. Seria melhor se pudesse colar qualquer número de `args`. -The natural solution would be to use [arr.join](mdn:js/Array/join) method: +A solução natural seria melhor usar [arr.join](mdn:js/Array/join) método: ```js function hash(args) { @@ -351,21 +349,21 @@ function hash(args) { } ``` -...Unfortunately, that won't work. Because we are calling `hash(arguments)`, and `arguments` object is both iterable and array-like, but not a real array. +...Infelizmente, isso não funcionará. Porque estamos chamando `hash(arguments)`, e o objeto `arguments` é tanto iterável e parecido com array, mas não um real array. -So calling `join` on it would fail, as we can see below: +Portanto, chamar `join` nele falharia, assim como podemos ver abaixo: ```js run function hash() { *!* - alert( arguments.join() ); // Error: arguments.join is not a function + alert( arguments.join() ); // Erro: arguments.join não é uma função */!* } hash(1, 2); ``` -Still, there's an easy way to use array join: +Ainda assim, há uma maneira fácil de usar a combinação de array ```js run function hash() { @@ -377,48 +375,46 @@ function hash() { hash(1, 2); ``` -The trick is called *method borrowing*. +A técnica é chamada *emprestando método*. -We take (borrow) a join method from a regular array (`[].join`) and use `[].join.call` to run it in the context of `arguments`. +Pegamos (emprestamos) um método de combinação de um array comum (`[].join()`) e usar `[].join.call` para executá-lo no contexto de `arguments`. -Why does it work? +Por quê ele funciona? -That's because the internal algorithm of the native method `arr.join(glue)` is very simple. +É porque o algoritmo interno do método nativo `arr.join(glue)` é muito símples. -Taken from the specification almost "as-is": +Retirado da especificação quase "como-é": -1. Let `glue` be the first argument or, if no arguments, then a comma `","`. -2. Let `result` be an empty string. -3. Append `this[0]` to `result`. -4. Append `glue` and `this[1]`. -5. Append `glue` and `this[2]`. -6. ...Do so until `this.length` items are glued. -7. Return `result`. +1. Deixa a `glue` ser o primeiro argumento ou, se não houver argumentos, então uma vírgula `","`. +2. Deixa `result` ser uma string vázia. +3. Acrescentar `this[0]` ao `result`. +4. Acrescentar `glue` e `this[1]`. +5. Acrescentar `glue` e `this[2]`. +6. ...Faça isso até os itens `this.length` sejam colados. +7. Retorne `result`. -So, technically it takes `this` and joins `this[0]`, `this[1]` ...etc together. It's intentionally written in a way that allows any array-like `this` (not a coincidence, many methods follow this practice). That's why it also works with `this=arguments`. +Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc tudo junto. Foi intecionalmente escrito em uma maneira que permite qualquer objeto parecido com array `this` (não é uma conscidência, vários métodos seguem esta prática). Aí está o porquê que isto também funciona com `this=arguments`. -## Decorators and function properties +## Decoradores e propriedades de funções -It is generally safe to replace a function or a method with a decorated one, except for one little thing. If the original function had properties on it, like `func.calledCount` or whatever, then the decorated one will not provide them. Because that is a wrapper. So one needs to be careful if one uses them. +É geralmente seguro substituir uma função or um método por um decorado, exceto para uma pequena coisa. Se a função original tiver propriedades nela, tipo `func.calledCount` ou que seja, a função decorada não as forncerá. Por que ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. -E.g. in the example above if `slow` function had any properties on it, then `cachingDecorator(slow)` is a wrapper without them. +Alguns decoradores podem fornecer suas próprias propriedades. Exemplo, um decorador pode contar quantas vezes uma função foi invocada e quanto tempo ela levou, e expor essas informações atráves das propriedades do encapsulador. -Some decorators may provide their own properties. E.g. a decorator may count how many times a function was invoked and how much time it took, and expose this information via wrapper properties. +Existe uma maneira de criar decoradores que mantém o acesso às propriedades da função, mas isto requer usar um objeto `Proxy` especial para encapsular uma função. Discutiremos isso depois no artigo . -There exists a way to create decorators that keep access to function properties, but this requires using a special `Proxy` object to wrap a function. We'll discuss it later in the article . +## Resumindo -## Summary +O *Decorador* é um encapsulador em volta de uma funçaõ que altera seu comportamento. O trabalho principal ainda é realizado pela função. -*Decorator* is a wrapper around a function that alters its behavior. The main job is still carried out by the function. +Decoradores podem ser vistos como "funcionalidades" ou "aspectos" que podem ser adicionados a uma função. Podemos adicionar um ou vários. E tudo isso sem alterar o seu código. -Decorators can be seen as "features" or "aspects" that can be added to a function. We can add one or add many. And all this without changing its code! +Para implementar `cachingDecorator`, estudamos os métodos: -To implement `cachingDecorator`, we studied methods: +- [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- chama `func` com o seu contexto e argumentos dados. +- [func.apply(context, args)](mdn:js/Function/apply) -- chama `func` passando `context` como `this` e um objeto `args` parecido com array dentro de uma lista de argumentos. -- [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- calls `func` with given context and arguments. -- [func.apply(context, args)](mdn:js/Function/apply) -- calls `func` passing `context` as `this` and array-like `args` into a list of arguments. - -The generic *call forwarding* is usually done with `apply`: +O *encaminhamento de chamadas* genérico é comumente realizado com `apply`: ```js let wrapper = function() { @@ -426,7 +422,6 @@ let wrapper = function() { } ``` -We also saw an example of *method borrowing* when we take a method from an object and `call` it in the context of another object. It is quite common to take array methods and apply them to arguments. The alternative is to use rest parameters object that is a real array. - +Também vimos um exemplo de *emprestimo de método* quando pegamos um método de um objeto e `chamamos(call)` ele em um contexto de outro objeto. É bem comum pegar métodos de um array e aplicá-los aos argumentos. A alternativa é usar o resto dos parâmetros do objeto que é um array real. -There are many decorators there in the wild. Check how well you got them by solving the tasks of this chapter. +Existem muitos decoradores por aí na selva. Verifique como bem você os recebeu ao resolver as tarefas deste capítulo. \ No newline at end of file From f61fc2a6fb84f98a7dd5506cb4d6895823a591fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:18:10 +0100 Subject: [PATCH 002/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/01-spy-decorator/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md index d2764ae6d..76784e3e7 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md @@ -4,7 +4,7 @@ importance: 5 # Decorador Spy (espião) -Criar um decorador `spy(func)` que deve retornar um encapsulador que guarda todas chamadas de uma função em sua propriedade `calls`. +Crie um decorador `spy(func)` que deve retornar um encapsulador que guarde todas chamadas de uma função na sua propriedade `calls`. Todas chamadas são guardadas como um array de argumentos. @@ -27,4 +27,4 @@ for (let args of work.calls) { } ``` -P.S. Que o decorador é algumas vezes útil para teste unitário. Sua forma avançada é `sinon.spy` na biblioteca [Sinon.JS](http://sinonjs.org). \ No newline at end of file +P.S. Que o decorador é algumas vezes útil para teste unitário. Sua forma avançada é `sinon.spy` na biblioteca [Sinon.JS](http://sinonjs.org). From 75233f9d64d91b24be15defa0d6d3765bacc7e4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:19:01 +0100 Subject: [PATCH 003/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/01-spy-decorator/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md index 76784e3e7..e8f48a593 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md @@ -12,7 +12,7 @@ Por exemplo: ```js function work(a, b) { - alert( a + b ); // work é uma função ou método arbitrário + alert( a + b ); // work é uma função ou método arbitrários } *!* From df22c3aeab236d14ab7afa6311815ffdcbbfbf3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:19:27 +0100 Subject: [PATCH 004/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/01-spy-decorator/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md index 05aed9316..2aba51e04 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/solution.md @@ -1 +1 @@ -O encapsulador retornado pelo `spy(f)` deve guardar todos argumentos e então usar `f.apply` para encaminhar a chamada. \ No newline at end of file +O encapsulador retornado por `spy(f)` deve guardar todos argumentos e depois usar `f.apply` para encaminhar a chamada. From f791dc24e46a8193bc97e1c236ef43c902a63503 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:20:00 +0100 Subject: [PATCH 005/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index 1512aba09..187da9d89 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -11,7 +11,7 @@ function delay(f, ms) { let f1000 = delay(alert, 1000); -f1000("test"); // imprima "test" depois 1000ms +f1000("test"); // exibe "test" depois de 1000ms ``` Por favor note como uma função em seta (arrow function) é usada aqui. Tal como sabemos, funções em setas não tem seu próprio `this` e `arguments`, então `f.apply(this, arguments)` recebem `this` e `arguments` a partir de um encapsulador. @@ -31,4 +31,4 @@ function delay(f, ms) { }; } -``` \ No newline at end of file +``` From f21bfd15ed477d7becac6b4d3f7f8ed0d8d21ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:20:42 +0100 Subject: [PATCH 006/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index 187da9d89..cd5bff02f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -14,7 +14,7 @@ let f1000 = delay(alert, 1000); f1000("test"); // exibe "test" depois de 1000ms ``` -Por favor note como uma função em seta (arrow function) é usada aqui. Tal como sabemos, funções em setas não tem seu próprio `this` e `arguments`, então `f.apply(this, arguments)` recebem `this` e `arguments` a partir de um encapsulador. +Por favor note como uma função seta (arrow function) é usada aqui. Tal como sabemos, funções seta não têm seus próprios `this` e `arguments`, então `f.apply(this, arguments)` recebe `this` e `arguments` a partir do encapsulador. Se passassemos uma função normal, `setTimeout` a chamaria sem argumentos e `this=window` (assumindo que estamos no browser). From ed2891f59b64cbc948f50e5bb11ba813ddb690b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:21:59 +0100 Subject: [PATCH 007/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index aa9555c66..56f6c4345 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -4,7 +4,7 @@ importance: 5 # O Decorador Throttle -Crie um decorador de "throttling" `throttle(f, ms)` -- que retorna um encapsulador. +Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorna um encapsulador. Quando é chamada várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. @@ -50,4 +50,4 @@ f1000(3); // (throttling, 1000ms ainda não saiu) // ...exibi 3, o valor intermediário 2 foi ignorado ``` -P.S. Os argumentos e o contexto `this` passados para `f1000` devem ser passados para a função original `f`. \ No newline at end of file +P.S. Os argumentos e o contexto `this` passados para `f1000` devem ser passados para a função original `f`. From e81827a51975d3bc92a3d0ad2791e0415e489b80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:29:59 +0100 Subject: [PATCH 008/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index cd5bff02f..4fac583a7 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -16,7 +16,7 @@ f1000("test"); // exibe "test" depois de 1000ms Por favor note como uma função seta (arrow function) é usada aqui. Tal como sabemos, funções seta não têm seus próprios `this` e `arguments`, então `f.apply(this, arguments)` recebe `this` e `arguments` a partir do encapsulador. -Se passassemos uma função normal, `setTimeout` a chamaria sem argumentos e `this=window` (assumindo que estamos no browser). +Se passássemos uma função normal, `setTimeout` a chamaria sem argumentos nem `this=window` (assumindo que estávamos no browser). Ainda podemos passar o `this` certo atráves do uso de uma variável intermediador, porém é um pouco mais difícil: From 5a1d0818bf482ad5c706d05e3f17bf09e1993a56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:30:44 +0100 Subject: [PATCH 009/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index 4fac583a7..0544e9982 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -26,7 +26,7 @@ function delay(f, ms) { return function(...args) { let savedThis = this; // guarde isto dentro de uma variável intermediador setTimeout(function() { - f.apply(savedThis, args); // use-o aqui + f.apply(savedThis, args); // use-a aqui }, ms); }; From 65061eeaf6285cf9f2a75cb6e60c4e57034747af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:34:49 +0100 Subject: [PATCH 010/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 56f6c4345..f29fcbf60 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -39,7 +39,7 @@ function f(a) { console.log(a); } -// f1000 passa a chamada para f no máximo uma vez por 1000ms +// f1000 passa chamadas para f no máximo uma vez por 1000 ms let f1000 = throttle(f, 1000); f1000(1); // exibi 1 From a940f6293c48e113cfabeac1bedb4d5e1b4958e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:34:56 +0100 Subject: [PATCH 011/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index f29fcbf60..e8dd43866 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -42,7 +42,7 @@ function f(a) { // f1000 passa chamadas para f no máximo uma vez por 1000 ms let f1000 = throttle(f, 1000); -f1000(1); // exibi 1 +f1000(1); // exibe 1 f1000(2); // (throttling, 1000ms ainda não saiu) f1000(3); // (throttling, 1000ms ainda não saiu) From beb803ec28003b3a90f93b03a513d87621bf6cdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:35:09 +0100 Subject: [PATCH 012/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index e8dd43866..8766bbf7d 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -43,7 +43,7 @@ function f(a) { let f1000 = throttle(f, 1000); f1000(1); // exibe 1 -f1000(2); // (throttling, 1000ms ainda não saiu) +f1000(2); // (estrangulamento, 1000ms ainda não passaram) f1000(3); // (throttling, 1000ms ainda não saiu) // quando o tempo de 1000ms estiver esgotado... From 8daf6486bfdd13314c5c2bbdbc9e01414e5f5715 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:35:20 +0100 Subject: [PATCH 013/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 8766bbf7d..47431f056 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -44,7 +44,7 @@ let f1000 = throttle(f, 1000); f1000(1); // exibe 1 f1000(2); // (estrangulamento, 1000ms ainda não passaram) -f1000(3); // (throttling, 1000ms ainda não saiu) +f1000(3); // (estrangulamento, 1000ms ainda não passaram) // quando o tempo de 1000ms estiver esgotado... // ...exibi 3, o valor intermediário 2 foi ignorado From e03534318fc165a161dda8f45524a7b4d6390d97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:35:34 +0100 Subject: [PATCH 014/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 47431f056..2991ce0af 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -47,7 +47,7 @@ f1000(2); // (estrangulamento, 1000ms ainda não passaram) f1000(3); // (estrangulamento, 1000ms ainda não passaram) // quando o tempo de 1000ms estiver esgotado... -// ...exibi 3, o valor intermediário 2 foi ignorado +// ...exibe 3, o valor intermédio 2 foi ignorado ``` P.S. Os argumentos e o contexto `this` passados para `f1000` devem ser passados para a função original `f`. From e64df68c30e18f56361acadc90bacf54101eacde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:36:04 +0100 Subject: [PATCH 015/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index 0544e9982..56b15123f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -24,7 +24,7 @@ Ainda podemos passar o `this` certo atráves do uso de uma variável intermediad function delay(f, ms) { return function(...args) { - let savedThis = this; // guarde isto dentro de uma variável intermediador + let savedThis = this; // guarde isto numa variável intermédia setTimeout(function() { f.apply(savedThis, args); // use-a aqui }, ms); From 2ac8f341bf0a29c0c07c7e26029815caa4b09d2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:36:31 +0100 Subject: [PATCH 016/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md index 6716c2f20..84ab0dcb1 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md @@ -4,7 +4,7 @@ importance: 5 # Atrasando o decorador -Criar um decorador `delay(f, ms)` que atrasa cada chamada de `f` por `ms` milissegundos. +Crie um decorador `delay(f, ms)` que atrase cada chamada de `f` por `ms` milissegundos. Por exemplo: From 1fe7c8e89e04ee32e29fe0be336d3312c3eae468 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:36:53 +0100 Subject: [PATCH 017/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md index 84ab0dcb1..0312f05f0 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md @@ -17,7 +17,7 @@ function f(x) { let f1000 = delay(f, 1000); let f1500 = delay(f, 1500); -f1000("test"); // imprima "test" depois 1000ms +f1000("test"); // imprime "test" depois de 1000ms f1500("test"); // imprima "test" depois 1500ms ``` From 6ec0c37ca3991c5587be6d9b07126da2b0d8e8f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:37:04 +0100 Subject: [PATCH 018/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- .../06-advanced-functions/09-call-apply-decorators/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index db12f41bd..c2130edc5 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -1,6 +1,6 @@ # Decoradores e Repassamento, call/apply -JavaScript oferece uma flexibilidade excepcional ao lidar com funções. Elas podem ser repassadas, usadas como objetos, e agora iremos ver como *repassar* suas chamas entre elas e *decorá-las*. +JavaScript oferece uma flexibilidade excepcional para lidar com funções. Elas podem ser repassadas, usadas como objetos, e agora iremos ver como *repassar* chamadas entre elas e *decorá-las*. ## Cache Transparente @@ -424,4 +424,4 @@ let wrapper = function() { Também vimos um exemplo de *emprestimo de método* quando pegamos um método de um objeto e `chamamos(call)` ele em um contexto de outro objeto. É bem comum pegar métodos de um array e aplicá-los aos argumentos. A alternativa é usar o resto dos parâmetros do objeto que é um array real. -Existem muitos decoradores por aí na selva. Verifique como bem você os recebeu ao resolver as tarefas deste capítulo. \ No newline at end of file +Existem muitos decoradores por aí na selva. Verifique como bem você os recebeu ao resolver as tarefas deste capítulo. From 27720a9e2f1d7c70476cf3d23d4655188098cdad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:37:14 +0100 Subject: [PATCH 019/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index c2130edc5..b4c66fdce 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -4,7 +4,7 @@ JavaScript oferece uma flexibilidade excepcional para lidar com funções. Elas ## Cache Transparente -Digamos que temos uma função `slow(x)` que usa muita CPU, mas seus resultados estáveis. Em outras palavras para o mesmo `x` ele sempre retorna o resultado. +Digamos que temos uma função `slow(x)` que usa muita CPU, mas seus resultados são estáveis. Por outras palavras, para o mesmo `x` ela sempre retorna o mesmo resultado. Se a função for chamada várias vezes, nós podemos requer armazenar em cache (lembrar) os resultados para diferentes `x` para evitar gastar tempo extra em recalculações. From 3c51f58342d4524c967667a94707a8ca22c0fd3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:37:50 +0100 Subject: [PATCH 020/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index b4c66fdce..415d12cd8 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -6,7 +6,7 @@ JavaScript oferece uma flexibilidade excepcional para lidar com funções. Elas Digamos que temos uma função `slow(x)` que usa muita CPU, mas seus resultados são estáveis. Por outras palavras, para o mesmo `x` ela sempre retorna o mesmo resultado. -Se a função for chamada várias vezes, nós podemos requer armazenar em cache (lembrar) os resultados para diferentes `x` para evitar gastar tempo extra em recalculações. +Se a função for chamada com frequência, nós podemos querer armazenar em cache (lembrar) os resultados para diferentes `x` para evitar gastar tempo extra em recalculações. Mas ao invés de adicionar essa funcionalidade dentro de `slow()`, criaremos um encapsulador. Como veremos existem muitos benefícios em proceder deste modo. From 019f8c7e220714ad3bdb42c2097a5073e8959cc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:38:03 +0100 Subject: [PATCH 021/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 415d12cd8..0b55f7c2b 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -8,7 +8,7 @@ Digamos que temos uma função `slow(x)` que usa muita CPU, mas seus resultados Se a função for chamada com frequência, nós podemos querer armazenar em cache (lembrar) os resultados para diferentes `x` para evitar gastar tempo extra em recalculações. -Mas ao invés de adicionar essa funcionalidade dentro de `slow()`, criaremos um encapsulador. Como veremos existem muitos benefícios em proceder deste modo. +Mas ao invés de adicionar essa funcionalidade a`slow()`, iremos criar um encapsulador. Como veremos, existem muitos benefícios em proceder deste modo. Abaixo está o código de exemplo, e a seguir a sua explicação: From 470c0428f926a7282a30358573d3eeff6e4de28a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:38:20 +0100 Subject: [PATCH 022/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 0b55f7c2b..30762f3c0 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -10,7 +10,7 @@ Se a função for chamada com frequência, nós podemos querer armazenar em cach Mas ao invés de adicionar essa funcionalidade a`slow()`, iremos criar um encapsulador. Como veremos, existem muitos benefícios em proceder deste modo. -Abaixo está o código de exemplo, e a seguir a sua explicação: +Aqui está o código, e a seguir a sua explicação: ```js run function slow(x) { From 2424a498fd2cd682080a0747d7d4b4f273725928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:38:35 +0100 Subject: [PATCH 023/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 30762f3c0..80db7133f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -405,7 +405,7 @@ Existe uma maneira de criar decoradores que mantém o acesso às propriedades da ## Resumindo -O *Decorador* é um encapsulador em volta de uma funçaõ que altera seu comportamento. O trabalho principal ainda é realizado pela função. +O *Decorador* é um encapsulador à volta de uma funçaõ que altera o seu comportamento. O trabalho principal ainda é realizado pela função. Decoradores podem ser vistos como "funcionalidades" ou "aspectos" que podem ser adicionados a uma função. Podemos adicionar um ou vários. E tudo isso sem alterar o seu código. From 373d7ded8655c6dc29799cf4e7f53d8152ae5b43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:38:44 +0100 Subject: [PATCH 024/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 80db7133f..e39ab1461 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -409,7 +409,7 @@ O *Decorador* é um encapsulador à volta de uma funçaõ que altera o seu compo Decoradores podem ser vistos como "funcionalidades" ou "aspectos" que podem ser adicionados a uma função. Podemos adicionar um ou vários. E tudo isso sem alterar o seu código. -Para implementar `cachingDecorator`, estudamos os métodos: +Para implementar `cachingDecorator`, estudámos métodos: - [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- chama `func` com o seu contexto e argumentos dados. - [func.apply(context, args)](mdn:js/Function/apply) -- chama `func` passando `context` como `this` e um objeto `args` parecido com array dentro de uma lista de argumentos. From f4eb016168b8349bcc31de36225d212d6efa56cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:38:54 +0100 Subject: [PATCH 025/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index e39ab1461..a65059762 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -412,7 +412,7 @@ Decoradores podem ser vistos como "funcionalidades" ou "aspectos" que podem ser Para implementar `cachingDecorator`, estudámos métodos: - [func.call(context, arg1, arg2...)](mdn:js/Function/call) -- chama `func` com o seu contexto e argumentos dados. -- [func.apply(context, args)](mdn:js/Function/apply) -- chama `func` passando `context` como `this` e um objeto `args` parecido com array dentro de uma lista de argumentos. +- [func.apply(context, args)](mdn:js/Function/apply) -- chama `func` passando `context` como `this` e um objeto parecido com array `args` a uma lista de argumentos. O *encaminhamento de chamadas* genérico é comumente realizado com `apply`: From 28db3ae55d043959b289c8b6629c03322cb49e51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:39:03 +0100 Subject: [PATCH 026/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index a65059762..448ac45f4 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -422,6 +422,6 @@ let wrapper = function() { } ``` -Também vimos um exemplo de *emprestimo de método* quando pegamos um método de um objeto e `chamamos(call)` ele em um contexto de outro objeto. É bem comum pegar métodos de um array e aplicá-los aos argumentos. A alternativa é usar o resto dos parâmetros do objeto que é um array real. +Também vimos um exemplo de *emprestimo de método* quando pegamos num método de um objeto e o chamamos (`call`) no contexto de outro objeto. É bem comum pegar em métodos de um array e aplicá-los aos argumentos. A alternativa é usar un objeto de parâmetros rest que seja um verdadeiro array. Existem muitos decoradores por aí na selva. Verifique como bem você os recebeu ao resolver as tarefas deste capítulo. From fc6098752fe868df19c6ff8a261af15d90c67c37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:39:37 +0100 Subject: [PATCH 027/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md index 0312f05f0..3b7666ac3 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md @@ -18,7 +18,7 @@ let f1000 = delay(f, 1000); let f1500 = delay(f, 1500); f1000("test"); // imprime "test" depois de 1000ms -f1500("test"); // imprima "test" depois 1500ms +f1500("test"); // imprime "test" depois de 1500ms ``` Em outras palavras, `delay(f, ms)` retorna uma variante de `f` "atrasada em `ms`". From 31c7c268026e22546b72740166748c48f7f4609e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:40:07 +0100 Subject: [PATCH 028/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 9ba439312..8264b8de8 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -24,7 +24,7 @@ let f = _.debounce(alert, 1000); f("a"); setTimeout( () => f("b"), 200); setTimeout( () => f("c"), 500); -// função tratada pelo debounce espera 1000ms depois da última chamada e depois executa: alert("*") +// a função de debounce espera 1000ms após a última chamada e depois executa: alert("c") ``` Agora um exemplo prático. Vamos dizer, que usuário digite alguma coisa, e gostariamos enviar uma requisição para o servidor quando a entrada estiver terminda. @@ -49,4 +49,4 @@ Isto espera o tempo dado depois da última chamada, e depois executa sua funçã A tarefa está em implementar o decorador `debounce`. -Dica: são apenas uma poucas linhas se você pensar sobre ela :) \ No newline at end of file +Dica: são apenas uma poucas linhas se você pensar sobre ela :) From 9922f996ea6807665faf5f1965423cea46a710d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:40:42 +0100 Subject: [PATCH 029/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md index 3b7666ac3..d2f3ca121 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md @@ -23,4 +23,4 @@ f1500("test"); // imprime "test" depois de 1500ms Em outras palavras, `delay(f, ms)` retorna uma variante de `f` "atrasada em `ms`". -No código acima, `f` é uma função de um único argumento, porém sua solução deve passar todos argumentos e o contexto `this`. +No código acima, `f` é uma função com um único argumento, porém a sua solução deve passar todos os argumentos e o `this` do contexto. From ce1c56488cc7c30b8e19fd3ae6f4c63e094e2e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:41:00 +0100 Subject: [PATCH 030/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md index 3e01c0e57..203a39e03 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md @@ -9,4 +9,4 @@ function debounce(func, ms) { ``` -Uma chamada para `debounce` retorna um encapsulador. Quando chamado, ela agenda a função original chama depois de receber `ms` e cancela o tempo limite anterior. +Uma chamada de `debounce` retorna um encapsulador. Quando chamada, ela agenda a chamada original da função depois de certos `ms` e cancela o tempo de espera (timeout) anterior. From 20201dd6fbd0cf5a1c95f7bea2f2e93cb76decbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:41:25 +0100 Subject: [PATCH 031/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 8264b8de8..c3f1dc126 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -2,7 +2,7 @@ importance: 5 --- -# O Decorador Debounce +# O decorador Debounce O resultado do decorador `debounce(f, ms)` é um encapsulador que suspende chamadas para `f` até haver `ms` milissegundos de inactividade (sem chamadas, "período de espera"), depois invoca `f` uma vez com os últimos argumentos. From 79cb3d9a7981cc16ef23efdc472573b39c45d7c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:41:45 +0100 Subject: [PATCH 032/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index c3f1dc126..6b059280c 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -4,7 +4,7 @@ importance: 5 # O decorador Debounce -O resultado do decorador `debounce(f, ms)` é um encapsulador que suspende chamadas para `f` até haver `ms` milissegundos de inactividade (sem chamadas, "período de espera"), depois invoca `f` uma vez com os últimos argumentos. +O resultado do decorador `debounce(f, ms)` é um encapsulador que suspende chamadas de `f` até haver `ms` milissegundos de inactividade (nenhuma chamada, "período de espera"), depois invoca `f` uma vez com os últimos argumentos. Em outras palavras, `debounce` é como uma secretária que aceita "chamadas de telefones", e espera até existir `ms` milissegundos de espera. E somente então transferir as últimas informações de chamadas para "o chefe" (chama a `f` atual). From fe0ac713f3ba3e321a67d0bea305a9468b8b1327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:42:23 +0100 Subject: [PATCH 033/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 6b059280c..7033985ed 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -6,7 +6,7 @@ importance: 5 O resultado do decorador `debounce(f, ms)` é um encapsulador que suspende chamadas de `f` até haver `ms` milissegundos de inactividade (nenhuma chamada, "período de espera"), depois invoca `f` uma vez com os últimos argumentos. -Em outras palavras, `debounce` é como uma secretária que aceita "chamadas de telefones", e espera até existir `ms` milissegundos de espera. E somente então transferir as últimas informações de chamadas para "o chefe" (chama a `f` atual). +Por outras palavras, `debounce` é como uma secretária que aceita "chamadas telefónicas", e espera até existirem `ms` milissegundos de inatividade. E, somente então transfere a informação da última chamada para "o chefe" (chama a `f` atual). Por exemplo, tinhamos uma função `f` e a substituimos com `f = debounce(f, 1000)`. From e44b0a2a99e8351190df4c56a8c39f43ee2c6275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:42:39 +0100 Subject: [PATCH 034/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 7033985ed..4766c7394 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -8,7 +8,7 @@ O resultado do decorador `debounce(f, ms)` é um encapsulador que suspende chama Por outras palavras, `debounce` é como uma secretária que aceita "chamadas telefónicas", e espera até existirem `ms` milissegundos de inatividade. E, somente então transfere a informação da última chamada para "o chefe" (chama a `f` atual). -Por exemplo, tinhamos uma função `f` e a substituimos com `f = debounce(f, 1000)`. +Por exemplo, tinhamos uma função `f` e a substituimos por `f = debounce(f, 1000)`. Então se a função encapsulada é chamada aos 0ms, 200ms, e 500ms, e depois não houver chamadas, a `f` atual será somente chamada uma vez, aos 1500ms. Ou seja: depois do período de espera de 1000ms da última chamada. From 5408986535fc8d49522e90feef03887a493b7f34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:42:59 +0100 Subject: [PATCH 035/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 4766c7394..4c5ee851f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -10,7 +10,7 @@ Por outras palavras, `debounce` é como uma secretária que aceita "chamadas tel Por exemplo, tinhamos uma função `f` e a substituimos por `f = debounce(f, 1000)`. -Então se a função encapsulada é chamada aos 0ms, 200ms, e 500ms, e depois não houver chamadas, a `f` atual será somente chamada uma vez, aos 1500ms. Ou seja: depois do período de espera de 1000ms da última chamada. +Então se a função encapsulada for chamada aos 0ms, 200ms, e 500ms, e depois não houver chamadas, a `f` atual será somente chamada uma vez, aos 1500ms. Ou seja, depois do período de espera de 1000ms após a última chamada. ![](debounce.svg) From 5a7fb16ed66d091b9dca9769c1780ca7678bf3d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:43:19 +0100 Subject: [PATCH 036/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 4c5ee851f..c5b62daab 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -14,7 +14,7 @@ Então se a função encapsulada for chamada aos 0ms, 200ms, e 500ms, e depois n ![](debounce.svg) -...E receberão os argumentos de toda última chamada, outras chamadas são ignorada. +...E receberá os argumentos da última chamada, outras chamadas são ignoradas. Aqui estão o código para isto (que usa o decorador debounce da [biblioteca Lodash](https://lodash.com/docs/4.17.15#debounce)): From febace330ccbf455e0a726fd8306168f86eff9c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:43:46 +0100 Subject: [PATCH 037/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index c5b62daab..52e037e3f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -16,7 +16,7 @@ Então se a função encapsulada for chamada aos 0ms, 200ms, e 500ms, e depois n ...E receberá os argumentos da última chamada, outras chamadas são ignoradas. -Aqui estão o código para isto (que usa o decorador debounce da [biblioteca Lodash](https://lodash.com/docs/4.17.15#debounce)): +Aqui está o código para isso (que usa o decorador debounce da [biblioteca Lodash](https://lodash.com/docs/4.17.15#debounce)): ```js let f = _.debounce(alert, 1000); From 2a1a6ccfe70f4b770ba8a658d8e7fb3260b12e41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:46:51 +0100 Subject: [PATCH 038/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 52e037e3f..48dd89f58 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -27,7 +27,7 @@ setTimeout( () => f("c"), 500); // a função de debounce espera 1000ms após a última chamada e depois executa: alert("c") ``` -Agora um exemplo prático. Vamos dizer, que usuário digite alguma coisa, e gostariamos enviar uma requisição para o servidor quando a entrada estiver terminda. +Agora um exemplo prático. Vamos dizer, que o usuário digita alguma coisa, e gostaríamos de fazer um pedido ao servidor quando a entrada tiver terminado. Não adianta enviar uma requesição para character digitado. Ao invés disso gostariamos de esperar, e depois processar todo resultado. From a821f52a69fb76e57a5b77bdcf0b434698fe9ff6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:49:21 +0100 Subject: [PATCH 039/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 48dd89f58..7ce037bed 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -30,7 +30,7 @@ setTimeout( () => f("c"), 500); Agora um exemplo prático. Vamos dizer, que o usuário digita alguma coisa, e gostaríamos de fazer um pedido ao servidor quando a entrada tiver terminado. -Não adianta enviar uma requesição para character digitado. Ao invés disso gostariamos de esperar, e depois processar todo resultado. +Não adianta enviar um pedido por cada caractere digitado. Ao invés disso gostariamos de esperar, e então processar todo o resultado. Em um web-browser, nós podemos configurar um manipulador de evento -- uma função que é chamada em todas mundanças no campo de entrada. Normalmente, um manipulador de evento é chamado sempre, para toda tecla pressionada. Porém se nós `debounce` ela por 1000ms, logo ela será chamanda apenas uma vez, depois 1000ms depois da última entrada. From 0e02ffad22a5f6857001821859993f6c68a3839b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:50:49 +0100 Subject: [PATCH 040/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 7ce037bed..814aa2031 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -32,7 +32,7 @@ Agora um exemplo prático. Vamos dizer, que o usuário digita alguma coisa, e go Não adianta enviar um pedido por cada caractere digitado. Ao invés disso gostariamos de esperar, e então processar todo o resultado. -Em um web-browser, nós podemos configurar um manipulador de evento -- uma função que é chamada em todas mundanças no campo de entrada. Normalmente, um manipulador de evento é chamado sempre, para toda tecla pressionada. Porém se nós `debounce` ela por 1000ms, logo ela será chamanda apenas uma vez, depois 1000ms depois da última entrada. +Num navegador, nós podemos configurar um gerenciador de eventos -- uma função que é chamada em todas as alterações no campo de entrada. Normalmente, um gerenciador de eventos é chamado com frequência, a cada tecla pressionada. Porém, se nós fizermos o `debounce` dele por 1000ms, então ele será chamando apenas uma vez, depois de 1000ms após a última entrada. ```online From e18716ddf3c259dbdf3dd183f187aee038ff2a6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:51:15 +0100 Subject: [PATCH 041/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 814aa2031..7bfb40a0b 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -36,7 +36,7 @@ Num navegador, nós podemos configurar um gerenciador de eventos -- uma função ```online -Neste exemplo funcionando, o manipulador coloca o resultado dentro da caixa abaixo, experimente: +Neste exemplo online, o gerenciador coloca o resultado na caixa abaixo, experimente: [iframe border=1 src="debounce" height=200] From 6fb0673cacbaf43868d843132d045c8dfcaeeb6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:51:35 +0100 Subject: [PATCH 042/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 7bfb40a0b..28b6d4d38 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -40,7 +40,7 @@ Neste exemplo online, o gerenciador coloca o resultado na caixa abaixo, experime [iframe border=1 src="debounce" height=200] -Vês? A segunda entrada chama a função na qual foi aplicada o debounce, então o seu conteúdo será processado depois de 1000ms da última entrada. +Você vê? A segunda entrada chama a função de debounce, assim o seu conteúdo será processado após 1000ms depois da última entrada. ``` Portanto, `debounce` é excelente maneira de processar uma sequência de eventos: seja ela uma sequência de pressões de teclas, movimentos de mouse ou alguma coisa do genero. From 26310a2a5373067131e35bb098aafb13552cd2a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:52:13 +0100 Subject: [PATCH 043/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 28b6d4d38..cada2fb38 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -43,7 +43,7 @@ Neste exemplo online, o gerenciador coloca o resultado na caixa abaixo, experime Você vê? A segunda entrada chama a função de debounce, assim o seu conteúdo será processado após 1000ms depois da última entrada. ``` -Portanto, `debounce` é excelente maneira de processar uma sequência de eventos: seja ela uma sequência de pressões de teclas, movimentos de mouse ou alguma coisa do genero. +Portanto, `debounce` é uma excelente maneira de processar uma sequência de eventos: seja ela uma sequência de teclas pressionadas, movimentos do rato ou alguma outra coisa. Isto espera o tempo dado depois da última chamada, e depois executa sua função, que pode processar o resultado. From 60dd4eaa5f47bac96ea4674731e78644ba5deb1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:54:45 +0100 Subject: [PATCH 044/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index cada2fb38..8f734311d 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -45,7 +45,7 @@ Você vê? A segunda entrada chama a função de debounce, assim o seu conteúdo Portanto, `debounce` é uma excelente maneira de processar uma sequência de eventos: seja ela uma sequência de teclas pressionadas, movimentos do rato ou alguma outra coisa. -Isto espera o tempo dado depois da última chamada, e depois executa sua função, que pode processar o resultado. +Ela espera o tempo dado depois da última chamada, e depois executa sua tarefa, que pode processar o resultado. A tarefa está em implementar o decorador `debounce`. From 960a729e508375977cdf7901c51afd8e95f7263f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:56:22 +0100 Subject: [PATCH 045/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 8f734311d..ee57f76e1 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -47,6 +47,6 @@ Portanto, `debounce` é uma excelente maneira de processar uma sequência de eve Ela espera o tempo dado depois da última chamada, e depois executa sua tarefa, que pode processar o resultado. -A tarefa está em implementar o decorador `debounce`. +A tarefa é implementar o decorador `debounce`. Dica: são apenas uma poucas linhas se você pensar sobre ela :) From 5b97fc8c8269470b8c5358e6540c5a48816a18c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:57:11 +0100 Subject: [PATCH 046/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 2448a6c52..977738405 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -29,10 +29,10 @@ function throttle(func, ms) { } ``` -Uma chamada para `throttle(func, ms` retorna `wrapper`. +Uma chamada de `throttle(func, ms)` retorna `wrapper`. 1. Durante a primeira chamada, o `wrapper` apenas executa a `func` e configura o estado de espera (`isThrottled = true`). 2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos o contexto e os argumentos são igualmente importante e devem ser memorizado. Nós precisamos deles simultaneamente reproduzir a chamada. 3. Depois `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivemos ignorado as chamadas, `wrapper` é executado com os últimos argumentos e contexto memorizados. -O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos executar o `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reconfigurá-lo. \ No newline at end of file +O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos executar o `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reconfigurá-lo. From 3351efcb201436589d0a06db1ffb6518aa01d1e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 11:58:19 +0100 Subject: [PATCH 047/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 977738405..2ea4d8d77 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -31,7 +31,7 @@ function throttle(func, ms) { Uma chamada de `throttle(func, ms)` retorna `wrapper`. -1. Durante a primeira chamada, o `wrapper` apenas executa a `func` e configura o estado de espera (`isThrottled = true`). +1. Durante a primeira chamada, o `wrapper` apenas executa `func` e configura o estado de espera (`isThrottled = true`). 2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos o contexto e os argumentos são igualmente importante e devem ser memorizado. Nós precisamos deles simultaneamente reproduzir a chamada. 3. Depois `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivemos ignorado as chamadas, `wrapper` é executado com os últimos argumentos e contexto memorizados. From 08b2eb7ce913fe15d455eefacd03bca5f24f62b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:01:02 +0100 Subject: [PATCH 048/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 2ea4d8d77..e4b72d6e6 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -32,7 +32,7 @@ function throttle(func, ms) { Uma chamada de `throttle(func, ms)` retorna `wrapper`. 1. Durante a primeira chamada, o `wrapper` apenas executa `func` e configura o estado de espera (`isThrottled = true`). -2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos o contexto e os argumentos são igualmente importante e devem ser memorizado. Nós precisamos deles simultaneamente reproduzir a chamada. +2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos, o contexto e os argumentos, são igualmente importante e devem ser memorizados. Nós precisamos deles simultaneamente para reproduzir a chamada. 3. Depois `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivemos ignorado as chamadas, `wrapper` é executado com os últimos argumentos e contexto memorizados. O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos executar o `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reconfigurá-lo. From 94d26d649b8b6f3ce47b3da3047c4c5d757490da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:01:21 +0100 Subject: [PATCH 049/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 448ac45f4..c9f425322 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -14,7 +14,7 @@ Aqui está o código, e a seguir a sua explicação: ```js run function slow(x) { - // pode exigir um trabalho intensivo por parte da CPU + // pode existir um trabalho intensivo por parte da CPU aqui alert(`Called with ${x}`); return x; } From 42c670d1d167d4b457c86c60a038c5477989a324 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:02:19 +0100 Subject: [PATCH 050/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index e4b72d6e6..94e824b93 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -33,6 +33,6 @@ Uma chamada de `throttle(func, ms)` retorna `wrapper`. 1. Durante a primeira chamada, o `wrapper` apenas executa `func` e configura o estado de espera (`isThrottled = true`). 2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos, o contexto e os argumentos, são igualmente importante e devem ser memorizados. Nós precisamos deles simultaneamente para reproduzir a chamada. -3. Depois `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivemos ignorado as chamadas, `wrapper` é executado com os últimos argumentos e contexto memorizados. +3. Depois que `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivermos chamadas ignoradas , o `wrapper` é executado com os últimos argumentos e contexto memorizados. O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos executar o `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reconfigurá-lo. From 30ae0a0c9ef3622a52b6330bdc1d4af0aa970ad8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:03:55 +0100 Subject: [PATCH 051/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 2991ce0af..bca9077cb 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -6,7 +6,7 @@ importance: 5 Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorna um encapsulador. -Quando é chamada várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. +Quando for chamado várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. A diferença com debounce é que é um decorador completamente diferente: - `debounce` executa a função uma vez depois do período de "espera". Boa para o processamento final do resultado. From 3265629bff3756d0925c540d6e6dd8a3e1856860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:04:20 +0100 Subject: [PATCH 052/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index bca9077cb..9ad509634 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -8,7 +8,7 @@ Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorna um encap Quando for chamado várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. -A diferença com debounce é que é um decorador completamente diferente: +A diferença de debounce é que é um decorador completamente diferente: - `debounce` executa a função uma vez depois do período de "espera". Boa para o processamento final do resultado. - `throttle` executa-o não mais frequentemente do que no tempo `ms` determinado. From 72676789b14a57b0632b0f0f9ed5866a6b350de5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:04:54 +0100 Subject: [PATCH 053/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 9ad509634..7e6388122 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -9,7 +9,7 @@ Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorna um encap Quando for chamado várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. A diferença de debounce é que é um decorador completamente diferente: -- `debounce` executa a função uma vez depois do período de "espera". Boa para o processamento final do resultado. +- `debounce` executa a função uma vez depois do período de "espera". Boa para processar o resultado final. - `throttle` executa-o não mais frequentemente do que no tempo `ms` determinado. Em outras palavras, `throttle` é como uma secretária que aceita chamadas de telefone, mas incomonda o chefe (chama `f` atual) não mais do que uma vez por`ms` milissegundos. From f3e93b3ee26077ad59757b1b065f01b183fe8ec5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:05:13 +0100 Subject: [PATCH 054/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 7e6388122..e347cff0a 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -10,7 +10,7 @@ Quando for chamado várias vezes, ela passa a chamada para `f` no máximo uma ve A diferença de debounce é que é um decorador completamente diferente: - `debounce` executa a função uma vez depois do período de "espera". Boa para processar o resultado final. -- `throttle` executa-o não mais frequentemente do que no tempo `ms` determinado. +- `throttle` não é executada mais do que uma vez em `ms` de tempo. Boa para atualizações regulares que não sejam num intervalo de tempo pequeno. Em outras palavras, `throttle` é como uma secretária que aceita chamadas de telefone, mas incomonda o chefe (chama `f` atual) não mais do que uma vez por`ms` milissegundos. From b5625b9e42126acb8a2240a1227f49bccb82e7e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:05:32 +0100 Subject: [PATCH 055/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index e347cff0a..47dde5210 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -12,7 +12,7 @@ A diferença de debounce é que é um decorador completamente diferente: - `debounce` executa a função uma vez depois do período de "espera". Boa para processar o resultado final. - `throttle` não é executada mais do que uma vez em `ms` de tempo. Boa para atualizações regulares que não sejam num intervalo de tempo pequeno. -Em outras palavras, `throttle` é como uma secretária que aceita chamadas de telefone, mas incomonda o chefe (chama `f` atual) não mais do que uma vez por`ms` milissegundos. +Em outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas incomonda o chefe (chama a `f` atual) não mais do que uma vez por`ms` milissegundos. Vamos verificar a aplicação na vida real para melhor entender esse requesito e ver de onde ela vem. From ed8f906069bb8f3bd32871b4ca9b6c195452dbff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:05:48 +0100 Subject: [PATCH 056/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index c9f425322..44c7dcae2 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -27,7 +27,7 @@ function cachingDecorator(func) { return cache.get(x); // retorne-o } - let result = func(x); // caso não estiver, chame a func + let result = func(x); // se não estiver, chame func cache.set(x, result); // e faz cache (lembrar) do resultado return result; From 045b95590a48870a828f2d416bd641ae4bd0db2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:06:06 +0100 Subject: [PATCH 057/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 47dde5210..0bf18bc39 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -14,7 +14,7 @@ A diferença de debounce é que é um decorador completamente diferente: Em outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas incomonda o chefe (chama a `f` atual) não mais do que uma vez por`ms` milissegundos. -Vamos verificar a aplicação na vida real para melhor entender esse requesito e ver de onde ela vem. +Vamos verificar a aplicação na vida real para melhor compreender esse requesito e ver de onde ele vem. **Por exemplo, queremos rastrear os movimentos do mouse** From a0fe4a048637a6cdf20a664d45fc27609dbd6f05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:06:24 +0100 Subject: [PATCH 058/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 0bf18bc39..080ed10e5 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -16,7 +16,7 @@ Em outras palavras, `throttle` é como uma secretária que aceita chamadas telef Vamos verificar a aplicação na vida real para melhor compreender esse requesito e ver de onde ele vem. -**Por exemplo, queremos rastrear os movimentos do mouse** +**Por exemplo, queremos rastrear movimentos do rato** Em um browser nós podemos configurar uma função para executar em todo movimento do mouse e receber a localização do ponteiro conforme ele se move. Durante o uso constante do mouse, esta função geralmente é executada com muita frequência, pode ser algo como 100 vezes por segundo (a cada 10 ms). **Gostariamos de atualizar algumas informações na página web sempre que o ponteiro se mover.** From 3d3181410d9819174fe1a15832cdc8c0149d99be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:06:58 +0100 Subject: [PATCH 059/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 080ed10e5..93e7314fd 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -18,7 +18,7 @@ Vamos verificar a aplicação na vida real para melhor compreender esse requesit **Por exemplo, queremos rastrear movimentos do rato** -Em um browser nós podemos configurar uma função para executar em todo movimento do mouse e receber a localização do ponteiro conforme ele se move. Durante o uso constante do mouse, esta função geralmente é executada com muita frequência, pode ser algo como 100 vezes por segundo (a cada 10 ms). +Num navegador, nós podemos configurar uma função para ser executada a cada movimento do rato e receber a localização do ponteiro à medida que ele se move. Num período de uso constante do rato, esta função geralmente é executada com muita frequência, pode ser algo como 100 vezes por segundo (a cada 10 ms). **Gostariamos de atualizar algumas informações na página web sempre que o ponteiro se mover.** A atualização da função `update()` é uma tarefa muito pesada de se fazer em todo micro-movimento. Também não há sentido em fazer isso mais do que uma vez por 100ms. From 2f07e4b8e84c0dff8c800295f1da8a26f8e480c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:07:42 +0100 Subject: [PATCH 060/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 93e7314fd..b60d8f89f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -19,7 +19,7 @@ Vamos verificar a aplicação na vida real para melhor compreender esse requesit **Por exemplo, queremos rastrear movimentos do rato** Num navegador, nós podemos configurar uma função para ser executada a cada movimento do rato e receber a localização do ponteiro à medida que ele se move. Num período de uso constante do rato, esta função geralmente é executada com muita frequência, pode ser algo como 100 vezes por segundo (a cada 10 ms). -**Gostariamos de atualizar algumas informações na página web sempre que o ponteiro se mover.** +**Gostaríamos de atualizar alguma informação na página web sempre que o ponteiro se mover.** A atualização da função `update()` é uma tarefa muito pesada de se fazer em todo micro-movimento. Também não há sentido em fazer isso mais do que uma vez por 100ms. From bf58b55ed75f7f1ded772343c7edaa742eb607e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:08:39 +0100 Subject: [PATCH 061/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index b60d8f89f..c7199bc2f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -21,7 +21,7 @@ Vamos verificar a aplicação na vida real para melhor compreender esse requesit Num navegador, nós podemos configurar uma função para ser executada a cada movimento do rato e receber a localização do ponteiro à medida que ele se move. Num período de uso constante do rato, esta função geralmente é executada com muita frequência, pode ser algo como 100 vezes por segundo (a cada 10 ms). **Gostaríamos de atualizar alguma informação na página web sempre que o ponteiro se mover.** -A atualização da função `update()` é uma tarefa muito pesada de se fazer em todo micro-movimento. Também não há sentido em fazer isso mais do que uma vez por 100ms. +A função de atualização `update()` é muito pesada de se fazer a cada micro-movimento. Também não faz sentido executar isso mais de uma vez por 100ms. Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executar em cada movimento de mouse ao invés do `update()` original. O decorador será chamada sempre, porém o `update()` será chamado no máximo uma vez por 100ms. From 3303ae5e04b7afc5b7be200c2db9718701300f67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:09:04 +0100 Subject: [PATCH 062/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index c7199bc2f..5a139cdf9 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -23,7 +23,7 @@ Num navegador, nós podemos configurar uma função para ser executada a cada mo A função de atualização `update()` é muito pesada de se fazer a cada micro-movimento. Também não faz sentido executar isso mais de uma vez por 100ms. -Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executar em cada movimento de mouse ao invés do `update()` original. O decorador será chamada sempre, porém o `update()` será chamado no máximo uma vez por 100ms. +Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executada a cada movimento de rato ao invés da `update()` original. O decorador será chamado com frequência, porém `update()` será chamada no máximo uma vez por 100ms. Visualmente, ela parecerá com algo como isso: From fb1db916118f3b33e98901bba30c36de061554de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:09:24 +0100 Subject: [PATCH 063/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 5a139cdf9..21371fd8c 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -25,7 +25,7 @@ A função de atualização `update()` é muito pesada de se fazer a cada micro- Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executada a cada movimento de rato ao invés da `update()` original. O decorador será chamado com frequência, porém `update()` será chamada no máximo uma vez por 100ms. -Visualmente, ela parecerá com algo como isso: +Visualmente, se parecerá com algo assim: 1. Para o primeiro movimento do mouse a variante decorada passa a chamada para `update`. É importante, os usuários verem nossa reação aos seus movimentos imediatamente. 2. Assim ao mover o mouse, até `100ms` nada acontece. A variante decorada é ignora chamadas. From 0493aa4df0de20772b7269b592f6027eceaf1671 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:09:43 +0100 Subject: [PATCH 064/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 21371fd8c..20ac9c9b1 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -27,7 +27,7 @@ Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executada Visualmente, se parecerá com algo assim: -1. Para o primeiro movimento do mouse a variante decorada passa a chamada para `update`. É importante, os usuários verem nossa reação aos seus movimentos imediatamente. +1. Para o primeiro movimento do rato a variante decorada passa a chamada para `update`. É importante, o usuário vê a nossa reação aos seus movimentos imediatamente. 2. Assim ao mover o mouse, até `100ms` nada acontece. A variante decorada é ignora chamadas. 3. Ao final de `100ms` -- mais um `update` acontece com as últimas coordenadas. 4. Assim, finalmente, o mouse para em algum lugar. A variante decorada espera até `100ms` expirar e depois executa o `update` com as últimas coordinadas. Então, talvez o mais importante, a coordenadas finais do mouse são processadas. From 73f53ea7dbede8f597576325000633c4ff9afa9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:09:59 +0100 Subject: [PATCH 065/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 20ac9c9b1..3cb17a7e8 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -28,7 +28,7 @@ Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executada Visualmente, se parecerá com algo assim: 1. Para o primeiro movimento do rato a variante decorada passa a chamada para `update`. É importante, o usuário vê a nossa reação aos seus movimentos imediatamente. -2. Assim ao mover o mouse, até `100ms` nada acontece. A variante decorada é ignora chamadas. +2. Depois, ao mover do rato, até `100ms` nada acontece. A variante decorada ignora as chamadas. 3. Ao final de `100ms` -- mais um `update` acontece com as últimas coordenadas. 4. Assim, finalmente, o mouse para em algum lugar. A variante decorada espera até `100ms` expirar e depois executa o `update` com as últimas coordinadas. Então, talvez o mais importante, a coordenadas finais do mouse são processadas. From 741ff0375833d52a18f157ff98b32db1b1111638 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:11:11 +0100 Subject: [PATCH 066/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 44c7dcae2..84fd261a0 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -37,7 +37,7 @@ function cachingDecorator(func) { slow = cachingDecorator(slow); alert( slow(1) ); // slow(1) é cacheada e o resultado retornado -alert( "Again: " + slow(1) ); // slow(1) resultado retornado do cache +alert( "Again: " + slow(1) ); // slow(1) o resultado é retornado da cache alert( slow(2) ); // slow(2) é cacheada e o resultado retornado alert( "Again: " + slow(2) ); // slow(2) resultado retornado do cache From 049b00d6fa586478b118b85692e28e60e604539e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:11:32 +0100 Subject: [PATCH 067/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 3cb17a7e8..af521a07b 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -30,7 +30,7 @@ Visualmente, se parecerá com algo assim: 1. Para o primeiro movimento do rato a variante decorada passa a chamada para `update`. É importante, o usuário vê a nossa reação aos seus movimentos imediatamente. 2. Depois, ao mover do rato, até `100ms` nada acontece. A variante decorada ignora as chamadas. 3. Ao final de `100ms` -- mais um `update` acontece com as últimas coordenadas. -4. Assim, finalmente, o mouse para em algum lugar. A variante decorada espera até `100ms` expirar e depois executa o `update` com as últimas coordinadas. Então, talvez o mais importante, a coordenadas finais do mouse são processadas. +4. Continuando, finalmente, o rato pára em algum lugar. A variante decorada espera até `100ms` expirarem e depois executa o `update` com as últimas coordinadas. Então, talvez o mais importante, as coordenadas finais do rato são processadas. Um código de exemplo: From da7eff1f07d4e0a3ec5932eab8237eaaa1f86cd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Sat, 24 Jul 2021 12:27:44 +0100 Subject: [PATCH 068/138] Apply suggestions from code review Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/article.md | 141 +++++++++--------- 1 file changed, 71 insertions(+), 70 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 84fd261a0..ba3b09ea5 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -29,7 +29,7 @@ function cachingDecorator(func) { let result = func(x); // se não estiver, chame func - cache.set(x, result); // e faz cache (lembrar) do resultado + cache.set(x, result); // e faça a cache (lembre-se) do resultado return result; }; } @@ -40,37 +40,38 @@ alert( slow(1) ); // slow(1) é cacheada e o resultado retornado alert( "Again: " + slow(1) ); // slow(1) o resultado é retornado da cache alert( slow(2) ); // slow(2) é cacheada e o resultado retornado -alert( "Again: " + slow(2) ); // slow(2) resultado retornado do cache +alert( "Again: " + slow(2) ); // slow(2) o resultado é retornado da cache + ``` -No código acima `cachingDecorator` é um *decorador*: uma função especial que recebe outra função e altera seu comportamento. +No código acima `cachingDecorator` é um *decorador*: uma função especial que recebe outra função e altera o seu comportamento. -A ideia é que podemos chamar `cachingDecorator` para qualquer função, e ele retornará um encapsulador do cache. É ótimo, porque podemos ter muitas funções que poderiam usar essa funcionalidade, e tudo o que precisamos fazer é aplicar `cachingDecorator` a elas. +A ideia é que podemos chamar `cachingDecorator` com qualquer função, e ele retornará o encapsulador de cache. É ótimo, porque podemos ter muitas funções que poderiam usar essa funcionalidade, e tudo o que precisamos de fazer é aplicar `cachingDecorator` a elas. -Ao separar o cache do código principal da função, também mantemos o código principal símples. +Ao separar o cache do código principal da função, também mantemos o código principal mais simples. -Agora vamos entrar em detalhes de como ela funciona. +Agora, vamos entrar em detalhes de como isso funciona. -O resultado do `cachingDecorator(func)` é um "encapsulador": `function(x)` que "envolve" a chamada de `func(x)` dentro da lógica do cache: +O resultado do `cachingDecorator(func)` é um "encapsulador": `function(x)` que "envolve" a chamada de `func(x)` dentro duma lógica de cache: ![](decorator-makecaching-wrapper.svg) -Como podemos ver, o encapsulador retorna o resultado da `func(x)` "como é". A partir de um código de fora, a função `slow` encapsulada ainda faz o mesmo. Ela apenas teve o aspecto de cache adicionado ao seu comportamento. +Como podemos ver, o encapsulador retorna o resultado da `func(x)` "como ele é". A partir de um código exterior, a função `slow` encapsulada ainda faz o mesmo. Ela apenas teve o aspecto de cache adicionado ao seu comportamento. -Resumindo, existem outros benefícios de se usar um `cacheDecorator` separado ao invés de alterar o código do próprio `slow`: +Resumindo, existem muitos benefícios em usar um `cacheDecorator` separado ao invés de alterar o próprio código de `slow`: -- O `cacheDecorator` é reusável. Nós podemos aplicar-lo em outras funções. -- A lógica de cache está separada, ela não adicionou a complexidade do `slow` (se havia alguma). -- Nós podemos combinar vários decoradores se for necessário (outros decoradores irão seguir). +- O `cacheDecorator` é reusável. Nós o podemos aplicar a outras funções. +- A lógica de cache está separada, ela não adicionou complexidade a `slow` (se havia alguma). +- Nós podemos combinar vários decoradores se necessário (outros decoradores virão a seguir). ## Usando "func.call" para o contexto -O decorador de cache mencionado acima é adequado para trabalhar com os métodos de objeto. +O decorador de cache mencionado acima não é adequado para trabalhar com os métodos de objeto. -Por exemplo, no código abaixo `worker.slow()` para funcionar após a decoração: +Por exemplo, no código abaixo `worker.slow()` pára de funcionar após a decoração: ```js run -// vamos fazer o cache do worker.slow +// vamos fazer o cache de worker.slow let worker = { someMethod() { return 1; @@ -100,27 +101,27 @@ function cachingDecorator(func) { alert( worker.slow(1) ); // o método original funciona -worker.slow = cachingDecorator(worker.slow); // agora faz o cache dele +worker.slow = cachingDecorator(worker.slow); // agora faça o cache dele *!* alert( worker.slow(2) ); // Uoops! Erro: não é possível ler a propriedade 'someMethod' de undefined */!* ``` -O erro ocorre na linha `(*)` que tenta acessar `this.someMethod` e falha. Consegues perceber o porquê? +O erro ocorre na linha `(*)` que tenta acessar `this.someMethod` e falha. Consegue perceber porquê? A razão é que o encapsulador chama a função original como `func(x)` na linha `(**)`. E, quando invocada dessa maneira, a função recebe `this = undefined`. -Nós obervariamos um sintoma similar se tentássemos executar: +Nós observaríamos um sintoma similar se tentássemos executar: ```js let func = worker.slow; func(2); ``` -Então, o encapsulador passa a chamada para o método da função original, mas sem o contexto `this`. Daí o erro. +Assim, o encapsulador passa a chamada para o método original, mas sem o contexto `this`. Daí o erro. -Vamos resolver isso. +Vamos corrigir isso. Existe um método de função embutido [func.call(context, ...args)](mdn:js/Function/call) que permite chamar uma função explicitamente configurando o `this`. @@ -130,17 +131,17 @@ A sintáxe é: func.call(context, arg1, arg2, ...) ``` -Ele executa `func` provendo o primeiro argumento como `this`, e os próximos como argumentos. +Ele executa `func` provendo o primeiro argumento como `this`, e os seguintes como argumentos. -Para simplificar, essas duas chamadas fazem quase a mesma: +Para simplificar, essas duas chamadas fazem quase o mesmo: ```js func(1, 2, 3); func.call(obj, 1, 2, 3) ``` -Ambos eles chamam `func` com argumentos `1`, `2` e `3`. A única diferença é que `func.call` também configura o `this` para `obj`. +Ambas chamam `func` com argumentos `1`, `2` e `3`. A única diferença é que `func.call` também configura o `this` para `obj`. -Como um exemple, no código abaixo chamamos `sayHi` no contexto de um objeto diferente: `sayHi.call(user)` executa `sayHi` provendo `this=user`, e a próxima linha configura `this=admin`: +Como um exemplo, no código abaixo chamamos `sayHi` num contexto de diferentes objetos: `sayHi.call(user)` executa `sayHi` provendo `this=user`, e na linha seguinte configura `this=admin`: ```js run function sayHi() { @@ -155,7 +156,7 @@ sayHi.call( user ); // John sayHi.call( admin ); // Admin ``` -E aqui usamos `call` para chamar `say` com o contexto dado e frase (phrase): +E aqui usamos `call` para chamar `say` com o contexto e frase dados: ```js run function say(phrase) { @@ -168,7 +169,7 @@ let user = { name: "John" }; say.call( user, "Hello" ); // John: Hello ``` -Em nosso caso, podemos usar `call` no encapsulador para passar o contexto para a função original: +No nosso caso, podemos usar `call` no encapsulador para passar o contexto para a função original: ```js run let worker = { @@ -198,8 +199,8 @@ function cachingDecorator(func) { worker.slow = cachingDecorator(worker.slow); // agora faça o cache -alert( worker.slow(2) ); // works -alert( worker.slow(2) ); // works, não chama o original (cacheado) +alert( worker.slow(2) ); // funciona +alert( worker.slow(2) ); // funciona, não chama a original (cacheado) ``` Agora tudo está bem. @@ -208,38 +209,38 @@ Para deixar tudo claro, vamos analisar mais profundamente como `this` é passado 1. Depois da decoração `worker.slow` é agora o encapsulador `function (x) { ... }`. 2. Então quando `worker.slow(2)` é executado, o encapsulador recebe `2` como um argumento e `this=worker` (é o objeto antes do ponto). -3. Dentro do encapsulador, assumindo que o resultado não está cacheado, `func.call(this, x)` passa o `this` (`=worker`) atual e o argumento atual (`=2`) para o método original. +3. Dentro do encapsulador, assumindo que o resultado não está ainda cacheado, `func.call(this, x)` passa o `this` (`=worker`) atual e o argumento atual (`=2`) para o método original. -## Passado vários argumentos +## Passando vários argumentos -Agora, vamos fazer `cachingDecorator` mais universal. Até ao momento ele estava somente funcionando com funções com um único argumento. +Agora, vamos fazer `cachingDecorator` ainda mais universal. Até ao momento ele estava somente funcionando com funções com um único argumento. -Agora como fazer cache de vários argumentos `worker.slow` método? +Agora como fazer cache de vários argumentos no método `worker.slow` ? ```js let worker = { slow(min, max) { - return min + max; // assustador devorador de CPU é assumido + return min + max; // é assumido um assustador devorador de CPU } }; -// deveria lembrar de chamadas com o mesmo argumento +// deveria se lembrar de chamadas com o mesmo argumento worker.slow = cachingDecorator(worker.slow); ``` Temos dois problemas para resolver aqui. -Primeiro é, como usar ambos argumentos `min` e `max` para a chave no mapa de `cache`. Anteriormente, para um único argumento `x` poderiamos apenas `cache.set(x, result)` para guardar o resultado e `cache.get(x)` para recuperá-lo. Porém agora precisamos lembrar o resultado para uma *combinação de argumentos* `(min,max)`. O `Map` nativo recebe um único valor somente como a chave. +Primeiro, é como usar ambos os argumentos `min` e `max` com uma chave no mapa de `cache`. Anteriormente, para um único argumento `x` poderiamos apenas `cache.set(x, result)` para guardar o resultado e `cache.get(x)` para recuperá-lo. Porém agora precisamos de nos lembrar do resultado para uma *combinação de argumentos* `(min,max)`. O `Map` nativo recebe somente um único valor como chave. Existem muitas soluções possíveis: -1. Implemente uma nova (ou use um terceiro) estrutura de dados parecida ao mapa que seja mais versátil e que permita várias chaves. -2. Usar mapas aninhados: `cache.set(min)` será um `Map` que armazena o par `(max, result)`. Então, podemos receber `result` como `cache.get(min).get(max)`. -3. Junte dois valores dentro de um. Em nosso caso particular podemos apenas usar uma string `"min,max"` como a chave do `Map`. Para flexibilizar, podemos permitir prover uma *função de hashing* para o decorador, que sabem fazer um valor a partir de muitos. +1. Implemente uma nova (ou use a de um terceiro fornecedor) estrutura de dados parecida ao mapa que seja mais versátil e que permita várias chaves. +2. Use mapas aninhados: `cache.set(min)` será um `Map` que armazena o par `(max, result)`. Então, podemos receber `result` como `cache.get(min).get(max)`. +3. Junte dois valores em um. No nosso caso particular podemos apenas usar uma string `"min,max"` como a chave do `Map`. Para flexibilidade, podemos permitir prover uma *função de hashing* ao decorador, que saiba como fazer um valor a partir de muitos. -Para muitas aplicações práticas, a terceira variante é boa o suficiente, então vamos segui-la. +Para muitas aplicações práticas, a terceira variante é suficientemente boa, então vamos segui-la. -Também precisamos passar não apenas o `x`, mas todos argumentos em `func.call`. Vamos recapitular que em uma `function()` podemos receber um pseudo-array de seus argumentos como `arguments`, então `func.call(this, x)` deveria ser substituido com `func.call(this, ...arguments)`. +Também precisamos de passar não apenas o `x`, mas todos argumentos em `func.call`. Vamos recapitular que em uma `function()` podemos receber um pseudo-array de seus argumentos como `arguments`, então `func.call(this, x)` deveria ser substituida por `func.call(this, ...arguments)`. Agora vamos condensar tudo dentro do mais poderoso `cachingDecorator`: @@ -277,19 +278,19 @@ function hash(args) { worker.slow = cachingDecorator(worker.slow, hash); alert( worker.slow(3, 5) ); // works -alert( "Again " + worker.slow(3, 5) ); // mesmo (cacheado) +alert( "Again " + worker.slow(3, 5) ); // o mesmo (cacheado) ``` -Agora ele funciona com qualquer número de argumentos (embora a função hash também precise ser ajustada para permitir qualquer número de argumentos. Um maneira interessante para lidar com isto será coberto abaixo). +Agora ele funciona com qualquer número de argumentos (embora a função hash também precise de ser ajustada para permitir qualquer número de argumentos. Um maneira interessante de lidar com isso será coberta abaixo). Existem duas mudanças: -- Na linha `(*)` ele chama `hash` para criar uma única chave a partir de `arguments`. Agora nós podemos usar uma única função "joining" que transforma os argumentos `(3, 5)` na chave `"3,5"`. Casos mais complexos podem requerer outras funções de hashing. -- Então `(**)` usa `func.apply` para passar ambos o contexto e todos argumentos que o encapsulador recebeu (não importa quantos) para função original. +- Na linha `(*)` ele chama `hash` para criar uma única chave a partir de `arguments`. Aqui nós usamos uma única função "de concatenação" que transforma os argumentos `(3, 5)` na chave `"3,5"`. Casos mais complexos podem requerer outras funções de hashing. +- Então `(**)` usa `func.apply` para passar ambos o contexto e todos argumentos que o encapsulador recebeu (não importa quantos) para a função original. ## func.apply -Ao invés de `func.call(this, ...arguments)` poderiamos usar `func.apply(this, arguments)`. +Ao invés de `func.call(this, ...arguments)` poderíamos usar `func.apply(this, arguments)`. A sintáxe do método embutido [func.apply](mdn:js/Function/apply) é: @@ -297,9 +298,9 @@ A sintáxe do método embutido [func.apply](mdn:js/Function/apply) é: func.apply(context, args) ``` -Ele executa o `func` configurando `this=context` e usando um objeto `args` parecido com array como a lista de argumentos. +Ele executa `func` configurando `this=context` e usando um objeto parecido com array `args` como lista de argumentos. -O única diferença de sintáxe entre `call` e `apply` é que `call` espera uma lista de argumentos, enquanto `apply` pega um objeto parecido com um array com eles. +A única diferença de sintáxe entre `call` e `apply` é que `call` espera uma lista de argumentos, enquanto `apply` recebe um objeto parecido com um array com eles. Então essas duas chamadas são quase equivalentes: @@ -308,14 +309,14 @@ func.call(context, ...args); func.apply(context, args); ``` -Eles performam a mesma chamada de `func` com o contexto e argumentos dado. +Eles executam a mesma chamada de `func` com o contexto e argumentos dados. Há somente uma diferença sútil em relação a `args`: -- A sintáxe spread(espalhar) `...` permite passar `args` *iterável* como a lista para `call`. +- A sintaxe spread (espalhar) `...` permite passar `args` *iterável* como a lista para `call`. - O `apply` aceita somente `args` *parecido com array (array-like)*. -...E para objetos que são ambos iterável e parecido a array, tal como um array real, podemos usar qualquer um deles, porém `apply` irá provavelmente ser o mais rápido, porque a maioria dos motores de JavaScript internamente otimizam ele melhor. +...E para objetos que são ambos iteráveis e parecidos com array, tal como um verdadeiro array, podemos usar qualquer um deles, porém `apply` irá provavelmente ser o mais rápido, porque a maioria dos interpretadores de JavaScript internamente otimizam ele melhor. Passar todos argumentos junto com o contexto para outra função é chamado de *encaminhamento de chamada*. @@ -329,7 +330,7 @@ let wrapper = function() { Quando um código externo chama tal `encapsulador`, ele é indistinguível da chamada da função original `func`. -## Emprestando um método [#emprestando-método] +## Emprestando um método [#method-borrowing] Agora vamos fazer mais uma pequena melhoria na função de hashing: @@ -339,9 +340,9 @@ function hash(args) { } ``` -A partir de agora, ele funciona somente sobre dois argumentos. Seria melhor se pudesse colar qualquer número de `args`. +Até agora, ele funciona somente com dois argumentos. Seria melhor se pudesse colar qualquer número de `args`. -A solução natural seria melhor usar [arr.join](mdn:js/Array/join) método: +A solução natural seria usar o método [arr.join](mdn:js/Array/join) : ```js function hash(args) { @@ -349,9 +350,9 @@ function hash(args) { } ``` -...Infelizmente, isso não funcionará. Porque estamos chamando `hash(arguments)`, e o objeto `arguments` é tanto iterável e parecido com array, mas não um real array. +...Infelizmente, isso não funcionará. Porque estamos chamando `hash(arguments)`, e o objeto `arguments` é tanto iterável como parecido com array, mas não um verdadeiro array. -Portanto, chamar `join` nele falharia, assim como podemos ver abaixo: +Portanto, chamar `join` sobre ele falharia, assim como podemos ver abaixo: ```js run function hash() { @@ -363,7 +364,7 @@ function hash() { hash(1, 2); ``` -Ainda assim, há uma maneira fácil de usar a combinação de array +Ainda assim, há uma maneira fácil de usar a combinação de array: ```js run function hash() { @@ -375,33 +376,33 @@ function hash() { hash(1, 2); ``` -A técnica é chamada *emprestando método*. +O truque é chamado de *emprestando método*. -Pegamos (emprestamos) um método de combinação de um array comum (`[].join()`) e usar `[].join.call` para executá-lo no contexto de `arguments`. +Pegamos (emprestamos) um método de combinação de um array comum (`[].join()`) e usamos `[].join.call` para executá-lo no contexto de `arguments`. -Por quê ele funciona? +Porque ele funciona? É porque o algoritmo interno do método nativo `arr.join(glue)` é muito símples. Retirado da especificação quase "como-é": -1. Deixa a `glue` ser o primeiro argumento ou, se não houver argumentos, então uma vírgula `","`. -2. Deixa `result` ser uma string vázia. -3. Acrescentar `this[0]` ao `result`. -4. Acrescentar `glue` e `this[1]`. -5. Acrescentar `glue` e `this[2]`. -6. ...Faça isso até os itens `this.length` sejam colados. +1. Deixe `glue` ser o primeiro argumento ou, se não houver argumentos, então uma vírgula `","`. +2. Deixe `result` ser uma string vazia. +3. Acrescente `this[0]` ao `result`. +4. Acrescente `glue` e `this[1]`. +5. Acrescente `glue` e `this[2]`. +6. ...Faça isso até que `this.length` itens estejam colados. 7. Retorne `result`. -Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc tudo junto. Foi intecionalmente escrito em uma maneira que permite qualquer objeto parecido com array `this` (não é uma conscidência, vários métodos seguem esta prática). Aí está o porquê que isto também funciona com `this=arguments`. +Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc juntos. Foi intecionalmente escrito de uma maneira que permita qualquer objeto parecido com array `this` (não é uma conscidência, muitos métodos seguem esta prática). Aí está o porque isto também funciona com `this=arguments`. -## Decoradores e propriedades de funções +## Propriedades de decoradores e de funções -É geralmente seguro substituir uma função or um método por um decorado, exceto para uma pequena coisa. Se a função original tiver propriedades nela, tipo `func.calledCount` ou que seja, a função decorada não as forncerá. Por que ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. +É geralmente seguro substituir uma função ou um método por outro decorado, exceto por uma pequena coisa. Se a função original tiver propriedades nela, como `func.calledCount` ou qualquer outra, a função decorada não as forncerá. Por que ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. -Alguns decoradores podem fornecer suas próprias propriedades. Exemplo, um decorador pode contar quantas vezes uma função foi invocada e quanto tempo ela levou, e expor essas informações atráves das propriedades do encapsulador. +Alguns decoradores podem fornecer suas próprias propriedades. Exemplo, um decorador pode contar quantas vezes uma função foi invocada e quanto tempo ela levou, e expor essa informação atráves das propriedades do encapsulador. -Existe uma maneira de criar decoradores que mantém o acesso às propriedades da função, mas isto requer usar um objeto `Proxy` especial para encapsular uma função. Discutiremos isso depois no artigo . +Existe uma maneira de criar decoradores que mantêm o acesso às propriedades da função, mas isto requer o uso de um objeto `Proxy` especial para encapsular uma função. Discutiremos isso depois no artigo . ## Resumindo From f98ef4bad3bb8a8db79218cb21f75db6fe34b3fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Sat, 24 Jul 2021 12:50:06 +0100 Subject: [PATCH 069/138] translate to portuguese debounce.view/index.html --- .../03-debounce/debounce.view/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html index e3b4d5842..54bd63156 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html @@ -1,18 +1,18 @@ -Function handler is called on this input: +A função handler é chamada neste campo de entrada:

-Debounced function debounce(handler, 1000) is called on this input: +A função debunciada debounce(handler, 1000) é chamada neste campo de entrada:

- + \ No newline at end of file + From 034ee040c243ecf283d80d982f82465f19fb6aea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:53:14 +0100 Subject: [PATCH 079/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 4dd21a397..e43d315f9 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -44,7 +44,7 @@ Você vê? A segunda entrada chama a função de debounce, assim o seu conteúdo Portanto, `debounce` é uma excelente maneira de processar uma sequência de eventos: seja ela uma sequência de teclas pressionadas, movimentos do rato ou alguma outra coisa. -Ela espera o tempo dado depois da última chamada, e depois executa sua tarefa, que pode processar o resultado. +Ela espera o tempo dado depois da última chamada, e depois executa a sua tarefa, que pode processar o resultado. A tarefa é implementar o decorador `debounce`. From 1f12b61f8904fe70be06d2d535ac63c306e1aad1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:53:24 +0100 Subject: [PATCH 080/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index e43d315f9..6eec95db1 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -48,4 +48,4 @@ Ela espera o tempo dado depois da última chamada, e depois executa a sua tarefa A tarefa é implementar o decorador `debounce`. -Dica: são apenas uma poucas linhas se você pensar sobre ela :) +Dica: são apenas uma poucas linhas se você estiver a pensar nisso :) From fa16310711f69e8966ebf0fc3a8a0186b723e2e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:53:34 +0100 Subject: [PATCH 081/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 94e824b93..15e1bfdfc 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -32,7 +32,7 @@ function throttle(func, ms) { Uma chamada de `throttle(func, ms)` retorna `wrapper`. 1. Durante a primeira chamada, o `wrapper` apenas executa `func` e configura o estado de espera (`isThrottled = true`). -2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos, o contexto e os argumentos, são igualmente importante e devem ser memorizados. Nós precisamos deles simultaneamente para reproduzir a chamada. +2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos, o contexto e os argumentos, são igualmente importantes e devem ser memorizados. Nós precisamos deles simultaneamente para reproduzir a chamada. 3. Depois que `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivermos chamadas ignoradas , o `wrapper` é executado com os últimos argumentos e contexto memorizados. O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos executar o `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reconfigurá-lo. From 1eab0165c647230b1ffe5d0620d496725c92494a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:53:43 +0100 Subject: [PATCH 082/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index af521a07b..571a23a8f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -10,7 +10,7 @@ Quando for chamado várias vezes, ela passa a chamada para `f` no máximo uma ve A diferença de debounce é que é um decorador completamente diferente: - `debounce` executa a função uma vez depois do período de "espera". Boa para processar o resultado final. -- `throttle` não é executada mais do que uma vez em `ms` de tempo. Boa para atualizações regulares que não sejam num intervalo de tempo pequeno. +- `throttle` não é executada mais do que uma vez em `ms` de tempo. Boa para atualizações regulares que não sejam efectuadas num intervalo de tempo pequeno. Em outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas incomonda o chefe (chama a `f` atual) não mais do que uma vez por`ms` milissegundos. From d5c26ae9018ca8081b7e8fc7a7f3fba460b8bd4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:53:51 +0100 Subject: [PATCH 083/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 15e1bfdfc..703edf526 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -35,4 +35,4 @@ Uma chamada de `throttle(func, ms)` retorna `wrapper`. 2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos, o contexto e os argumentos, são igualmente importantes e devem ser memorizados. Nós precisamos deles simultaneamente para reproduzir a chamada. 3. Depois que `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivermos chamadas ignoradas , o `wrapper` é executado com os últimos argumentos e contexto memorizados. -O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos executar o `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reconfigurá-lo. +O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos de executar `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reiniciá-lo. From b4925006dd64232549f5e2176be1c94fddd97ed9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:54:01 +0100 Subject: [PATCH 084/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 571a23a8f..90bf055b2 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -12,7 +12,7 @@ A diferença de debounce é que é um decorador completamente diferente: - `debounce` executa a função uma vez depois do período de "espera". Boa para processar o resultado final. - `throttle` não é executada mais do que uma vez em `ms` de tempo. Boa para atualizações regulares que não sejam efectuadas num intervalo de tempo pequeno. -Em outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas incomonda o chefe (chama a `f` atual) não mais do que uma vez por`ms` milissegundos. +Por outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas incomonda o chefe (chama a `f` atual) não mais do que uma vez por`ms` milissegundos. Vamos verificar a aplicação na vida real para melhor compreender esse requesito e ver de onde ele vem. From f483b32e79134c59cee44ea760b376b3169bcc7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:54:10 +0100 Subject: [PATCH 085/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 90bf055b2..c84e44afd 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -27,7 +27,7 @@ Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executada Visualmente, se parecerá com algo assim: -1. Para o primeiro movimento do rato a variante decorada passa a chamada para `update`. É importante, o usuário vê a nossa reação aos seus movimentos imediatamente. +1. Para o primeiro movimento do rato a variante decorada passa a chamada para `update`. É importante que o usuário veja a nossa reação aos seus movimentos imediatamente. 2. Depois, ao mover do rato, até `100ms` nada acontece. A variante decorada ignora as chamadas. 3. Ao final de `100ms` -- mais um `update` acontece com as últimas coordenadas. 4. Continuando, finalmente, o rato pára em algum lugar. A variante decorada espera até `100ms` expirarem e depois executa o `update` com as últimas coordinadas. Então, talvez o mais importante, as coordenadas finais do rato são processadas. From 11f826b455637135a9cff9a4fac4cbd34b44a5fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:54:18 +0100 Subject: [PATCH 086/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 296674b1c..1b8abcfc1 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -341,7 +341,7 @@ function hash(args) { } ``` -Até agora, ele funciona somente com dois argumentos. Seria melhor se pudesse colar qualquer número de `args`. +Até agora, ela funciona somente com dois argumentos. Seria melhor se pudesse colar qualquer número de `args`. A solução natural seria usar o método [arr.join](mdn:js/Array/join) : From 833f4b0130cd6ff500cf87e2bfbca06d19f37d9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:54:27 +0100 Subject: [PATCH 087/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 1b8abcfc1..dfd9f43b1 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -379,7 +379,7 @@ hash(1, 2); O truque é chamado de *emprestando método*. -Pegamos (emprestamos) um método de combinação de um array comum (`[].join()`) e usamos `[].join.call` para executá-lo no contexto de `arguments`. +Pegamos (emprestamos) um método de concatenação de um array comum (`[].join()`) e usamos `[].join.call` para executá-lo no contexto de `arguments`. Porque ele funciona? From 8f77aa31b3133472792cbe6631128b9f79c9c74d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:54:36 +0100 Subject: [PATCH 088/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index dfd9f43b1..8b0fbb79e 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -395,7 +395,7 @@ Retirado da especificação quase "como-é": 6. ...Faça isso até que `this.length` itens estejam colados. 7. Retorne `result`. -Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc juntos. Foi intecionalmente escrito de uma maneira que permita qualquer objeto parecido com array `this` (não é uma conscidência, muitos métodos seguem esta prática). Aí está o porque isto também funciona com `this=arguments`. +Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc juntos. Foi intencionalmente escrito de uma maneira que permita qualquer objeto parecido com array `this` (não é uma coincidência, muitos métodos seguem esta prática). Aí está o porque isto também funciona com `this=arguments`. ## Propriedades de decoradores e de funções From 8865725e656f7df75b13ccf6b44f5fcedf613147 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:54:46 +0100 Subject: [PATCH 089/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 8b0fbb79e..1524b1c02 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -399,7 +399,7 @@ Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc j ## Propriedades de decoradores e de funções -É geralmente seguro substituir uma função ou um método por outro decorado, exceto por uma pequena coisa. Se a função original tiver propriedades nela, como `func.calledCount` ou qualquer outra, a função decorada não as forncerá. Por que ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. +É geralmente seguro substituir uma função ou um método por outro decorados, exceto por uma pequena coisa. Se a função original tiver propriedades nela, como `func.calledCount` ou qualquer outra, a função decorada não as forncerá. Porque ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. Alguns decoradores podem fornecer suas próprias propriedades. Exemplo, um decorador pode contar quantas vezes uma função foi invocada e quanto tempo ela levou, e expor essa informação atráves das propriedades do encapsulador. From 1dad4e7bc27466758c9de4d6bc17cb101cca28aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:54:56 +0100 Subject: [PATCH 090/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 1524b1c02..fe2c15a41 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -426,4 +426,4 @@ let wrapper = function() { Também vimos um exemplo de *emprestimo de método* quando pegamos num método de um objeto e o chamamos (`call`) no contexto de outro objeto. É bem comum pegar em métodos de um array e aplicá-los aos argumentos. A alternativa é usar un objeto de parâmetros rest que seja um verdadeiro array. -Existem muitos decoradores por aí na selva. Verifique como bem você os recebeu ao resolver as tarefas deste capítulo. +Existem muitos decoradores por aí. Verifique como bem você os percebeu ao resolver as tarefas deste capítulo. From 843477272426231f69e9d98f9f89bc86eef5db4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:55:14 +0100 Subject: [PATCH 091/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index c84e44afd..2826be8d2 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -30,7 +30,7 @@ Visualmente, se parecerá com algo assim: 1. Para o primeiro movimento do rato a variante decorada passa a chamada para `update`. É importante que o usuário veja a nossa reação aos seus movimentos imediatamente. 2. Depois, ao mover do rato, até `100ms` nada acontece. A variante decorada ignora as chamadas. 3. Ao final de `100ms` -- mais um `update` acontece com as últimas coordenadas. -4. Continuando, finalmente, o rato pára em algum lugar. A variante decorada espera até `100ms` expirarem e depois executa o `update` com as últimas coordinadas. Então, talvez o mais importante, as coordenadas finais do rato são processadas. +4. Continuando, finalmente, o rato pára em algum lugar. A variante decorada espera até `100ms` expirarem e depois executa o `update` com as últimas coordenadas. Então, talvez o mais importante, as coordenadas finais do rato são processadas. Um código de exemplo: From 8e0dae47775d28f61cc84644706f68ca6be7dc0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:55:28 +0100 Subject: [PATCH 092/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index fe2c15a41..3adca49c0 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -278,7 +278,7 @@ function hash(args) { worker.slow = cachingDecorator(worker.slow, hash); -alert( worker.slow(3, 5) ); // works +alert( worker.slow(3, 5) ); // funciona alert( "Again " + worker.slow(3, 5) ); // o mesmo (cacheado) ``` From 2337bb91a9b44f75ec7ffdfe477a08bcd5c23136 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:56:21 +0100 Subject: [PATCH 093/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index 56b15123f..91f958340 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -16,7 +16,7 @@ f1000("test"); // exibe "test" depois de 1000ms Por favor note como uma função seta (arrow function) é usada aqui. Tal como sabemos, funções seta não têm seus próprios `this` e `arguments`, então `f.apply(this, arguments)` recebe `this` e `arguments` a partir do encapsulador. -Se passássemos uma função normal, `setTimeout` a chamaria sem argumentos nem `this=window` (assumindo que estávamos no browser). +Se passássemos uma função normal, `setTimeout` iria chamá-la sem argumentos nem `this=window` (assumindo que estávamos no browser). Ainda podemos passar o `this` certo atráves do uso de uma variável intermediador, porém é um pouco mais difícil: From c32f813d757996531d72edaa8d64b1ec8864b9bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 26 Jul 2021 23:56:38 +0100 Subject: [PATCH 094/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md index c0aab184e..66ed8c3a5 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/task.md @@ -17,7 +17,7 @@ function f(x) { let f1000 = delay(f, 1000); let f1500 = delay(f, 1500); -f1000("test"); // imprime "test" depois de 1000ms +f1000("test"); // exibe "test" depois de 1000ms f1500("test"); // exibe "test" depois de 1500ms ``` From bf26d67568b8d108c1a5ded5fbdbe5a5130df095 Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Tue, 27 Jul 2021 22:31:43 +0100 Subject: [PATCH 095/138] Add space for untranslated line. --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 3adca49c0..0e2295278 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -401,6 +401,8 @@ Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc j É geralmente seguro substituir uma função ou um método por outro decorados, exceto por uma pequena coisa. Se a função original tiver propriedades nela, como `func.calledCount` ou qualquer outra, a função decorada não as forncerá. Porque ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. + + Alguns decoradores podem fornecer suas próprias propriedades. Exemplo, um decorador pode contar quantas vezes uma função foi invocada e quanto tempo ela levou, e expor essa informação atráves das propriedades do encapsulador. Existe uma maneira de criar decoradores que mantêm o acesso às propriedades da função, mas isto requer o uso de um objeto `Proxy` especial para encapsular uma função. Discutiremos isso depois no artigo . From 0d241d649324d5ba4e8f6e1bf4318a1f4a8f989c Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Tue, 27 Jul 2021 22:37:48 +0100 Subject: [PATCH 096/138] Add untranslated line. --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 0e2295278..529e47577 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -401,7 +401,7 @@ Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc j É geralmente seguro substituir uma função ou um método por outro decorados, exceto por uma pequena coisa. Se a função original tiver propriedades nela, como `func.calledCount` ou qualquer outra, a função decorada não as forncerá. Porque ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. - +E.g. in the example above if `slow` function had any properties on it, then `cachingDecorator(slow)` is a wrapper without them. Alguns decoradores podem fornecer suas próprias propriedades. Exemplo, um decorador pode contar quantas vezes uma função foi invocada e quanto tempo ela levou, e expor essa informação atráves das propriedades do encapsulador. From 18e894986011bf2f480ec6f3a394d51eae064f4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 28 Jul 2021 10:58:02 +0100 Subject: [PATCH 097/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 529e47577..3438c4a29 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -401,7 +401,7 @@ Portanto, tecnicamente ele pega o `this` e combina `this[0]`, `this[1]` ...etc j É geralmente seguro substituir uma função ou um método por outro decorados, exceto por uma pequena coisa. Se a função original tiver propriedades nela, como `func.calledCount` ou qualquer outra, a função decorada não as forncerá. Porque ela é um encapsulador. Portanto é preciso ser cuidadoso ao usá-los. -E.g. in the example above if `slow` function had any properties on it, then `cachingDecorator(slow)` is a wrapper without them. +No exemplo acima, se a função `slow` tiver algumas propriedades, então `cachingDecorator(slow)` é um encapsulador sem elas. Alguns decoradores podem fornecer suas próprias propriedades. Exemplo, um decorador pode contar quantas vezes uma função foi invocada e quanto tempo ela levou, e expor essa informação atráves das propriedades do encapsulador. From 029fe8138d2e324898d55f0d0bf6b94d62ecd084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 28 Jul 2021 10:58:12 +0100 Subject: [PATCH 098/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md index 91f958340..8217a14c4 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/solution.md @@ -18,7 +18,7 @@ Por favor note como uma função seta (arrow function) é usada aqui. Tal como s Se passássemos uma função normal, `setTimeout` iria chamá-la sem argumentos nem `this=window` (assumindo que estávamos no browser). -Ainda podemos passar o `this` certo atráves do uso de uma variável intermediador, porém é um pouco mais difícil: +Ainda podemos passar o `this` certo atráves do uso de uma variável intermédia, porém é um pouco mais difícil: ```js function delay(f, ms) { From d13f456239914d9830c6e6b0b51705ee73cd0b18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Wed, 28 Jul 2021 11:17:52 +0100 Subject: [PATCH 099/138] translate the scripts into 4-throttle folder --- .../04-throttle/_js.view/solution.js | 10 ++++---- .../04-throttle/_js.view/test.js | 24 +++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js index 8071be9d4..65a6d2ddd 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js @@ -7,23 +7,23 @@ function throttle(func, ms) { function wrapper() { if (isThrottled) { - // memo last arguments to call after the cooldown + // memorizar os últimos argumentos para chamada depois da espera savedArgs = arguments; savedThis = this; return; } - // otherwise go to cooldown state + // caso contrário vá para o estado de espera func.apply(this, arguments); isThrottled = true; - // plan to reset isThrottled after the delay + // planea reiniciar isThrottled depois do atraso setTimeout(function() { isThrottled = false; if (savedArgs) { - // if there were calls, savedThis/savedArgs have the last one - // recursive call runs the function and sets cooldown again + // se houverer chamadas, savedThis/saveArgs tem a última + // chamada recursiva executa a função e configur a espera novamente wrapper.apply(savedThis, savedArgs); savedArgs = savedThis = null; } diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js index e671438f6..70de4db61 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js @@ -12,32 +12,32 @@ describe("throttle(f, 1000)", function() { }); it("the first call runs now", function() { - f1000(1); // runs now + f1000(1); // executa agora assert.equal(log, "1"); }); it("then calls are ignored till 1000ms when the last call works", function() { - f1000(2); // (throttling - less than 1000ms since the last run) - f1000(3); // (throttling - less than 1000ms since the last run) - // after 1000 ms f(3) call is scheduled + f1000(2); // (throttling - menos do que 1000ms desde a última execução) + f1000(3); // (throttling - menos do que 1000ms desde a última execução) + // depois de 1000ms f(3) a chamada é agendada - assert.equal(log, "1"); // right now only the 1st call done + assert.equal(log, "1"); // agora somente a primeira chamada é feita - this.clock.tick(1000); // after 1000ms... - assert.equal(log, "13"); // log==13, the call to f1000(3) is made + this.clock.tick(1000); // depois 1000ms... + assert.equal(log, "13"); // log==13, a chamada para f1000(3) é feita }); it("the third call waits 1000ms after the second call", function() { this.clock.tick(100); - f1000(4); // (throttling - less than 1000ms since the last run) + f1000(4); // (throttling - menos do que 1000ms desde a última execução) this.clock.tick(100); - f1000(5); // (throttling - less than 1000ms since the last run) + f1000(5); // (throttling - menos do que 1000ms desde a última execução) this.clock.tick(700); - f1000(6); // (throttling - less than 1000ms since the last run) + f1000(6); // (throttling - menos do que 1000ms desde a última execução) - this.clock.tick(100); // now 100 + 100 + 700 + 100 = 1000ms passed + this.clock.tick(100); // agora 100 + 100 + 700 + 100 = 1000ms se passaram - assert.equal(log, "136"); // the last call was f(6) + assert.equal(log, "136"); // a última chamada foi f(6) }); after(function() { From 0b65ff8303015ee73d0e9b736ddf96995ef791eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Wed, 28 Jul 2021 11:19:54 +0100 Subject: [PATCH 100/138] translate the scripts into 3-debounce folder --- .../09-call-apply-decorators/03-debounce/_js.view/test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js index 750e649f8..aed28ea7f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js @@ -22,8 +22,8 @@ describe('debounce', function () { const debounced = debounce(f, 1000); debounced('a'); - setTimeout(() => debounced('b'), 200); // ignored (too early) - setTimeout(() => debounced('c'), 500); // runs (1000 ms passed) + setTimeout(() => debounced('b'), 200); // ignorada (cedo demais) + setTimeout(() => debounced('c'), 500); // executa (1000ms passados) this.clock.tick(1000); assert(f.notCalled, 'not called after 1000ms'); From 1ad0da4aa781f27587947aeeeca180f9638add44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Wed, 28 Jul 2021 11:22:36 +0100 Subject: [PATCH 101/138] translate the scripts into 01-spy-decorator folder --- .../01-spy-decorator/_js.view/solution.js | 2 +- .../01-spy-decorator/_js.view/source.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js index d5a09efb3..ccb325d78 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js @@ -1,7 +1,7 @@ function spy(func) { function wrapper(...args) { - // using ...args instead of arguments to store "real" array in wrapper.calls + // usando ...args ao invés de arguments para guardar o array "real" dentro de wrapper.calls wrapper.calls.push(args); return func.apply(this, args); } diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js index 38da0105f..95cee0880 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js @@ -1,5 +1,5 @@ function spy(func) { - // your code + // seu código } From deb74e8ac2b60d18f45cd380c8f78404c0d52eb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Thu, 29 Jul 2021 20:05:04 +0100 Subject: [PATCH 102/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/_js.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js index 70de4db61..66dc4a6f7 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js @@ -23,7 +23,7 @@ describe("throttle(f, 1000)", function() { assert.equal(log, "1"); // agora somente a primeira chamada é feita - this.clock.tick(1000); // depois 1000ms... + this.clock.tick(1000); // depois de 1000ms... assert.equal(log, "13"); // log==13, a chamada para f1000(3) é feita }); From 2ddace6557b62fbbcf4f52a33e60cac1f541d095 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Thu, 29 Jul 2021 20:05:18 +0100 Subject: [PATCH 103/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js Co-authored-by: Osvaldo Dias dos Santos --- .../01-spy-decorator/_js.view/source.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js index 95cee0880..581661fd7 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/source.js @@ -1,5 +1,4 @@ function spy(func) { - // seu código + // o seu código } - From c86916ed5de0340904c002705cfc44a1206780ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Thu, 29 Jul 2021 20:06:21 +0100 Subject: [PATCH 104/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js Co-authored-by: Osvaldo Dias dos Santos --- .../01-spy-decorator/_js.view/solution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js index ccb325d78..579bb419f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/solution.js @@ -1,7 +1,7 @@ function spy(func) { function wrapper(...args) { - // usando ...args ao invés de arguments para guardar o array "real" dentro de wrapper.calls + // usando ...args ao invés de arguments para guardar o "verdadeiro" array dentro de wrapper.calls wrapper.calls.push(args); return func.apply(this, args); } From fdb8eb2bed9103c37d20c93d9941d19ded7904c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Thu, 29 Jul 2021 20:06:48 +0100 Subject: [PATCH 105/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/_js.view/solution.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js index 65a6d2ddd..b22270861 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js @@ -7,7 +7,7 @@ function throttle(func, ms) { function wrapper() { if (isThrottled) { - // memorizar os últimos argumentos para chamada depois da espera + // memorizar os últimos argumentos para a chamada depois da espera savedArgs = arguments; savedThis = this; return; @@ -31,4 +31,4 @@ function throttle(func, ms) { } return wrapper; -} \ No newline at end of file +} From 71a229ff5ea7c6f2368c95f9635182000a9572b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Thu, 29 Jul 2021 20:07:00 +0100 Subject: [PATCH 106/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/_js.view/solution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js index b22270861..5f5eeed8d 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js @@ -18,7 +18,7 @@ function throttle(func, ms) { isThrottled = true; - // planea reiniciar isThrottled depois do atraso + // planeia reinicializar isThrottled depois do atraso setTimeout(function() { isThrottled = false; if (savedArgs) { From fbfd1a01195ce51594bec8f174e0b210fc3af98b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Thu, 29 Jul 2021 20:07:09 +0100 Subject: [PATCH 107/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/_js.view/solution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js index 5f5eeed8d..aa811f06a 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js @@ -22,7 +22,7 @@ function throttle(func, ms) { setTimeout(function() { isThrottled = false; if (savedArgs) { - // se houverer chamadas, savedThis/saveArgs tem a última + // se houver chamadas, savedThis/saveArgs tem a última // chamada recursiva executa a função e configur a espera novamente wrapper.apply(savedThis, savedArgs); savedArgs = savedThis = null; From 16a516b14aba74f671464bb3df7df320e9821606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Thu, 29 Jul 2021 20:07:20 +0100 Subject: [PATCH 108/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/_js.view/solution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js index aa811f06a..91b2bfad5 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js @@ -23,7 +23,7 @@ function throttle(func, ms) { isThrottled = false; if (savedArgs) { // se houver chamadas, savedThis/saveArgs tem a última - // chamada recursiva executa a função e configur a espera novamente + // a chamada recursiva executa a função e configura a espera novamente wrapper.apply(savedThis, savedArgs); savedArgs = savedThis = null; } From 3fe905769d7368e7d7036cb42ffc5b7497142544 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Thu, 29 Jul 2021 20:26:44 +0100 Subject: [PATCH 109/138] complete translations that are not completed --- .../01-spy-decorator/_js.view/test.js | 6 +++--- .../02-delay/_js.view/test.js | 8 ++++---- .../03-debounce/_js.view/test.js | 14 +++++++------- .../04-throttle/_js.view/test.js | 10 +++++----- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js index 5adfcb978..ae809db54 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/_js.view/test.js @@ -1,5 +1,5 @@ describe("spy", function() { - it("records calls into its property", function() { + it("guarde as chamadas dentro da sua propriedade", function() { function work() {} work = spy(work); @@ -17,7 +17,7 @@ describe("spy", function() { ]); }); - it("transparently wraps functions", function() { + it("encapsula transparentemente as funções", function() { let sum = sinon.spy((a, b) => a + b); @@ -28,7 +28,7 @@ describe("spy", function() { }); - it("transparently wraps methods", function() { + it("encapsula transparentemente os métodos", function() { let calc = { sum: sinon.spy((a, b) => a + b) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js index d9295da51..198c906fd 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js @@ -7,7 +7,7 @@ describe("delay", function() { this.clock.restore(); }); - it("calls the function after the specified timeout", function() { + it("chama a função depois do limite do tempo especificado", function() { let start = Date.now(); function f(x) { @@ -18,10 +18,10 @@ describe("delay", function() { let f1000 = delay(f, 1000); f1000("test"); this.clock.tick(2000); - assert(f.calledOnce, 'calledOnce check fails'); + assert(f.calledOnce, 'A verificação do calledOnce falhou'); }); - it("passes arguments and this", function() { + it("passa os argumentos e this", function() { let start = Date.now(); let user = { sayHi: function(phrase, who) { @@ -41,6 +41,6 @@ describe("delay", function() { this.clock.tick(2000); - assert(spy.calledOnce, 'calledOnce check failed'); + assert(spy.calledOnce, 'A verificação do calledOnce falhou'); }); }); diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js index aed28ea7f..8ff6b432e 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js @@ -7,17 +7,17 @@ describe('debounce', function () { this.clock.restore(); }); - it('for one call - runs it after given ms', function () { + it('para uma chamada - executo-o depois de dado milissegundos', function () { const f = sinon.spy(); const debounced = debounce(f, 1000); debounced('test'); - assert(f.notCalled, 'not called immediately'); + assert(f.notCalled, 'não é chamada imediatamente'); this.clock.tick(1000); - assert(f.calledOnceWith('test'), 'called after 1000ms'); + assert(f.calledOnceWith('test'), 'é chamada depois de 1000ms'); }); - it('for 3 calls - runs the last one after given ms', function () { + it('para 3 chamadas - execute a última depois de dado milissegundos', function () { const f = sinon.spy(); const debounced = debounce(f, 1000); @@ -26,14 +26,14 @@ describe('debounce', function () { setTimeout(() => debounced('c'), 500); // executa (1000ms passados) this.clock.tick(1000); - assert(f.notCalled, 'not called after 1000ms'); + assert(f.notCalled, 'não é chamada depois de 1000ms'); this.clock.tick(500); - assert(f.calledOnceWith('c'), 'called after 1500ms'); + assert(f.calledOnceWith('c'), 'é chamada depois de 1500ms'); }); - it('keeps the context of the call', function () { + it('preserva o contexto da chamada', function () { let obj = { f() { assert.equal(this, obj); diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js index 66dc4a6f7..758616877 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js @@ -11,12 +11,12 @@ describe("throttle(f, 1000)", function() { f1000 = throttle(f, 1000); }); - it("the first call runs now", function() { + it("a primeira chamada executa agora", function() { f1000(1); // executa agora assert.equal(log, "1"); }); - it("then calls are ignored till 1000ms when the last call works", function() { + it("então as chamadas são ignoradas até 1000ms quando a última chamada funcionar", function() { f1000(2); // (throttling - menos do que 1000ms desde a última execução) f1000(3); // (throttling - menos do que 1000ms desde a última execução) // depois de 1000ms f(3) a chamada é agendada @@ -27,7 +27,7 @@ describe("throttle(f, 1000)", function() { assert.equal(log, "13"); // log==13, a chamada para f1000(3) é feita }); - it("the third call waits 1000ms after the second call", function() { + it(" a terceira chamada espera 1000ms depois da segunda chamada", function() { this.clock.tick(100); f1000(4); // (throttling - menos do que 1000ms desde a última execução) this.clock.tick(100); @@ -48,14 +48,14 @@ describe("throttle(f, 1000)", function() { describe('throttle', () => { - it('runs a forwarded call once', done => { + it('executa a chamada encaminhada uma vez', done => { let log = ''; const f = str => log += str; const f10 = throttle(f, 10); f10('once'); setTimeout(() => { - assert.equal(log, 'once'); + assert.equal(log, 'uma vez'); done(); }, 20); }); From 41512abcf2015134f0566cedb337fcae826bd6c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Mon, 2 Aug 2021 16:29:27 +0100 Subject: [PATCH 110/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/_js.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js index 8ff6b432e..0fee7dc5c 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js @@ -7,7 +7,7 @@ describe('debounce', function () { this.clock.restore(); }); - it('para uma chamada - executo-o depois de dado milissegundos', function () { + it('para uma chamada - executa-o depois de dados milissegundos', function () { const f = sinon.spy(); const debounced = debounce(f, 1000); From af56b83d8cb11f82e3dbeb3a516753209ce6daac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:26:26 +0100 Subject: [PATCH 111/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/02-delay/_js.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js index 198c906fd..f398cda3f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/02-delay/_js.view/test.js @@ -7,7 +7,7 @@ describe("delay", function() { this.clock.restore(); }); - it("chama a função depois do limite do tempo especificado", function() { + it("chama a função depois do limite de tempo especificado", function() { let start = Date.now(); function f(x) { From 55e673167dfec970cdb13841d9d3e40eb3be6f0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:26:36 +0100 Subject: [PATCH 112/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/01-spy-decorator/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md index 40d77e4ed..e088f1242 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md @@ -4,7 +4,7 @@ importance: 5 # Decorador Spy (espião) -Crie um decorador `spy(func)` que deve retornar um encapsulador que guarde todas as chamadas de uma função na sua propriedade `calls`. +Crie um decorador `spy(func)` que retorne um encapsulador que guarde todas as chamadas de uma função na sua propriedade `calls`. Todas as chamadas são guardadas num array de argumentos. From c6148f94b5eb8bb402a4f01f7ee1a3ff0140a586 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:26:45 +0100 Subject: [PATCH 113/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/03-debounce/_js.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js index 0fee7dc5c..ca71338d6 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js @@ -17,7 +17,7 @@ describe('debounce', function () { assert(f.calledOnceWith('test'), 'é chamada depois de 1000ms'); }); - it('para 3 chamadas - execute a última depois de dado milissegundos', function () { + it('para 3 chamadas - execute a última depois de dados milissegundos', function () { const f = sinon.spy(); const debounced = debounce(f, 1000); From d05874cb9121d2986136dbf3450d3b242c398c2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:26:55 +0100 Subject: [PATCH 114/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/_js.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js index 758616877..2116d3e67 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js @@ -19,7 +19,7 @@ describe("throttle(f, 1000)", function() { it("então as chamadas são ignoradas até 1000ms quando a última chamada funcionar", function() { f1000(2); // (throttling - menos do que 1000ms desde a última execução) f1000(3); // (throttling - menos do que 1000ms desde a última execução) - // depois de 1000ms f(3) a chamada é agendada + // depois de 1000ms a chamada f(3) é agendada assert.equal(log, "1"); // agora somente a primeira chamada é feita From c4a17501397e31f04457c8fa210d49a90ac40310 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:27:08 +0100 Subject: [PATCH 115/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 3438c4a29..d77785bcb 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -66,7 +66,7 @@ Resumindo, existem muitos benefícios em usar um `cacheDecorator` separado ao in ## Usando "func.call" para o contexto -O decorador de cache mencionado acima não é adequado para trabalhar com os métodos de objeto. +O decorador de cache mencionado acima não é adequado para trabalhar com métodos de objeto. Por exemplo, no código abaixo `worker.slow()` pára de funcionar após a decoração: From 3996f37ecf101fce8ae56618d236512544e45c40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:28:12 +0100 Subject: [PATCH 116/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index d77785bcb..61d37271d 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -241,7 +241,7 @@ Existem muitas soluções possíveis: Para muitas aplicações práticas, a terceira variante é suficientemente boa, então vamos segui-la. -Também precisamos de passar não apenas o `x`, mas todos argumentos em `func.call`. Vamos recapitular que em uma `function()` podemos receber um pseudo-array de seus argumentos como `arguments`, então `func.call(this, x)` deveria ser substituida por `func.call(this, ...arguments)`. +Também precisamos de passar não apenas o `x`, mas todos argumentos em `func.call`. Vamos recapitular que em uma `function()` podemos receber um pseudo-array com os seus argumentos como `arguments`, então `func.call(this, x)` deveria ser substituida por `func.call(this, ...arguments)`. Agora vamos condensar tudo dentro do mais poderoso `cachingDecorator`: From 23b6c118fcefb19794d5951ed9325554e6256c2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:28:20 +0100 Subject: [PATCH 117/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 61d37271d..176a01ee4 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -329,7 +329,7 @@ let wrapper = function() { }; ``` -Quando um código externo chama tal `encapsulador`, ele é indistinguível da chamada da função original `func`. +Quando um código externo chama esse `encapsulador`, ele é indistinguível da chamada da função original `func`. ## Emprestando um método [#method-borrowing] From 7969605bc8ce398a9fe0a839a6e1fb26f0f50755 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:28:30 +0100 Subject: [PATCH 118/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 176a01ee4..179b85884 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -333,7 +333,7 @@ Quando um código externo chama esse `encapsulador`, ele é indistinguível da c ## Emprestando um método [#method-borrowing] -Agora vamos fazer mais uma pequena melhoria na função de hashing: +Agora vamos fazer mais uma pequena melhoria à função de hashing: ```js function hash(args) { From 9bf4f1f264d8bd020ee19d5a7067a7e8be454605 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:28:49 +0100 Subject: [PATCH 119/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 179b85884..e562d8bc6 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -165,7 +165,7 @@ function say(phrase) { let user = { name: "John" }; -// user se torna this, e "Hello" se torna o primeiro argumento +// user se torna this, e "Hello" se torna no primeiro argumento say.call( user, "Hello" ); // John: Hello ``` From b1da41a33f47af0349f8285a7252da50a4bdd4ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:29:10 +0100 Subject: [PATCH 120/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 703edf526..3d9c3f0cb 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -35,4 +35,4 @@ Uma chamada de `throttle(func, ms)` retorna `wrapper`. 2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos, o contexto e os argumentos, são igualmente importantes e devem ser memorizados. Nós precisamos deles simultaneamente para reproduzir a chamada. 3. Depois que `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivermos chamadas ignoradas , o `wrapper` é executado com os últimos argumentos e contexto memorizados. -O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos de executar `func`, mas mais uma vez, entra no estado de espera e configura o tempo limite para reiniciá-lo. +O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos de executar `func`, mas mais uma vez, de entrar no estado de espera e configurar o tempo limite para reiniciá-lo. From fd1e97077f4dae40325579e2e63fc1793b75961d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:29:25 +0100 Subject: [PATCH 121/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 2826be8d2..ce4563bbf 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -4,7 +4,7 @@ importance: 5 # O Decorador Throttle -Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorna um encapsulador. +Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorne um encapsulador. Quando for chamado várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. From dc5e05022df5a37f7414651cd4a283f6315bee28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:29:45 +0100 Subject: [PATCH 122/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/article.md Co-authored-by: Osvaldo Dias dos Santos --- 1-js/06-advanced-functions/09-call-apply-decorators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index e562d8bc6..9b21d4f03 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -58,7 +58,7 @@ O resultado do `cachingDecorator(func)` é um "encapsulador": `function(x)` que Como podemos ver, o encapsulador retorna o resultado da `func(x)` "como ele é". A partir de um código exterior, a função `slow` encapsulada ainda faz o mesmo. Ela apenas teve o aspecto de cache adicionado ao seu comportamento. -Resumindo, existem muitos benefícios em usar um `cacheDecorator` separado ao invés de alterar o próprio código de `slow`: +Resumindo, existem muitos benefícios em usar um `cacheDecorator` separado ao invés de alterar o próprio código de `slow`: - O `cacheDecorator` é reusável. Nós o podemos aplicar a outras funções. - A lógica de cache está separada, ela não adicionou complexidade a `slow` (se havia alguma). From 9f062236e2a4de2a45af4e2df8190ab60650aaa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:30:01 +0100 Subject: [PATCH 123/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index ce4563bbf..5aa95f712 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -6,7 +6,7 @@ importance: 5 Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorne um encapsulador. -Quando for chamado várias vezes, ela passa a chamada para `f` no máximo uma vez por `ms` milissegundos. +Quando for chamado várias vezes, ele passa a chamada para `f` no máximo uma vez por `ms` milissegundos. A diferença de debounce é que é um decorador completamente diferente: - `debounce` executa a função uma vez depois do período de "espera". Boa para processar o resultado final. From b12622347ebd265c5def58fb9aa9ce9b0c756731 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= <31008635+nazarepiedady@users.noreply.github.com> Date: Wed, 4 Aug 2021 10:30:17 +0100 Subject: [PATCH 124/138] Update 1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md Co-authored-by: Osvaldo Dias dos Santos --- .../09-call-apply-decorators/04-throttle/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index 5aa95f712..e92166d18 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -14,7 +14,7 @@ A diferença de debounce é que é um decorador completamente diferente: Por outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas incomonda o chefe (chama a `f` atual) não mais do que uma vez por`ms` milissegundos. -Vamos verificar a aplicação na vida real para melhor compreender esse requesito e ver de onde ele vem. +Vamos verificar a aplicação na vida real para melhor compreender esse requisito e ver de onde ele vem. **Por exemplo, queremos rastrear movimentos do rato** From 2deb617e18bc82016a589b64a17b87248b156c03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 5 Mar 2024 04:37:22 +0100 Subject: [PATCH 125/138] docs: update `call-apply-decorators/throttle` article --- .../04-throttle/_js.view/solution.js | 17 ++++--- .../04-throttle/_js.view/test.js | 8 ++-- .../04-throttle/solution.md | 10 ++--- .../04-throttle/task.md | 44 +++++++++---------- 4 files changed, 42 insertions(+), 37 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js index 91b2bfad5..408f9716f 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js @@ -7,23 +7,28 @@ function throttle(func, ms) { function wrapper() { if (isThrottled) { - // memorizar os últimos argumentos para a chamada depois da espera + // memorizar os últimos argumentos a + // chamar depois arrefecimento savedArgs = arguments; savedThis = this; return; } - // caso contrário vá para o estado de espera + // caso contrário, passa ao estado + // de arrefecimento func.apply(this, arguments); isThrottled = true; - // planeia reinicializar isThrottled depois do atraso + // planear reiniciar `isThrottled` + // depois do atraso setTimeout(function() { isThrottled = false; if (savedArgs) { - // se houver chamadas, savedThis/saveArgs tem a última - // a chamada recursiva executa a função e configura a espera novamente + // se houve chamadas, `savedThis` ou + // `savedArgs` tem a última + // a chamada recursiva executa a função + // e define novamente o arrefecimento wrapper.apply(savedThis, savedArgs); savedArgs = savedThis = null; } @@ -31,4 +36,4 @@ function throttle(func, ms) { } return wrapper; -} +} \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js index 2116d3e67..04d83bf8a 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js @@ -29,11 +29,11 @@ describe("throttle(f, 1000)", function() { it(" a terceira chamada espera 1000ms depois da segunda chamada", function() { this.clock.tick(100); - f1000(4); // (throttling - menos do que 1000ms desde a última execução) + f1000(4); // (regulação - menos do que 1000ms desde a última execução) this.clock.tick(100); - f1000(5); // (throttling - menos do que 1000ms desde a última execução) + f1000(5); // (regulação - menos do que 1000ms desde a última execução) this.clock.tick(700); - f1000(6); // (throttling - menos do que 1000ms desde a última execução) + f1000(6); // (regulação - menos do que 1000ms desde a última execução) this.clock.tick(100); // agora 100 + 100 + 700 + 100 = 1000ms se passaram @@ -48,7 +48,7 @@ describe("throttle(f, 1000)", function() { describe('throttle', () => { - it('executa a chamada encaminhada uma vez', done => { + it('executa uma chamada encaminhada uma vez', done => { let log = ''; const f = str => log += str; const f10 = throttle(f, 10); diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md index 3d9c3f0cb..a3950761e 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md @@ -29,10 +29,10 @@ function throttle(func, ms) { } ``` -Uma chamada de `throttle(func, ms)` retorna `wrapper`. +Uma chamada a `throttle(func, ms)` retorna `wrapper`. -1. Durante a primeira chamada, o `wrapper` apenas executa `func` e configura o estado de espera (`isThrottled = true`). -2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. Note que ambos, o contexto e os argumentos, são igualmente importantes e devem ser memorizados. Nós precisamos deles simultaneamente para reproduzir a chamada. -3. Depois que `ms` milissegundos passam, `setTimeout` é acionada. O estado de espera é removido (`isThrottled = false`) e, se nós tivermos chamadas ignoradas , o `wrapper` é executado com os últimos argumentos e contexto memorizados. +1. Durante a primeira chamada, o `wrapper` apenas executa a `func` e define o estado de arrefecimento (`isThrottled = true`). +2. Neste estado todas as chamadas são memorizadas em `savedArgs/savedThis`. É de notar que tanto o contexto como os argumentos são igualmente importantes e devem ser memorizados. Nós precisamos destes simultaneamente para reproduzir a chamada. +3. Após `ms` milissegundos, `setTimeout` é acionada. O estado de arrefecimento é removido (`isThrottled = false`) e, se tivermos ignorado chamadas, o `wrapper` é executado com os últimos argumentos e contexto memorizados. -O terceiro passo executa não `func`, mas o `wrapper`, porque nós não só precisamos de executar `func`, mas mais uma vez, de entrar no estado de espera e configurar o tempo limite para reiniciá-lo. +O terceiro passo não executa a `func`, mas sim o `wrapper`, porque não só precisamos de executar a `func`, como também entrar novamente no estado de arrefecimento e configurar o tempo de espera para reiniciá-lo. diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md index e92166d18..6b28458b0 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md @@ -2,52 +2,52 @@ importance: 5 --- -# O Decorador Throttle +# Decorador Regulador -Crie um decorador de "estrangulamento" `throttle(f, ms)` -- que retorne um encapsulador. +Crie um decorador de "regulação" `throttle(f, ms)` -- que retorna uma função envolvente. -Quando for chamado várias vezes, ele passa a chamada para `f` no máximo uma vez por `ms` milissegundos. +Quando é chamado várias vezes, este passa a chamada a `f` no máximo uma vez por `ms` milissegundos. -A diferença de debounce é que é um decorador completamente diferente: -- `debounce` executa a função uma vez depois do período de "espera". Boa para processar o resultado final. -- `throttle` não é executada mais do que uma vez em `ms` de tempo. Boa para atualizações regulares que não sejam efectuadas num intervalo de tempo pequeno. +Em comparação com o decorador de redução, o comportamento é completamente diferente: +- `debounce` executa a função uma vez após o período de "arrefecimento". Bom para processar o resultado final. +- `throttle` executa a função não mais frequentemente do que o tempo dado `ms`. Bom para atualizações regulares que não devem ser muito frequentes. -Por outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas incomonda o chefe (chama a `f` atual) não mais do que uma vez por`ms` milissegundos. +Por outras palavras, `throttle` é como uma secretária que aceita chamadas telefónicas, mas que incomoda a chefe (chama a verdadeira `f`) não mais do que uma vez por `ms` milissegundos. -Vamos verificar a aplicação na vida real para melhor compreender esse requisito e ver de onde ele vem. +Vejamos a aplicação na realidade para compreender melhor este requisito e ver de onde vem. **Por exemplo, queremos rastrear movimentos do rato** -Num navegador, nós podemos configurar uma função para ser executada a cada movimento do rato e receber a localização do ponteiro à medida que ele se move. Num período de uso constante do rato, esta função geralmente é executada com muita frequência, pode ser algo como 100 vezes por segundo (a cada 10 ms). -**Gostaríamos de atualizar alguma informação na página web sempre que o ponteiro se mover.** +Num navegador, podemos configurar uma função para ser executada em cada movimento do rato e obter a localização do ponteiro à medida que este se move. Durante uma utilização ativa do rato, esta função é normalmente executada com muita frequência, podendo ser algo como 100 vezes por segundo (a cada 10 milissegundos).**Gostaríamos de atualizar algumas informações na página da Web quando o ponteiro se move.** -A função de atualização `update()` é muito pesada de se fazer a cada micro-movimento. Também não faz sentido executar isso mais de uma vez por 100ms. +...Mas a função de atualização `update()` é demasiado pesada para o fazer em cada micro-movimento. Também não faz sentido atualizar mais do que uma vez por 100ms. -Portanto, vamos atribuir `throttle(update, 100)` como a função a ser executada a cada movimento de rato ao invés da `update()` original. O decorador será chamado com frequência, porém `update()` será chamada no máximo uma vez por 100ms. +Por isso, a envolveremos no decorador: usamos `throttle(update, 100)` como uma função a ser executada em cada movimento do rato, em vez da `update` original. O decorador será chamado frequentemente, mas encaminhará a chamada a `update` no máximo uma vez a cada 100ms. -Visualmente, se parecerá com algo assim: +Visualmente, terá o seguinte aspeto: 1. Para o primeiro movimento do rato a variante decorada passa a chamada para `update`. É importante que o usuário veja a nossa reação aos seus movimentos imediatamente. -2. Depois, ao mover do rato, até `100ms` nada acontece. A variante decorada ignora as chamadas. -3. Ao final de `100ms` -- mais um `update` acontece com as últimas coordenadas. -4. Continuando, finalmente, o rato pára em algum lugar. A variante decorada espera até `100ms` expirarem e depois executa o `update` com as últimas coordenadas. Então, talvez o mais importante, as coordenadas finais do rato são processadas. +1. Para o primeiro movimento do rato, a variante decorada passa imediatamente a chamada a `update`. Isso é importante, o usuário vê a nossa reação ao seu movimento imediatamente. +2. Depois, à medida que o rato se move, até `100ms` nada acontece. A variante decorada ignora as chamadas. +3. No final de `100ms` -- mais uma `update` acontece com as últimas coordenadas. +4. Então, finalmente, o rato para em algum lugar. A variante decorada espera até `100ms` expiraram e depois executa a `update` com as últimas coordenadas. Assim, o mais importante, as últimas coordenadas do rato são processadas. -Um código de exemplo: +Um exemplo de código: ```js function f(a) { console.log(a); } -// f1000 passa chamadas para f no máximo uma vez por 1000 ms +// f1000 passa chamadas a `f` no máximo uma vez por 1000 ms let f1000 = throttle(f, 1000); f1000(1); // exibe 1 -f1000(2); // (estrangulamento, 1000ms ainda não passaram) -f1000(3); // (estrangulamento, 1000ms ainda não passaram) +f1000(2); // (regulação, 1000ms ainda não passaram) +f1000(3); // (regulação, 1000ms ainda não passaram) -// quando o tempo de 1000ms estiver esgotado... +// quando o tempo de 1000ms se esgota... // ...exibe 3, o valor intermédio 2 foi ignorado ``` -P.S. Os argumentos e o contexto `this` passados para `f1000` devem ser passados para a função original `f`. +P.S. Os argumentos e o contexto de `this` passados a `f1000` devem ser passados a `f` original. From 553b99934ef9937df0f3078f1e3c543343bbdd45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nazar=C3=A9=20da=20Piedade?= Date: Tue, 5 Mar 2024 04:37:35 +0100 Subject: [PATCH 126/138] docs: update `call-apply-decorators/debounce` article --- .../03-debounce/_js.view/test.js | 16 +++++----- .../03-debounce/debounce.svg | 2 +- .../03-debounce/debounce.view/index.html | 6 ++-- .../03-debounce/solution.md | 2 +- .../03-debounce/task.md | 32 +++++++++---------- 5 files changed, 29 insertions(+), 29 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js index ca71338d6..e237008ac 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js @@ -7,33 +7,33 @@ describe('debounce', function () { this.clock.restore(); }); - it('para uma chamada - executa-o depois de dados milissegundos', function () { + it('para uma chamada - execute-a após um determinado ms', function () { const f = sinon.spy(); const debounced = debounce(f, 1000); debounced('test'); assert(f.notCalled, 'não é chamada imediatamente'); this.clock.tick(1000); - assert(f.calledOnceWith('test'), 'é chamada depois de 1000ms'); + assert(f.calledOnceWith('test'), 'chamada após 1000ms'); }); - it('para 3 chamadas - execute a última depois de dados milissegundos', function () { + it('para 3 chamadas - executa a última após determinados ms', function () { const f = sinon.spy(); const debounced = debounce(f, 1000); debounced('a'); - setTimeout(() => debounced('b'), 200); // ignorada (cedo demais) - setTimeout(() => debounced('c'), 500); // executa (1000ms passados) + setTimeout(() => debounced('b'), 200); // ignorada (demasiado cedo) + setTimeout(() => debounced('c'), 500); // executar (1000ms passados) this.clock.tick(1000); - assert(f.notCalled, 'não é chamada depois de 1000ms'); + assert(f.notCalled, 'não é chamada após 1000ms'); this.clock.tick(500); - assert(f.calledOnceWith('c'), 'é chamada depois de 1500ms'); + assert(f.calledOnceWith('c'), 'chamada após 1500ms'); }); - it('preserva o contexto da chamada', function () { + it('mantém o contexto da chamada', function () { let obj = { f() { assert.equal(this, obj); diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg index 5896a5fa4..e624ce020 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg @@ -1 +1 @@ -200ms1500ms1000ms0cf(a)f(b)f(c)500mstimecalls: after 1000ms \ No newline at end of file +200ms1500ms1000ms0cf(a)f(b)f(c)500mstimecalls: after 1000ms \ No newline at end of file diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html index e4dc660fd..13a063a06 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html @@ -1,18 +1,18 @@ -A função handler é chamada neste campo de entrada: +A função handler é chamada nesta entrada:

-A função de debounce debounce(handler, 1000) é chamada neste campo de entrada: +A função debounce(handler, 1000) reduzida é chamada nesta entrada:

- +