You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/09-classes/07-mixins/article.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ In altre parole, un *mixin* fornisce dei metodi che implementano delle funzional
14
14
15
15
## Un esempio di mixin
16
16
17
-
Il modo più semplice per implementare un mixin in JavaScript è quello di creare un oggetto con dei metodi utili, in questo modo potremo fondermi molto semplicemente nel prototype di un'altra classe.
17
+
Il modo più semplice per implementare un mixin in JavaScript è quello di creare un oggetto con dei metodi utili, in questo modo potremo fonderli molto semplicemente nel prototype di un'altra classe.
18
18
19
19
Ad esempio, qui vediamo il mixin `sayHiMixin` che viene utilizzato per aggiungere la funzionalità di "parlare" a `User`:
20
20
@@ -73,7 +73,7 @@ let sayHiMixin = {
73
73
74
74
sayHi() {
75
75
*!*
76
-
// invocazione del metodo padre
76
+
// invocazione del metodo genitore
77
77
*/!*
78
78
super.say(`Hello ${this.name}`); // (*)
79
79
},
@@ -101,7 +101,7 @@ Da notare che l'invocazione al metodo padre `super.say()` da `sayHiMixin` (alla
101
101
102
102

103
103
104
-
Questo accade perché i metodi `sayHi` e `sayBye` sono stati creati in `sayHiMixin`. Quindi, anche dopo essere stati copiati, le loro proprietà `[[HomeObject]]` fanno riferimento a `sayHiMixin`, come mostrato in figura.
104
+
Questo accade perché i metodi `sayHi` e `sayBye` sono stati creati in `sayHiMixin`. Quindi, anche dopo essere stati copiati, le loro proprietà `[[HomeObject]]` fanno riferimento a `sayHiMixin`, come mostrato nella figura.
105
105
106
106
Poiché `super` ricerca i metodi in `[[HomeObject]].[[Prototype]]`, ciò significa che ricerca `sayHiMixin.[[Prototype]]`, non `User.[[Prototype]]`.
107
107
@@ -112,12 +112,12 @@ Ora creiamo un mixin per la vita reale.
112
112
Una caratteristica importante di molti oggetti del browser (ad esempio) è che questi possono generare eventi. Gli eventi sono un'ottimo modo per "trasmettere informazioni" a chiunque ne sia interessato. Quindi creiamo un mixin che ci consenta di aggiungere funzioni relative agli eventi, ad una qualsiasi classe/oggetto.
113
113
114
114
- Il mixin fornirà un metodo `.trigger(name, [...data])` per "generare un evento" quando qualcosa di significativo accade. L'argomento `name` è il nome dell'evento, ed altri argomenti opzionali possono essere aggiunti con dati relativi all'evento.
115
-
- Anche il metodo `.on(name, handler)` che aggiunge una funzione `handler` come listener degli eventi con il nome fornito. Sarà invocato nel momento in cui un evento con il `name` fornito verrà invocato dalla chiamata `.trigger`.
115
+
- Anche il metodo `.on(name, handler)`, che aggiunge una funzione `handler` come listener degli eventi con il nome fornito. Sarà invocato nel momento in cui un evento con il `name` fornito verrà invocato dalla chiamata `.trigger`.
116
116
- ...Ed il metodo `.off(name, handler)` che rimuove il listener `handler`.
117
117
118
118
Dopo aver aggiunto il mixin, un oggetto `user` sarà in grado di generare un evento di `"login"` quando l'utente effettua l'accesso. Ed un altro oggetto, diciamo, `calendar` potrebbe essere in ascolto di questi eventi in modo da caricare il calendario della persona autenticata.
119
119
120
-
Oppure un `menu` potrebbe generare un evento di `"select"` quando un elemento viene selezionato, ed un altro oggetto potrebbe essere in ascolto dell'evento. E cosi via.
120
+
Oppure un `menu` potrebbe generare un evento di `"select"` quando un elemento viene selezionato, ed un altro oggetto potrebbe essere in ascolto dell'evento. E così via.
121
121
122
122
Qui vediamo il codice:
123
123
@@ -165,9 +165,9 @@ let eventMixin = {
165
165
```
166
166
167
167
168
-
- `.on(eventName, handler)` -- assegna la funzione `handler` in modo tale che venga eseguita quando l'evento con il nome fornito viene generato. Tecnicamente, avremmo a disposizione anche la proprietà `_eventHandlers` che memorizza un array di gestori per ogni tipo di evento, quindi potremmo semplicemente alla lista.
168
+
- `.on(eventName, handler)` -- assegna la funzione `handler` in modo tale che venga eseguita quando l'evento con il nome fornito viene generato. Tecnicamente, avremmo a disposizione anche la proprietà `_eventHandlers` che memorizza un array di gestori per ogni tipo di evento, quindi potremmo semplicemente aggiungerlo alla lista.
169
169
- `.off(eventName, handler)` -- rimuove la funzione dalla lista dei gestori.
170
-
- `.trigger(eventName, ...args)` -- genera l'evento: tutti i gestori in `_eventHandlers[eventName]` vengono invocati, con la lista degli argomenti `...args`.
170
+
- `.trigger(eventName, ...args)` -- genera l'evento: tutti i gestori in `_eventHandlers[eventName]` vengono invocati con la lista degli argomenti `...args`.
0 commit comments