Proxyn käytännön käyttötapaukset
Rakentakaa validointi-, lokitus- ja reaktiivisia objekteja.
Proxyn käytännön käyttötapaukset on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Proxyt käytännössä
Nyt yhdistätte proxyt ja Reflect-olion todellisten ongelmien ratkaisemiseksi: validointi, lokitus, oletusarvot ja paljon muuta. Jokainen malli käärii tavallisen olion muuttamatta sitä.
Validointikääre
Pakottakaa skeema: hylätkää jokainen kirjoitus, joka ei täytä sääntöä. Kohdeolio säilyy puhtaana, koska virheellinen data ei koskaan päädy sinne.
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); }Lokituskääre
Jäljittäkää jokainen lukeminen ja kirjoitus virheenkorjausta varten välittämällä toiminto lokituksen jälkeen Reflect-olion kautta.
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);Oletusarvot
Palauttakaa oletusarvo jokaiselle puuttuvalle ominaisuudelle, jotta lukeminen ei koskaan palauta arvoa 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);Taulukon negatiiviset indeksit
Saattakaa taulukot tukemaan Python-tyylisiä negatiivisia indeksejä muuntamalla ne get-trapissa.
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]);Vain luku -näkymä
Tarjotkaa olio, jota voi lukea mutta johon ei voi koskaan kirjoittaa. Tämä on hyödyllistä jaetun asetuskokoonpanon suojaamisessa.
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);Käytön laskeminen
Seuratkaa, kuinka monta kertaa kutakin ominaisuutta luetaan, tallentamalla laskurit kohdeolion ulkopuolelle.
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);Lasketut virtuaaliset ominaisuudet
Tuokaa saataville johdetut arvot, joita ei tallenneta, vaan jotka lasketaan uudelleen jokaisella lukukerralla.
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);Poikkeuksen heittäminen tuntemattomista lukemisista
Havaitkaa kirjoitusvirheet ajoissa heittämällä poikkeus, kun koodi lukee olematonta ominaisuutta.
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); }Huolien yhdistäminen
Todellisissa kääreissä validointi ja lokitus yhdistetään usein samaan käsittelijään, ja jokainen trap välittää toiminnon Reflect-olion kautta.
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); }Miksi näillä malleilla on merkitystä
Proxyt lisäävät poikkileikkaavaa toimintaa, validointia, lokitusta, oletusarvoja ja käyttöoikeuksien hallintaa saastuttamatta alkuperäistä oliota tai sen kutsujia. Juuri näin reaktiiviset kehykset seuraavat tilan muutoksia. Käyttäkää niitä, kun tarvitsette läpinäkyvää sieppausta.
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;Pikatarkistus
Mitä proxy-trappia käyttäisitte virheellisten arvojen hylkäämiseen ennen niiden tallentamista?
Kertaus: proxyn käytännön käyttötapaukset
Sovelsitte proxyja todellisiin ongelmiin:
- Validointi set-trapissa hylkää virheellisen datan.
- Lokitus jäljittää lukemiset ja kirjoitukset
Reflect-olion avulla. - Oletusarvot ja virtuaaliset ominaisuudet toteutetaan get-trapissa.
- Vain luku -näkymät, käytön laskeminen ja tiukka kirjoitusvirheiden tarkistus käärivät oliot läpinäkyvästi.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Proxyn käytännön käyttötapaukset” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Proxyn käytännön käyttötapaukset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Proxyn käytännön käyttötapaukset”?
Rakentakaa validointi-, lokitus- ja reaktiivisia objekteja. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Proxyn käytännön käyttötapaukset”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Proxyn luominen
- get- ja set-ansat
- Reflect-API
- Proxyn käytännön käyttötapaukset