Casi d'uso pratici dei Proxy
Costruisca oggetti per la validazione, il logging e la reattività.
Casi d'uso pratici dei Proxy è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
I proxy nella pratica
Ora combinerà proxy e Reflect per risolvere problemi reali: convalida, registrazione, valori predefiniti e altro ancora. Ogni modello avvolge un oggetto semplice senza modificarlo.
Wrapper di convalida
Imporre uno schema: rifiutare ogni scrittura che non rispetta una regola. Il target rimane pulito perché i dati non validi non vengono mai memorizzati.
function validated(obj, rules) {
return new Proxy(obj, {
set(target, prop, value, receiver) {
const rule = rules[prop];
if (rule && !rule(value)) {
throw new TypeError('invalid value for ' + prop);
}
return Reflect.set(target, prop, value, receiver);
}
});
}
const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }Wrapper di registrazione
Tracciare ogni lettura e scrittura per il debug, inoltrando la richiesta tramite Reflect dopo averla registrata.
function logged(obj) {
return new Proxy(obj, {
get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
});
}
const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);Valori predefiniti
Restituire un valore alternativo per qualsiasi proprietà mancante, così le letture non restituiscono mai undefined.
function withDefault(obj, fallback) {
return new Proxy(obj, {
get(t, p, r) {
return p in t ? Reflect.get(t, p, r) : fallback;
}
});
}
const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);Indicizzazione negativa degli array
Consentire agli array di supportare gli indici negativi in stile Python traducendoli in un trap get.
function negIndex(arr) {
return new Proxy(arr, {
get(t, p, r) {
const i = Number(p);
if (Number.isInteger(i) && i < 0) {
return Reflect.get(t, t.length + i, r);
}
return Reflect.get(t, p, r);
}
});
}
const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);Vista di sola lettura
Esporre un oggetto che può essere letto ma mai modificato, utile per proteggere la configurazione condivisa.
function readonly(obj) {
return new Proxy(obj, {
set() { console.log('blocked write'); return false; },
deleteProperty() { console.log('blocked delete'); return false; }
});
}
const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);Contare gli accessi
Tenere traccia del numero di letture di ogni proprietà memorizzando i conteggi al di fuori del target.
function counted(obj) {
const counts = {};
const proxy = new Proxy(obj, {
get(t, p, r) {
counts[p] = (counts[p] || 0) + 1;
return Reflect.get(t, p, r);
}
});
return { proxy, counts };
}
const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);Proprietà virtuali calcolate
Esporre valori derivati che non vengono memorizzati, calcolandoli nuovamente a ogni lettura.
const rect = new Proxy({ width: 4, height: 3 }, {
get(t, p, r) {
if (p === 'area') return t.width * t.height;
return Reflect.get(t, p, r);
}
});
console.log(rect.area);
rect.width = 10;
console.log(rect.area);Generare errori per le letture sconosciute
Individuare subito gli errori di battitura generando un errore quando il codice legge una proprietà inesistente.
function strict(obj) {
return new Proxy(obj, {
get(t, p, r) {
if (typeof p === 'string' && !(p in t)) {
throw new ReferenceError('unknown property: ' + p);
}
return Reflect.get(t, p, r);
}
});
}
const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }Combinare più responsabilità
I wrapper reali combinano spesso convalida e registrazione in un unico handler, inoltrando ogni trap a Reflect.
const account = new Proxy({ balance: 0 }, {
set(t, p, v, r) {
if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
console.log(p + ' set to ' + v);
return Reflect.set(t, p, v, r);
}
});
account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }Perché questi modelli sono importanti
I proxy aggiungono comportamenti trasversali, convalida, registrazione, valori predefiniti e controllo degli accessi senza appesantire l'oggetto originale o il codice che lo utilizza. È esattamente così che i framework reattivi osservano le modifiche dello stato. Li utilizzi quando serve un'intercettazione trasparente.
const observed = new Proxy({ n: 0 }, {
set(t, p, v, r) {
const ok = Reflect.set(t, p, v, r);
console.log(p + ' is now ' + t[p]);
return ok;
}
});
observed.n = 1;
observed.n = 2;Verifica rapida
Quale trap del proxy utilizzerebbe per rifiutare i valori non validi prima che vengano memorizzati?
Riepilogo: casi d'uso pratici dei proxy
Ha applicato i proxy a problemi reali:
- La convalida nel trap set rifiuta i dati non validi.
- La registrazione traccia letture e scritture tramite
Reflect. - I valori predefiniti e le proprietà virtuali risiedono nel trap get.
- Le viste di sola lettura, il conteggio degli accessi e il controllo rigoroso degli errori di battitura avvolgono gli oggetti in modo trasparente.
Domande Frequenti
La lezione «Casi d'uso pratici dei Proxy» è gratuita?
Sì — il testo completo di «Casi d'uso pratici dei Proxy» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Casi d'uso pratici dei Proxy»?
Costruisca oggetti per la validazione, il logging e la reattività. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Casi d'uso pratici dei Proxy»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Creare un Proxy
- Trap get e set
- L'API Reflect
- Casi d'uso pratici dei Proxy