JavaScript Proxy Patterns: Προηγμένη Παρακώλυση και Επικύρωση Αντικειμένων

Το αντικείμενο JavaScript Proxy είναι ένα ισχυρό χαρακτηριστικό που σας επιτρέπει να παρακολουθείτε και να προσαρμόζετε τις θεμελιώδεις λειτουργίες αντικειμένων. Ενεργοποιεί προηγμένες τεχνικές μεταπρογραμματισμού, προσφέροντας μεγαλύτερο έλεγχο στη συμπεριφορά των αντικειμένων και ανοίγοντας δυνατότητες για εξελιγμένα πρότυπα σχεδίασης. Αυτό το άρθρο εξερευνά διάφορα μοτίβα Proxy, παρουσιάζοντας τις περιπτώσεις χρήσης τους στην επικύρωση, την παρακολούθηση και την τροποποίηση δυναμικής συμπεριφοράς. Θα εμβαθύνουμε σε πρακτικά παραδείγματα για να δείξουμε πώς τα Proxies μπορούν να βελτιώσουν την ποιότητα του κώδικα, την ασφάλεια και τη συντηρησιμότητα στα έργα σας JavaScript.

Κατανόηση του JavaScript Proxy

Στον πυρήνα του, ένα αντικείμενο Proxy περικλείει ένα άλλο αντικείμενο (τον στόχο) και παρακολουθεί τις λειτουργίες που εκτελούνται σε αυτόν τον στόχο. Αυτές οι παρακολουθήσεις χειρίζονται από παγίδες, οι οποίες είναι μέθοδοι που ορίζουν προσαρμοσμένη συμπεριφορά για συγκεκριμένες λειτουργίες, όπως η λήψη μιας ιδιότητας, η ρύθμιση μιας ιδιότητας ή η κλήση μιας συνάρτησης. Το Proxy API παρέχει έναν ευέλικτο και επεκτάσιμο μηχανισμό για την τροποποίηση της προεπιλεγμένης συμπεριφοράς των αντικειμένων.

Βασικές Έννοιες

• Στόχος: Το αρχικό αντικείμενο που περικλείει το Proxy.
• Χειριστής: Ένα αντικείμενο που περιέχει τις μεθόδους παγίδας. Κάθε παγίδα αντιστοιχεί σε μια συγκεκριμένη λειτουργία.
• Παγίδες: Μέθοδοι εντός του χειριστή που παρακολουθούν και προσαρμόζουν τις λειτουργίες αντικειμένων. Οι κοινές παγίδες περιλαμβάνουν get, set, apply και construct.

Δημιουργία Proxy

Για να δημιουργήσετε ένα Proxy, χρησιμοποιείτε τον κατασκευαστή 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
              
            
          

Κοινές Παγίδες Proxy

Τα Proxies προσφέρουν μια σειρά από παγίδες για την παρακολούθηση διαφόρων λειτουργιών. Ακολουθούν μερικές από τις πιο συχνά χρησιμοποιούμενες παγίδες:

• get(target, property, receiver): Παρακολουθεί την πρόσβαση ιδιοτήτων.
• set(target, property, value, receiver): Παρακολουθεί την εκχώρηση ιδιοτήτων.
• has(target, property): Παρακολουθεί τον τελεστή in.
• deleteProperty(target, property): Παρακολουθεί τον τελεστή delete.
• apply(target, thisArg, argumentsList): Παρακολουθεί τις κλήσεις συναρτήσεων.
• construct(target, argumentsList, newTarget): Παρακολουθεί τον τελεστή new.
• getPrototypeOf(target): Παρακολουθεί τη μέθοδο Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Παρακολουθεί τη μέθοδο Object.setPrototypeOf().
• isExtensible(target): Παρακολουθεί τη μέθοδο Object.isExtensible().
• preventExtensions(target): Παρακολουθεί τη μέθοδο Object.preventExtensions().
• getOwnPropertyDescriptor(target, property): Παρακολουθεί τη μέθοδο Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor): Παρακολουθεί τη μέθοδο Object.defineProperty().
• ownKeys(target): Παρακολουθεί τις μεθόδους Object.getOwnPropertyNames() και Object.getOwnPropertySymbols().

Μοτίβα Proxy

Τώρα, ας εξερευνήσουμε μερικά πρακτικά μοτίβα Proxy και τις εφαρμογές τους:

1. Proxy Επικύρωσης

Ένα Proxy Επικύρωσης επιβάλλει περιορισμούς στις εκχωρήσεις ιδιοτήτων. Παρακολουθεί την παγίδα set για να επικυρώσει τη νέα τιμή πριν επιτρέψει την εκχώρηση να προχωρήσει.

Παράδειγμα: Επικύρωση της εισαγωγής χρήστη σε μια φόρμα.

            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
              
            
          

Σε αυτό το παράδειγμα, η παγίδα set ελέγχει εάν η ιδιότητα age είναι ένας ακέραιος αριθμός μεταξύ 0 και 120. Εάν η επικύρωση αποτύχει, δημιουργείται ένα σφάλμα, εμποδίζοντας την εκχώρηση της μη έγκυρης τιμής.

Καθολικό Παράδειγμα: Αυτό το μοτίβο επικύρωσης είναι απαραίτητο για τη διασφάλιση της ακεραιότητας των δεδομένων σε καθολικές εφαρμογές όπου η εισαγωγή χρήστη μπορεί να προέρχεται από διάφορες πηγές και πολιτισμούς. Για παράδειγμα, η επικύρωση των ταχυδρομικών κωδικών μπορεί να διαφέρει σημαντικά μεταξύ των χωρών. Ένα proxy επικύρωσης μπορεί να προσαρμοστεί για να υποστηρίξει διαφορετικούς κανόνες επικύρωσης με βάση την τοποθεσία του χρήστη.

            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
              
            
          

2. Proxy Καταγραφής

Ένα Proxy Καταγραφής παρακολουθεί την πρόσβαση και την εκχώρηση ιδιοτήτων για να καταγράψει αυτές τις λειτουργίες. Είναι χρήσιμο για τον εντοπισμό σφαλμάτων και τον έλεγχο.

Παράδειγμα: Καταγραφή της πρόσβασης και της τροποποίησης ιδιοτήτων.

            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
              
            
          

Οι παγίδες get και set καταγράφουν την ιδιότητα στην οποία γίνεται πρόσβαση ή τροποποίηση, παρέχοντας μια ίχνη αλληλεπιδράσεων αντικειμένων.

Καθολικό Παράδειγμα: Σε μια πολυεθνική εταιρεία, τα proxy καταγραφής μπορούν να χρησιμοποιηθούν για τον έλεγχο της πρόσβασης και των τροποποιήσεων δεδομένων που πραγματοποιούνται από υπαλλήλους σε διαφορετικές τοποθεσίες. Αυτό είναι ζωτικής σημασίας για σκοπούς συμμόρφωσης και ασφάλειας. Οι ζώνες ώρας ενδέχεται να πρέπει να ληφθούν υπόψη στις πληροφορίες καταγραφής.

            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
              
            
          

3. Proxy Μόνο για Ανάγνωση

Ένα Proxy Μόνο για Ανάγνωση αποτρέπει την εκχώρηση ιδιοτήτων. Παρακολουθεί την παγίδα set και δημιουργεί ένα σφάλμα εάν γίνει προσπάθεια τροποποίησης μιας ιδιότητας.

Παράδειγμα: Κάνοντας ένα αντικείμενο αμετάβλητο.

            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
              
            
          

Οποιαδήποτε προσπάθεια ρύθμισης μιας ιδιότητας στο proxy θα έχει ως αποτέλεσμα ένα σφάλμα, διασφαλίζοντας ότι το αντικείμενο παραμένει αμετάβλητο.

Καθολικό Παράδειγμα: Αυτό το μοτίβο είναι χρήσιμο για την προστασία αρχείων διαμόρφωσης που δεν πρέπει να τροποποιηθούν κατά το χρόνο εκτέλεσης, ειδικά σε παγκόσμιες κατανεμημένες εφαρμογές. Η τυχαία τροποποίηση της διαμόρφωσης σε μια περιοχή μπορεί να επηρεάσει ολόκληρο το σύστημα.

            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
              
            
          

4. Εικονικό Proxy

Ένα Εικονικό Proxy ελέγχει την πρόσβαση σε έναν πόρο που μπορεί να είναι ακριβός για δημιουργία ή ανάκτηση. Μπορεί να καθυστερήσει τη δημιουργία του πόρου μέχρι να χρειαστεί πραγματικά.

Παράδειγμα: Lazy loading μιας εικόνας.

            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
              
            
          

Το πραγματικό αντικείμενο εικόνας δημιουργείται μόνο όταν καλείται η μέθοδος display, αποφεύγοντας την περιττή κατανάλωση πόρων.

Καθολικό Παράδειγμα: Εξετάστε έναν παγκόσμιο ιστότοπο ηλεκτρονικού εμπορίου που εξυπηρετεί εικόνες προϊόντων. Χρησιμοποιώντας ένα Εικονικό Proxy, οι εικόνες μπορούν να φορτωθούν μόνο όταν είναι ορατές στον χρήστη, βελτιστοποιώντας τη χρήση του εύρους ζώνης και βελτιώνοντας τους χρόνους φόρτωσης σελίδων, ειδικά για χρήστες με αργές συνδέσεις στο Διαδίκτυο σε διαφορετικές περιοχές.

            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
              
            
          

5. Ανακλητό Proxy

Ένα Ανακλητό Proxy σας επιτρέπει να ανακαλέσετε το proxy ανά πάσα στιγμή, καθιστώντας το άχρηστο. Αυτό είναι χρήσιμο για σενάρια ευαίσθητα στην ασφάλεια όπου πρέπει να ελέγξετε την πρόσβαση σε ένα αντικείμενο.

Παράδειγμα: Παροχή προσωρινής πρόσβασης σε έναν πόρο.

            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
              
            
          

Η μέθοδος Proxy.revocable() δημιουργεί ένα ανακλητό proxy. Η κλήση της συνάρτησης revoke() καθιστά το proxy άχρηστο, αποτρέποντας περαιτέρω πρόσβαση στο αντικείμενο στόχο.

Καθολικό Παράδειγμα: Σε ένα παγκόσμιο κατανεμημένο σύστημα, μπορείτε να χρησιμοποιήσετε ένα ανακλητό proxy για να παραχωρήσετε προσωρινή πρόσβαση σε ευαίσθητα δεδομένα σε μια υπηρεσία που εκτελείται σε μια συγκεκριμένη περιοχή. Μετά από ένα ορισμένο χρονικό διάστημα, το proxy μπορεί να ανακληθεί για να αποτραπεί η μη εξουσιοδοτημένη πρόσβαση.

            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
              
            
          

6. Proxy Μετατροπής Τύπου

Ένα Proxy Μετατροπής Τύπου παρακολουθεί την πρόσβαση ιδιοτήτων για να μετατρέψει αυτόματα την τιμή που επιστρέφεται σε έναν συγκεκριμένο τύπο. Αυτό μπορεί να είναι χρήσιμο για την εργασία με δεδομένα από διαφορετικές πηγές που μπορεί να έχουν ασυνεπείς τύπους.

Παράδειγμα: Μετατροπή τιμών συμβολοσειρών σε αριθμούς.

            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
              
            
          

Η παγίδα get ελέγχει εάν η τιμή της ιδιότητας είναι μια συμβολοσειρά που μπορεί να μετατραπεί σε αριθμό. Εάν ναι, μετατρέπει την τιμή σε αριθμό πριν την επιστρέψει.

Καθολικό Παράδειγμα: Όταν έχετε να κάνετε με δεδομένα που προέρχονται από API με διαφορετικές συμβάσεις μορφοποίησης (π.χ. διαφορετικές μορφές ημερομηνίας ή σύμβολα νομισμάτων), ένα Proxy Μετατροπής Τύπου μπορεί να διασφαλίσει τη συνέπεια των δεδομένων σε ολόκληρη την εφαρμογή σας, ανεξάρτητα από την πηγή. Για παράδειγμα, ο χειρισμός διαφορετικών μορφών ημερομηνίας και η μετατροπή τους σε μορφή ISO 8601.

            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
              
            
          

Βέλτιστες Πρακτικές για τη Χρήση Proxies

• Χρησιμοποιήστε Proxies με σύνεση: Τα Proxies μπορούν να προσθέσουν πολυπλοκότητα στον κώδικά σας. Χρησιμοποιήστε τα μόνο όταν παρέχουν σημαντικά οφέλη, όπως βελτιωμένη επικύρωση, καταγραφή ή έλεγχο της συμπεριφοράς αντικειμένων.
• Λάβετε υπόψη την Απόδοση: Οι παγίδες Proxy μπορούν να εισάγουν επιβάρυνση. Δημιουργήστε προφίλ στον κώδικά σας για να βεβαιωθείτε ότι τα Proxies δεν επηρεάζουν αρνητικά την απόδοση, ειδικά σε τμήματα κρίσιμης σημασίας για την απόδοση.
• Χειριστείτε Σφάλματα με Χάρη: Βεβαιωθείτε ότι οι μέθοδοι παγίδας σας χειρίζονται τα σφάλματα κατάλληλα, παρέχοντας ενημερωτικά μηνύματα σφάλματος όταν είναι απαραίτητο.
• Χρησιμοποιήστε το Reflect API: Το Reflect API παρέχει μεθόδους που αντικατοπτρίζουν την προεπιλεγμένη συμπεριφορά των λειτουργιών αντικειμένων. Χρησιμοποιήστε τις μεθόδους Reflect μέσα στις μεθόδους παγίδας σας για να αναθέσετε στην αρχική συμπεριφορά όταν είναι κατάλληλο. Αυτό διασφαλίζει ότι οι παγίδες σας δεν θα καταστρέψουν τις υπάρχουσες λειτουργίες.
• Τεκμηριώστε τα Proxies σας: Τεκμηριώστε με σαφήνεια τον σκοπό και τη συμπεριφορά των Proxies σας, συμπεριλαμβανομένων των παγίδων που χρησιμοποιούνται και των περιορισμών που επιβάλλονται. Αυτό θα βοηθήσει άλλους προγραμματιστές να κατανοήσουν και να συντηρήσουν τον κώδικά σας.

Συμπέρασμα

Τα JavaScript Proxies είναι ένα ισχυρό εργαλείο για προηγμένο χειρισμό και παρακολούθηση αντικειμένων. Κατανοώντας και εφαρμόζοντας διάφορα μοτίβα Proxy, μπορείτε να βελτιώσετε την ποιότητα του κώδικα, την ασφάλεια και τη συντηρησιμότητα. Από την επικύρωση της εισαγωγής χρήστη έως τον έλεγχο της πρόσβασης σε ευαίσθητους πόρους, τα Proxies προσφέρουν έναν ευέλικτο και επεκτάσιμο μηχανισμό για την προσαρμογή της συμπεριφοράς των αντικειμένων. Καθώς εξερευνάτε τις δυνατότητες των Proxies, θυμηθείτε να τα χρησιμοποιείτε με σύνεση και να τεκμηριώνετε διεξοδικά τον κώδικά σας.

Τα παραδείγματα που παρέχονται δείχνουν πώς να χρησιμοποιείτε τα JavaScript Proxies για την επίλυση πραγματικών προβλημάτων σε ένα παγκόσμιο πλαίσιο. Κατανοώντας και εφαρμόζοντας αυτά τα μοτίβα, μπορείτε να δημιουργήσετε πιο ισχυρές, ασφαλείς και συντηρήσιμες εφαρμογές που ικανοποιούν τις ανάγκες μιας ποικίλης βάσης χρηστών. Να θυμάστε να λαμβάνετε πάντα υπόψη τις παγκόσμιες επιπτώσεις του κώδικά σας και να προσαρμόζετε τις λύσεις σας στις συγκεκριμένες απαιτήσεις διαφορετικών περιοχών και πολιτισμών.