תבניות Proxy בג'אווהסקריפט: יירוט ואימות אובייקטים מתקדמים

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

const proxy = new Proxy(target, handler);

proxy.name = "John"; // Logs: Getting property: name
console.log(proxy.name); // Logs: Getting property: name, then John

            

              
                Copy
              
            
          

            const user = {};

const validator = {
 set: function(target, property, value) {
 if (property === 'age') {
 if (!Number.isInteger(value) || value < 0 || value > 120) {
 throw new Error('Invalid age. Age must be an integer between 0 and 120.');
 }
 }
 target[property] = value;
 return true; // Indicate success
 }
};

const proxy = new Proxy(user, validator);

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

console.log(user);

try {
 proxy.age = 'invalid'; // Throws an error
} catch (error) {
 console.error(error.message);
}

            

              
                Copy
              
            
          

            const address = {};

const addressValidator = {
 set: function(target, property, value) {
 if (property === 'postalCode') {
 // Example: Assuming a simple US postal code validation
 if (!/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)) {
 throw new Error('Invalid US postal code.');
 }
 }
 target[property] = value;
 return true;
 }
};

const addressProxy = new Proxy(address, addressValidator);

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

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

// For a more international application, you'd use a more sophisticated validation library
// that could validate postal codes based on the user's country.

            

              
                Copy
              
            
          

            const data = {
 value: 10
};

const logger = {
 get: function(target, property) {
 console.log(`Getting property: ${property}`);
 return target[property];
 },
 set: function(target, property, value) {
 console.log(`Setting property: ${property} to ${value}`);
 target[property] = value;
 return true;
 }
};

const proxy = new Proxy(data, logger);

console.log(proxy.value); // Logs: Getting property: value, then 10
proxy.value = 20; // Logs: Setting property: value to 20

            

              
                Copy
              
            
          

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

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

const proxiedEmployee = new Proxy(employeeData, auditLogger);

proxiedEmployee.name; // Logs timestamp and access to 'name'
proxiedEmployee.salary = 60000; // Logs timestamp and modification of 'salary'
            

              
                Copy
              
            
          

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

const readOnly = {
 set: function(target, property, value) {
 throw new Error(`Cannot set property: ${property}. Object is read-only.`);
 }
};

const proxy = new Proxy(config, readOnly);

console.log(proxy.apiUrl);

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

            

              
                Copy
              
            
          

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

const immutableHandler = {
 set: function(target, property, value) {
 throw new Error(`Cannot modify read-only property: ${property}`);
 }
};

const immutableSettings = new Proxy(globalSettings, immutableHandler);

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

// Attempting to change a value will throw an error
// immutableSettings.defaultLanguage = "fr"; // throws Error: Cannot modify read-only property: defaultLanguage
            

              
                Copy
              
            
          

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

const virtualProxy = {
 get: function(target, property) {
 if (property === 'display') {
 console.log('Creating image...');
 const realImage = {
 display: function() {
 console.log('Displaying real image');
 }
 };
 target.display = realImage.display;
 return realImage.display;
 }
 return target[property];
 }
};

const proxy = new Proxy(image, virtualProxy);

// The image is not created until display is called.
proxy.display(); // Logs: Creating image..., then Displaying real image

            

              
                Copy
              
            
          

            const product = {
 loadImage: function() {
 console.log("Loading high-resolution image...");
 // Simulate loading a large image
 setTimeout(() => {
 console.log("Image loaded");
 this.displayImage();
 }, 2000);
 },
 displayImage: function() {
 console.log("Displaying the image");
 }
};

const lazyLoadProxy = {
 get: function(target, property) {
 if (property === "displayImage") {
 // Instead of loading immediately, delay the loading
 console.log("Request to display image received. Loading...");
 target.loadImage();
 return function() { /* Intentionally Empty */ }; // Return empty function to prevent immediate execution
 }
 return target[property];
 }
};

const proxiedProduct = new Proxy(product, lazyLoadProxy);

// Call displayImage triggers the lazy loading process
proxiedProduct.displayImage();
            

              
                Copy
              
            
          

            const target = {
 secret: 'This is a secret'
};

const handler = {
 get: function(target, property) {
 console.log('Accessing secret property');
 return target[property];
 }
};

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

console.log(proxy.secret); // Logs: Accessing secret property, then This is a secret

revoke();

try {
 console.log(proxy.secret); // Throws a TypeError
} catch (error) {
 console.error(error.message); // Logs: Cannot perform 'get' on a proxy that has been revoked
}

            

              
                Copy
              
            
          

            const sensitiveData = {
 apiKey: "SUPER_SECRET_KEY"
};

const handler = {
 get: function(target, property) {
 console.log("Accessing sensitive data");
 return target[property];
 }
};

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

// Allow access for 5 seconds
setTimeout(() => {
 revokeAccess();
 console.log("Access revoked");
}, 5000);

// Attempt to access data
console.log(dataProxy.apiKey); // Logs the API Key

// After 5 seconds, this will throw an error
setTimeout(() => {
 try {
 console.log(dataProxy.apiKey); // Throws: TypeError: Cannot perform 'get' on a proxy that has been revoked
 } catch (error) {
 console.error(error);
 }
}, 6000);

            

              
                Copy
              
            
          

            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); // Logs: 11.99 (number)
console.log(proxy.quantity * 2); // Logs: 10 (number)

            

              
                Copy
              
            
          

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

const dateFormatConverter = {
 get: function(target, property) {
 let value = target[property];
 if (property.startsWith("date")) {
 // Attempt to convert both US and EU date formats to 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