JavaScript Proxy Mønstre: Avanceret Objektafskæring og Validering

JavaScript Proxy objektet er en kraftfuld funktion, der giver dig mulighed for at afskære og tilpasse grundlæggende objektoperationer. Det muliggør avancerede metaprogrammeringsteknikker, der giver større kontrol over objektadfærd og åbner op for muligheder for sofistikerede designmønstre. Denne artikel udforsker forskellige Proxy mønstre og viser deres anvendelsesmuligheder inden for validering, afskæring og dynamisk adfærdsændring. Vi vil dykke ned i praktiske eksempler for at demonstrere, hvordan Proxies kan forbedre kodekvalitet, sikkerhed og vedligeholdelse i dine JavaScript-projekter.

Forståelse af JavaScript Proxy

I sin kerne ombryder et Proxy objekt et andet objekt (målet) og afskærer operationer, der udføres på dette mål. Disse afskæringer håndteres af fælder, som er metoder, der definerer brugerdefineret adfærd for specifikke operationer som at hente en egenskab, indstille en egenskab eller kalde en funktion. Proxy API'et giver en fleksibel og udvidelig mekanisme til at ændre objekters standardadfærd.

Nøglebegreber

• Mål: Det originale objekt, som Proxy'en ombryder.
• Handler: Et objekt, der indeholder fældemetoderne. Hver fælde svarer til en specifik operation.
• Fælder: Metoder i handleren, der afskærer og tilpasser objektoperationer. Almindelige fælder inkluderer get, set, apply og construct.

Oprettelse af en Proxy

For at oprette en Proxy bruger du Proxy konstruktøren, der sender målobjektet og handlerobjektet som argumenter:

            const target = {};
const handler = {
 get: function(target, property, receiver) {
 console.log(`Henter egenskab: ${property}`);
 return Reflect.get(target, property, receiver);
 }
};

const proxy = new Proxy(target, handler);

proxy.name = "John"; // Logger: Henter egenskab: name
console.log(proxy.name); // Logger: Henter egenskab: name, derefter John

            

              
                Copy
              
            
          

Almindelige Proxy Fælder

Proxies tilbyder en række fælder til at afskære forskellige operationer. Her er nogle af de mest almindeligt anvendte fælder:

• get(target, property, receiver): Afskærer egenskabsadgang.
• set(target, property, value, receiver): Afskærer egenskabstilordning.
• has(target, property): Afskærer in operatoren.
• deleteProperty(target, property): Afskærer delete operatoren.
• apply(target, thisArg, argumentsList): Afskærer funktionskald.
• construct(target, argumentsList, newTarget): Afskærer new operatoren.
• getPrototypeOf(target): Afskærer Object.getPrototypeOf() metoden.
• setPrototypeOf(target, prototype): Afskærer Object.setPrototypeOf() metoden.
• isExtensible(target): Afskærer Object.isExtensible() metoden.
• preventExtensions(target): Afskærer Object.preventExtensions() metoden.
• getOwnPropertyDescriptor(target, property): Afskærer Object.getOwnPropertyDescriptor() metoden.
• defineProperty(target, property, descriptor): Afskærer Object.defineProperty() metoden.
• ownKeys(target): Afskærer Object.getOwnPropertyNames() og Object.getOwnPropertySymbols() metoderne.

Proxy Mønstre

Lad os nu udforske nogle praktiske Proxy mønstre og deres anvendelser:

1. Validerings Proxy

En Validerings Proxy håndhæver begrænsninger for egenskabstilordninger. Den afskærer set fælden for at validere den nye værdi, før den tillader, at tilordningen fortsætter.

Eksempel: Validering af brugerinput i en formular.

            const user = {};

const validator = {
 set: function(target, property, value) {
 if (property === 'age') {
 if (!Number.isInteger(value) || value < 0 || value > 120) {
 throw new Error('Ugyldig alder. Alder skal være et heltal mellem 0 og 120.');
 }
 }
 target[property] = value;
 return true; // Angiv succes
 }
};

const proxy = new Proxy(user, validator);

proxy.name = 'Alice';
proxy.age = 30;

console.log(user);

try {
 proxy.age = 'invalid'; // Kaster en fejl
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

I dette eksempel kontrollerer set fælden, om age egenskaben er et heltal mellem 0 og 120. Hvis valideringen mislykkes, kastes der en fejl, hvilket forhindrer, at den ugyldige værdi tilordnes.

Globalt Eksempel: Dette valideringsmønster er afgørende for at sikre dataintegritet i globale applikationer, hvor brugerinput kan komme fra forskellige kilder og kulturer. For eksempel kan validering af postnumre variere betydeligt mellem lande. En valideringsproxy kan tilpasses til at understøtte forskellige valideringsregler baseret på brugerens placering.

            const address = {};

const addressValidator = {
 set: function(target, property, value) {
 if (property === 'postalCode') {
 // Eksempel: Antager en simpel amerikansk postnummer validering
 if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)) {
 throw new Error('Ugyldigt amerikansk postnummer.');
 }
 }
 target[property] = value;
 return true;
 }
};

const addressProxy = new Proxy(address, addressValidator);

addressProxy.postalCode = "12345-6789"; // Gyldig

try {
 addressProxy.postalCode = "abcde"; // Ugyldig
} catch(e) {
 console.log(e);
}

// For en mere international applikation ville du bruge et mere sofistikeret valideringsbibliotek
// der kunne validere postnumre baseret på brugerens land.

            

              
                Copy
              
            
          

2. Lognings Proxy

En Lognings Proxy afskærer egenskabsadgang og -tilordning for at logge disse operationer. Den er nyttig til debugging og auditing.

Eksempel: Logning af egenskabsadgang og -modifikation.

            const data = {
 value: 10
};

const logger = {
 get: function(target, property) {
 console.log(`Henter egenskab: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 console.log(`Indstiller egenskab: ${property} til ${value}`);
 target[property] = value;
 return true;
 }
};

const proxy = new Proxy(data, logger);

console.log(proxy.value); // Logger: Henter egenskab: value, derefter 10
proxy.value = 20; // Logger: Indstiller egenskab: value til 20

            

              
                Copy
              
            
          

get og set fælderne logger den egenskab, der tilgås eller modificeres, hvilket giver et spor af objektinteraktioner.

Globalt Eksempel: I en multinational virksomhed kan logningsproxyer bruges til at auditere dataadgang og modifikationer udført af medarbejdere på forskellige lokationer. Dette er afgørende for overholdelse og sikkerhedsformål. Tidszoner skal muligvis tages i betragtning i logningsoplysningerne.

            const employeeData = {
 name: "John Doe",
 salary: 50000
};

const auditLogger = {
 get: function(target, property) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [GET] Adgang til egenskab: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 const timestamp = new Date().toISOString();
 console.log(`${timestamp} - [SET] Indstiller egenskab: ${property} til ${value}`);
 target[property] = value;
 return true;
 }
};

const proxiedEmployee = new Proxy(employeeData, auditLogger);

proxiedEmployee.name; // Logger tidsstempel og adgang til 'name'
proxiedEmployee.salary = 60000; // Logger tidsstempel og modifikation af 'salary'
            

              
                Copy
              
            
          

3. Skrivebeskyttet Proxy

En Skrivebeskyttet Proxy forhindrer egenskabstilordning. Den afskærer set fælden og kaster en fejl, hvis der forsøges at ændre en egenskab.

Eksempel: Gør et objekt uforanderligt.

            const config = {
 apiUrl: 'https://api.example.com'
};

const readOnly = {
 set: function(target, property, value) {
 throw new Error(`Kan ikke indstille egenskab: ${property}. Objektet er skrivebeskyttet.`);
 }
};

const proxy = new Proxy(config, readOnly);

console.log(proxy.apiUrl);

try {
 proxy.apiUrl = 'https://newapi.example.com'; // Kaster en fejl
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

Ethvert forsøg på at indstille en egenskab på proxyen vil resultere i en fejl, hvilket sikrer, at objektet forbliver uforanderligt.

Globalt Eksempel: Dette mønster er nyttigt til at beskytte konfigurationsfiler, der ikke bør ændres under kørsel, især i globalt distribuerede applikationer. Utilsigtet ændring af konfigurationen i én region kan påvirke hele systemet.

            const globalSettings = {
 defaultLanguage: "en",
 currency: "USD",
 timeZone: "UTC"
};

const immutableHandler = {
 set: function(target, property, value) {
 throw new Error(`Kan ikke ændre skrivebeskyttet egenskab: ${property}`);
 }
};

const immutableSettings = new Proxy(globalSettings, immutableHandler);

console.log(immutableSettings.defaultLanguage); // outputs 'en'

// Forsøg på at ændre en værdi vil kaste en fejl
// immutableSettings.defaultLanguage = "fr"; // kaster Error: Kan ikke ændre skrivebeskyttet egenskab: defaultLanguage
            

              
                Copy
              
            
          

4. Virtuel Proxy

En Virtuel Proxy kontrollerer adgangen til en ressource, der kan være dyr at oprette eller hente. Den kan forsinke oprettelsen af ressourcen, indtil den faktisk er nødvendig.

Eksempel: Lazy loading af et billede.

            const image = {
 display: function() {
 console.log('Viser billede');
 }
};

const virtualProxy = {
 get: function(target, property) {
 if (property === 'display') {
 console.log('Opretter billede...');
 const realImage = {
 display: function() {
 console.log('Viser ægte billede');
 }
 };
 target.display = realImage.display;
 return realImage.display;
 }
 return target[property];
 }
};

const proxy = new Proxy(image, virtualProxy);

// Billedet oprettes ikke, før display kaldes.
proxy.display(); // Logger: Opretter billede..., derefter Viser ægte billede

            

              
                Copy
              
            
          

Det ægte billedeobjekt oprettes kun, når display metoden kaldes, hvilket undgår unødvendigt ressourceforbrug.

Globalt Eksempel: Overvej en global e-handels hjemmeside, der serverer billeder af produkter. Ved hjælp af en Virtuel Proxy kan billeder kun indlæses, når de er synlige for brugeren, hvilket optimerer båndbreddeforbruget og forbedrer sideindlæsningstiderne, især for brugere med langsomme internetforbindelser i forskellige regioner.

            const product = {
 loadImage: function() {
 console.log("Indlæser højopløsningsbillede...");
 // Simuler indlæsning af et stort billede
 setTimeout(() => {
 console.log("Billede indlæst");
 this.displayImage();
 }, 2000);
 },
 displayImage: function() {
 console.log("Viser billedet");
 }
};

const lazyLoadProxy = {
 get: function(target, property) {
 if (property === "displayImage") {
 // I stedet for at indlæse med det samme, forsink indlæsningen
 console.log("Forespørgsel om at vise billede modtaget. Indlæser...");
 target.loadImage();
 return function() { /* Intentionally Empty */ }; // Returner tom funktion for at forhindre øjeblikkelig udførelse
 }
 return target[property];
 }
};

const proxiedProduct = new Proxy(product, lazyLoadProxy);

// Kald displayImage udløser den dovne indlæsningsproces
proxiedProduct.displayImage();
            

              
                Copy
              
            
          

5. Genkaldelig Proxy

En Genkaldelig Proxy giver dig mulighed for at tilbagekalde proxyen når som helst, hvilket gør den ubrugelig. Dette er nyttigt i sikkerhedsfølsomme scenarier, hvor du har brug for at kontrollere adgangen til et objekt.

Eksempel: Giver midlertidig adgang til en ressource.

            const target = {
 secret: 'Dette er en hemmelighed'
};

const handler = {
 get: function(target, property) {
 console.log('Tilgår hemmelig egenskab');
 return target[property];
 }
};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.secret); // Logger: Tilgår hemmelig egenskab, derefter Dette er en hemmelighed

revoke();

try {
 console.log(proxy.secret); // Kaster en TypeError
} catch (error) {
 console.error(error.message); // Logger: Kan ikke udføre 'get' på en proxy, der er blevet tilbagekaldt
}

            

              
                Copy
              
            
          

Proxy.revocable() metoden opretter en genkaldelig proxy. Kald af revoke() funktionen gør proxyen ubrugelig, hvilket forhindrer yderligere adgang til målobjektet.

Globalt Eksempel: I et globalt distribueret system kan du bruge en genkaldelig proxy til at give midlertidig adgang til følsomme data til en tjeneste, der kører i en bestemt region. Efter en vis tid kan proxyen tilbagekaldes for at forhindre uautoriseret adgang.

            const sensitiveData = {
 apiKey: "SUPER_SECRET_KEY"
};

const handler = {
 get: function(target, property) {
 console.log("Tilgår følsomme data");
 return target[property];
 }
};

const { proxy: dataProxy, revoke: revokeAccess } = Proxy.revocable(sensitiveData, handler);

// Tillad adgang i 5 sekunder
setTimeout(() => {
 revokeAccess();
 console.log("Adgang tilbagekaldt");
}, 5000);

// Forsøg at tilgå data
console.log(dataProxy.apiKey); // Logger API-nøglen

// Efter 5 sekunder vil dette kaste en fejl
setTimeout(() => {
 try {
 console.log(dataProxy.apiKey); // Kaster: TypeError: Kan ikke udføre 'get' på en proxy, der er blevet tilbagekaldt
 } catch (error) {
 console.error(error);
 }
}, 6000);

            

              
                Copy
              
            
          

6. Typekonverterings Proxy

En Typekonverterings Proxy afskærer egenskabsadgang for automatisk at konvertere den returnerede værdi til en bestemt type. Dette kan være nyttigt til at arbejde med data fra forskellige kilder, der kan have inkonsekvente typer.

Eksempel: Konvertering af strengværdier til tal.

            const data = {
 price: '10.99',
 quantity: '5'
};

const typeConverter = {
 get: function(target, property) {
 const value = target[property];
 if (typeof value === 'string' && !isNaN(Number(value))) {
 return Number(value);
 }
 return value;
 }
};

const proxy = new Proxy(data, typeConverter);

console.log(proxy.price + 1); // Logger: 11.99 (tal)
console.log(proxy.quantity * 2); // Logger: 10 (tal)

            

              
                Copy
              
            
          

get fælden kontrollerer, om egenskabsværdien er en streng, der kan konverteres til et tal. Hvis det er tilfældet, konverterer den værdien til et tal, før den returneres.

Globalt Eksempel: Når du håndterer data, der kommer fra API'er med forskellige formateringskonventioner (f.eks. forskellige datoformater eller valutasymboler), kan en Typekonverterings Proxy sikre datakonsistens på tværs af din applikation, uanset kilden. For eksempel håndtering af forskellige datoformater og konvertering af dem alle til ISO 8601 format.

            const apiData = {
 dateUS: "12/31/2023",
 dateEU: "31/12/2023"
};

const dateFormatConverter = {
 get: function(target, property) {
 let value = target[property];
 if (property.startsWith("date")) {
 // Forsøg at konvertere både amerikanske og EU-datoformater til ISO 8601
 if (property === "dateUS") {
 const [month, day, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 } else if (property === "dateEU") {
 const [day, month, year] = value.split("/");
 value = `${year}-${month}-${day}`;
 }
 return value;
 }
 return value;
 }
};

const proxiedApiData = new Proxy(apiData, dateFormatConverter);

console.log(proxiedApiData.dateUS); // Outputs: 2023-12-31
console.log(proxiedApiData.dateEU); // Outputs: 2023-12-31
            

              
                Copy
              
            
          

Bedste Praksis for Brug af Proxies

• Brug Proxies med Omtanke: Proxies kan tilføje kompleksitet til din kode. Brug dem kun, når de giver betydelige fordele, såsom forbedret validering, logning eller kontrol over objektadfærd.
• Overvej Ydeevne: Proxy fælder kan introducere overhead. Profiler din kode for at sikre, at Proxies ikke påvirker ydeevnen negativt, især i ydeevnekritiske sektioner.
• Håndter Fejl Graciøst: Sørg for, at dine fældemetoder håndterer fejl korrekt og giver informative fejlmeddelelser, når det er nødvendigt.
• Brug Reflect API: Reflect API'et giver metoder, der afspejler standardadfærden for objektoperationer. Brug Reflect metoder inden for dine fældemetoder til at delegere til den originale adfærd, når det er relevant. Dette sikrer, at dine fælder ikke bryder eksisterende funktionalitet.
• Dokumenter Dine Proxies: Dokumenter tydeligt formålet og adfærden af dine Proxies, inklusive de fælder, der bruges, og de begrænsninger, der håndhæves. Dette vil hjælpe andre udviklere med at forstå og vedligeholde din kode.

Konklusion

JavaScript Proxies er et kraftfuldt værktøj til avanceret objektmanipulation og afskæring. Ved at forstå og anvende forskellige Proxy mønstre kan du forbedre kodekvalitet, sikkerhed og vedligeholdelse. Fra validering af brugerinput til kontrol af adgangen til følsomme ressourcer tilbyder Proxies en fleksibel og udvidelig mekanisme til at tilpasse objektadfærd. Når du udforsker mulighederne for Proxies, skal du huske at bruge dem med omtanke og dokumentere din kode grundigt.

De medfølgende eksempler demonstrerer, hvordan man bruger JavaScript Proxies til at løse virkelige problemer i en global kontekst. Ved at forstå og anvende disse mønstre kan du skabe mere robuste, sikre og vedligeholdelige applikationer, der opfylder behovene hos en mangfoldig brugerbase. Husk altid at overveje de globale implikationer af din kode og tilpasse dine løsninger til de specifikke krav i forskellige regioner og kulturer.