Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf: use true private variables in code example #59

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

perf: use true private variables in code example #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 13 additions & 13 deletions README.es-ES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,7 @@ El mecanismo de detección de cambios de Angular se dispara gracias a [zone.js](

**Example**

En el ejemplo de abajo, puede ver un componente que utiliza esta práctica. Cuando el método `_incrementPoints` es llamado el componente comenzará a incrementar la propiedad `_points` cada 10ms (por defecto). Al incrementar tendremos la ilusión de una animación. Ya que en este caso no queremos activar el mecanismo de detección de cambios para todo el árbol de componentes, cada 10ms, podemos ejecutar `_incrementPoints` fuera del contexto de Angular´s Zone y actualizar el DOM manualmente (ver método set de `points`).
En el ejemplo de abajo, puede ver un componente que utiliza esta práctica. Cuando el método `#incrementPoints` es llamado el componente comenzará a incrementar la propiedad `#points` cada 10ms (por defecto). Al incrementar tendremos la ilusión de una animación. Ya que en este caso no queremos activar el mecanismo de detección de cambios para todo el árbol de componentes, cada 10ms, podemos ejecutar `#incrementPoints` fuera del contexto de Angular´s Zone y actualizar el DOM manualmente (ver método set de `points`).

```ts
@Component({
Expand All @@ -420,22 +420,22 @@ class PointAnimationComponent {

@Input() duration = 1000;
@Input() stepDuration = 10;
@ViewChild('label') label: ElementRef;
@ViewChild('label') label!: ElementRef;

@Input() set points(val: number) {
this._points = val;
this.#points = val;
if (this.label) {
this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0');
}
}
get points() {
return this._points;
return this.#points;
}

private _incrementInterval: any;
private _points: number = 0;
#incrementInterval: any;
#points: number = 0;

constructor(private _zone: NgZone, private _pipe: DecimalPipe) {}
constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {}

ngOnChanges(changes: any) {
const change = changes.points;
Expand All @@ -447,22 +447,22 @@ class PointAnimationComponent {
} else {
this.points = change.previousValue;
this._ngZone.runOutsideAngular(() => {
this._incrementPoints(change.currentValue);
this.#incrementPoints(change.currentValue);
});
}
}

private _incrementPoints(newVal: number) {
#incrementPoints(newVal: number) {
const diff = newVal - this.points;
const step = this.stepDuration * (diff / this.duration);
const initialPoints = this.points;
this._incrementInterval = setInterval(() => {
this.#incrementInterval = setInterval(() => {
let nextPoints = Math.ceil(initialPoints + diff);
if (this.points >= nextPoints) {
this.points = initialPoints + diff;
clearInterval(this._incrementInterval);
this.points = initialPoints + diff;
clearInterval(this.#incrementInterval);
} else {
this.points += step;
this.points += step;
}
}, this.stepDuration);
}
Expand Down
24 changes: 12 additions & 12 deletions README.ja-JP.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,9 +452,9 @@ Zone.jsのモンキーパッチは、ブラウザ内のすべての非同期API
**例**

以下の小さなコードサンプルで、この方法を使ったコンポーネントの具体例を見ることができます。
`_incrementPoints`メソッドが呼ばれると、コンポーネントは（基本的に）10ms毎に`_points`プロパティの増加を始めていきます。
`#incrementPoints`メソッドが呼ばれると、コンポーネントは（基本的に）10ms毎に`#points`プロパティの増加を始めていきます。
値の増加はアニメーションのような錯覚をさせるでしょう。
この時に、10msごとにコンポーネントツリー全体の変更検出メカニズムを起動したくないので、Angular Zoneのコンテキスト外で `_incrementPoints`を実行してDOMを手動で更新することができます。（`points` setter を参照）
この時に、10msごとにコンポーネントツリー全体の変更検出メカニズムを起動したくないので、Angular Zoneのコンテキスト外で `#incrementPoints`を実行してDOMを手動で更新することができます。（`points` setter を参照）

```ts
@Component({
Expand All @@ -464,22 +464,22 @@ class PointAnimationComponent {

@Input() duration = 1000;
@Input() stepDuration = 10;
@ViewChild('label') label: ElementRef;
@ViewChild('label') label!: ElementRef;

@Input() set points(val: number) {
this._points = val;
this.#points = val;
if (this.label) {
this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0');
}
}
get points() {
return this._points;
return this.#points;
}

private _incrementInterval: any;
private _points: number = 0;
#incrementInterval: any;
#points: number = 0;

constructor(private _zone: NgZone, private _pipe: DecimalPipe) {}
constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {}

ngOnChanges(changes: any) {
const change = changes.points;
Expand All @@ -491,20 +491,20 @@ class PointAnimationComponent {
} else {
this.points = change.previousValue;
this._ngZone.runOutsideAngular(() => {
this._incrementPoints(change.currentValue);
this.#incrementPoints(change.currentValue);
});
}
}

private _incrementPoints(newVal: number) {
#incrementPoints(newVal: number) {
const diff = newVal - this.points;
const step = this.stepDuration * (diff / this.duration);
const initialPoints = this.points;
this._incrementInterval = setInterval(() => {
this.#incrementInterval = setInterval(() => {
let nextPoints = Math.ceil(initialPoints + diff);
if (this.points >= nextPoints) {
this.points = initialPoints + diff;
clearInterval(this._incrementInterval);
clearInterval(this.#incrementInterval);
} else {
this.points += step;
}
Expand Down
20 changes: 10 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,7 @@ The Angular's change detection mechanism is being triggered thanks to [zone.js](

**Example**

In the snippet below, you can see an example for a component that uses this practice. When the `_incrementPoints` method is called the component will start incrementing the `_points` property every 10ms (by default). The incrementation will make the illusion of an animation. Since in this case, we don't want to trigger the change detection mechanism for the entire component tree, every 10ms, we can run `_incrementPoints` outside the context of the Angular's zone and update the DOM manually (see the `points` setter).
In the snippet below, you can see an example for a component that uses this practice. When the `#incrementPoints` method is called the component will start incrementing the `#points` property every 10ms (by default). The incrementation will make the illusion of an animation. Since in this case, we don't want to trigger the change detection mechanism for the entire component tree, every 10ms, we can run `#incrementPoints` outside the context of the Angular's zone and update the DOM manually (see the `points` setter).

```ts
@Component({
Expand All @@ -420,20 +420,20 @@ class PointAnimationComponent {

@Input() duration = 1000;
@Input() stepDuration = 10;
@ViewChild('label') label: ElementRef;
@ViewChild('label') label!: ElementRef;

@Input() set points(val: number) {
this._points = val;
this.#points = val;
if (this.label) {
this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0');
}
}
get points() {
return this._points;
return this.#points;
}

private _incrementInterval: any;
private _points: number = 0;
#incrementInterval: any;
#points: number = 0;

constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {}

Expand All @@ -447,20 +447,20 @@ class PointAnimationComponent {
} else {
this.points = change.previousValue;
this._ngZone.runOutsideAngular(() => {
this._incrementPoints(change.currentValue);
this.#incrementPoints(change.currentValue);
});
}
}

private _incrementPoints(newVal: number) {
#incrementPoints(newVal: number) {
const diff = newVal - this.points;
const step = this.stepDuration * (diff / this.duration);
const initialPoints = this.points;
this._incrementInterval = setInterval(() => {
this.#incrementInterval = setInterval(() => {
let nextPoints = Math.ceil(initialPoints + diff);
if (this.points >= nextPoints) {
this.points = initialPoints + diff;
clearInterval(this._incrementInterval);
clearInterval(this.#incrementInterval);
} else {
this.points += step;
}
Expand Down
48 changes: 24 additions & 24 deletions README.pt-BR.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ O Mecanismo de detecção de mudança do Angular é disparado graças ao [zone.j

**Exemplo**

No snippet abaixo, você pode pode ver um exemplo de um componente que usa essa prática. Quando o método `_incrementarPontos` é chamado, o componente vai começar a incrementar a propriedade `_points` a cada 10ms ( por padrão). Ao incrementar teremos uma ilusão de uma animação. Como não queremos que o angular dispare o mecanismo de deteção de mudanças para toda a árvore do componente a cada 10ms, nós podemos rodar a função `_incrementarPontos` fora do contexto da Zona do Angular e atualizar o DOM manualmente (Veja o setter de `pontos`)
No snippet abaixo, você pode pode ver um exemplo de um componente que usa essa prática. Quando o método `#incrementarPontos` é chamado, o componente vai começar a incrementar a propriedade `#points` a cada 10ms ( por padrão). Ao incrementar teremos uma ilusão de uma animação. Como não queremos que o angular dispare o mecanismo de deteção de mudanças para toda a árvore do componente a cada 10ms, nós podemos rodar a função `#incrementarPontos` fora do contexto da Zona do Angular e atualizar o DOM manualmente (Veja o setter de `pontos`)


```ts
Expand All @@ -427,53 +427,53 @@ No snippet abaixo, você pode pode ver um exemplo de um componente que usa essa
})
class PointAnimationComponent {

@Input() duracao = 1000;
@Input() duracaoDoPasso = 10;
@ViewChild('label') label: ElementRef;
@Input() duration = 1000;
@Input() stepDuration = 10;
@ViewChild('label') label!: ElementRef;

@Input() set points(val: number) {
this._pontos = val;
this.#points = val;
if (this.label) {
this.label.nativeElement.innerText = this._pipe.transform(pontos, '1.0-0');
this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0');
}
}
get pontos() {
return this.pontos;
get points() {
return this.#points;
}

private _intervaloDeIncremento: any;
private _pontos: number = 0;
#incrementInterval: any;
#points: number = 0;

constructor(private _zone: NgZone, private _pipe: DecimalPipe) {}
constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {}

ngOnChanges(changes: any) {
const change = changes.pontos;
const change = changes.points;
if (!change) {
return;
}
if (typeof change.previousValue !== 'number') {
this.pontos = change.currentValue;
this.points = change.currentValue;
} else {
this.pontos = change.previousValue;
this.points = change.previousValue;
this._ngZone.runOutsideAngular(() => {
this._incrementarPontos(change.currentValue);
this.#incrementPoints(change.currentValue);
});
}
}

private _incrementarPontos(novoValor: number) {
const dif = novoValor - this.pontos;
const passo = this.duracaoDoPasso * (dif / this.duracao);
const pontosIniciais= this.pontos;
this._intervalorDeIncremento = setInterval(() => {
let proximosPontos = Math.ceil(pontosIniciais + dif);
#incrementPoints(newVal: number) {
const diff = newVal - this.points;
const step = this.stepDuration * (diff / this.duration);
const initialPoints = this.points;
this.#incrementInterval = setInterval(() => {
let nextPoints = Math.ceil(initialPoints + diff);
if (this.points >= nextPoints) {
this.points = initialPoints + diff;
clearInterval(this._intervalorDeIncremento);
clearInterval(this.#incrementInterval);
} else {
this.pontos += passo;
this.points += step;
}
}, this.duracaoDoPasso);
}, this.stepDuration);
}
}
```
Expand Down
22 changes: 11 additions & 11 deletions README.ru-RU.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ Server-side rendering решает эту проблему пре-рендери

**Пример**

В отрывке кода далее, вы можете увидеть пример компонента с использованием данной практики. Когда метод `_incrementPoints` вызван, компонент начнет инкрементировать свойство `_points` каждые 10 мс (по умолчанию). Инкрементация создаст иллюзию анимации. Т.к. в данной ситуации мы не хотим вызывать проверку изменений для всего древа компонентов каждые 10 секунд, мы можем вызвать `_incrementPoints` вне контекста Angular Zone и обновить DOM вручную (`points` сеттер метод).
В отрывке кода далее, вы можете увидеть пример компонента с использованием данной практики. Когда метод `#incrementPoints` вызван, компонент начнет инкрементировать свойство `#points` каждые 10 мс (по умолчанию). Инкрементация создаст иллюзию анимации. Т.к. в данной ситуации мы не хотим вызывать проверку изменений для всего древа компонентов каждые 10 секунд, мы можем вызвать `#incrementPoints` вне контекста Angular Zone и обновить DOM вручную (`points` сеттер метод).

```ts
@Component({
Expand All @@ -413,22 +413,22 @@ class PointAnimationComponent {

@Input() duration = 1000;
@Input() stepDuration = 10;
@ViewChild('label') label: ElementRef;
@ViewChild('label') label!: ElementRef;

@Input() set points(val: number) {
this._points = val;
this.#points = val;
if (this.label) {
this.label.nativeElement.innerText = this._pipe.transform(this.points, '1.0-0');
}
}
get points() {
return this._points;
return this.#points;
}

private _incrementInterval: any;
private _points: number = 0;
#incrementInterval: any;
#points: number = 0;

constructor(private _zone: NgZone, private _pipe: DecimalPipe) {}
constructor(private _ngZone: NgZone, private _pipe: DecimalPipe) {}

ngOnChanges(changes: any) {
const change = changes.points;
Expand All @@ -440,20 +440,20 @@ class PointAnimationComponent {
} else {
this.points = change.previousValue;
this._ngZone.runOutsideAngular(() => {
this._incrementPoints(change.currentValue);
this.#incrementPoints(change.currentValue);
});
}
}

private _incrementPoints(newVal: number) {
#incrementPoints(newVal: number) {
const diff = newVal - this.points;
const step = this.stepDuration * (diff / this.duration);
const initialPoints = this.points;
this._incrementInterval = setInterval(() => {
this.#incrementInterval = setInterval(() => {
let nextPoints = Math.ceil(initialPoints + diff);
if (this.points >= nextPoints) {
this.points = initialPoints + diff;
clearInterval(this._incrementInterval);
clearInterval(this.#incrementInterval);
} else {
this.points += step;
}
Expand Down