Các Mẫu JavaScript Proxy: Đánh Chặn và Xác Thực Đối Tượng Nâng Cao

Đối tượng JavaScript Proxy là một tính năng mạnh mẽ cho phép bạn đánh chặn và tùy chỉnh các thao tác đối tượng cơ bản. Nó cho phép các kỹ thuật lập trình siêu dữ liệu nâng cao, mang lại khả năng kiểm soát tốt hơn đối với hành vi đối tượng và mở ra các khả năng cho các mẫu thiết kế tinh vi. Bài viết này khám phá các mẫu Proxy khác nhau, trình bày các trường hợp sử dụng của chúng trong xác thực, đánh chặn và sửa đổi hành vi động. Chúng ta sẽ đi sâu vào các ví dụ thực tế để chứng minh cách Proxies có thể nâng cao chất lượng mã, bảo mật và khả năng bảo trì trong các dự án JavaScript của bạn.

Tìm Hiểu về JavaScript Proxy

Về cơ bản, một đối tượng Proxy bọc một đối tượng khác (mục tiêu) và đánh chặn các thao tác được thực hiện trên mục tiêu đó. Các hành động đánh chặn này được xử lý bởi bẫy (traps), là các phương thức định nghĩa hành vi tùy chỉnh cho các thao tác cụ thể như lấy một thuộc tính, đặt một thuộc tính hoặc gọi một hàm. API Proxy cung cấp một cơ chế linh hoạt và mở rộng để sửa đổi hành vi mặc định của các đối tượng.

Các Khái Niệm Chính

• Mục tiêu (Target): Đối tượng gốc mà Proxy bọc lại.
• Bộ xử lý (Handler): Một đối tượng chứa các phương thức bẫy (trap methods). Mỗi bẫy tương ứng với một thao tác cụ thể.
• Bẫy (Traps): Các phương thức trong bộ xử lý dùng để đánh chặn và tùy chỉnh các thao tác đối tượng. Các bẫy phổ biến bao gồm get, set, apply, và construct.

Tạo một Proxy

Để tạo một Proxy, bạn sử dụng hàm tạo Proxy, truyền đối tượng mục tiêu và đối tượng xử lý làm đối số:

            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
              
            
          

Các Bẫy Proxy Phổ Biến

Proxies cung cấp một loạt các bẫy để đánh chặn các thao tác khác nhau. Dưới đây là một số bẫy được sử dụng phổ biến nhất:

• get(target, property, receiver): Đánh chặn truy cập thuộc tính.
• set(target, property, value, receiver): Đánh chặn gán thuộc tính.
• has(target, property): Đánh chặn toán tử in.
• deleteProperty(target, property): Đánh chặn toán tử delete.
• apply(target, thisArg, argumentsList): Đánh chặn các cuộc gọi hàm.
• construct(target, argumentsList, newTarget): Đánh chặn toán tử new.
• getPrototypeOf(target): Đánh chặn phương thức Object.getPrototypeOf().
• setPrototypeOf(target, prototype): Đánh chặn phương thức Object.setPrototypeOf().
• isExtensible(target): Đánh chặn phương thức Object.isExtensible().
• preventExtensions(target): Đánh chặn phương thức Object.preventExtensions().
• getOwnPropertyDescriptor(target, property): Đánh chặn phương thức Object.getOwnPropertyDescriptor().
• defineProperty(target, property, descriptor): Đánh chặn phương thức Object.defineProperty().
• ownKeys(target): Đánh chặn các phương thức Object.getOwnPropertyNames() và Object.getOwnPropertySymbols().

Các Mẫu Proxy

Bây giờ, hãy cùng khám phá một số mẫu Proxy thực tế và ứng dụng của chúng:

1. Proxy Xác Thực

Proxy Xác thực thực thi các ràng buộc đối với việc gán thuộc tính. Nó đánh chặn bẫy set để xác thực giá trị mới trước khi cho phép gán tiếp tục.

Ví dụ: Xác thực đầu vào của người dùng trong một biểu mẫu.

            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
              
            
          

Trong ví dụ này, bẫy set kiểm tra xem thuộc tính age có phải là một số nguyên nằm trong khoảng từ 0 đến 120 hay không. Nếu xác thực thất bại, một lỗi sẽ được ném ra, ngăn chặn giá trị không hợp lệ được gán.

Ví dụ Toàn Cầu: Mẫu xác thực này rất cần thiết để đảm bảo tính toàn vẹn dữ liệu trong các ứng dụng toàn cầu, nơi đầu vào của người dùng có thể đến từ các nguồn và nền văn hóa đa dạng. Ví dụ, việc xác thực mã bưu chính có thể khác nhau đáng kể giữa các quốc gia. Một proxy xác thực có thể được điều chỉnh để hỗ trợ các quy tắc xác thực khác nhau dựa trên vị trí của người dùng.

            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 Ghi Log

Proxy Ghi Log đánh chặn việc truy cập và gán thuộc tính để ghi lại các thao tác này. Nó hữu ích cho việc gỡ lỗi và kiểm tra.

Ví dụ: Ghi log truy cập và sửa đổi thuộc tính.

            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
              
            
          

Các bẫy get và set ghi lại thuộc tính đang được truy cập hoặc sửa đổi, cung cấp dấu vết của các tương tác đối tượng.

Ví dụ Toàn Cầu: Trong một tập đoàn đa quốc gia, các proxy ghi log có thể được sử dụng để kiểm tra việc truy cập và sửa đổi dữ liệu do nhân viên ở các địa điểm khác nhau thực hiện. Điều này rất quan trọng cho mục đích tuân thủ và bảo mật. Múi giờ có thể cần được xem xét trong thông tin ghi log.

            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 Chỉ Đọc

Proxy Chỉ Đọc ngăn chặn việc gán thuộc tính. Nó đánh chặn bẫy set và ném ra một lỗi nếu có bất kỳ nỗ lực nào nhằm sửa đổi một thuộc tính.

Ví dụ: Biến một đối tượng thành bất biến.

            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
              
            
          

Mọi nỗ lực đặt một thuộc tính trên proxy sẽ dẫn đến lỗi, đảm bảo đối tượng vẫn bất biến.

Ví dụ Toàn Cầu: Mẫu này hữu ích để bảo vệ các tệp cấu hình không nên được sửa đổi trong thời gian chạy, đặc biệt trong các ứng dụng phân tán toàn cầu. Việc vô tình sửa đổi cấu hình ở một khu vực có thể ảnh hưởng đến toàn bộ hệ thống.

            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 Ảo

Proxy Ảo kiểm soát quyền truy cập vào một tài nguyên có thể tốn kém để tạo hoặc truy xuất. Nó có thể trì hoãn việc tạo tài nguyên cho đến khi thực sự cần thiết.

Ví dụ: Tải hình ảnh lười biếng (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
              
            
          

Đối tượng hình ảnh thực sự chỉ được tạo khi phương thức display được gọi, tránh tiêu thụ tài nguyên không cần thiết.

Ví dụ Toàn Cầu: Hãy xem xét một trang web thương mại điện tử toàn cầu phục vụ hình ảnh sản phẩm. Bằng cách sử dụng Proxy Ảo, hình ảnh chỉ có thể được tải khi chúng hiển thị với người dùng, tối ưu hóa việc sử dụng băng thông và cải thiện thời gian tải trang, đặc biệt đối với người dùng có kết nối internet chậm ở các khu vực khác nhau.

            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 Có Thể Hủy Bỏ

Proxy Có Thể Hủy Bỏ cho phép bạn hủy bỏ proxy bất cứ lúc nào, khiến nó không thể sử dụng được. Điều này hữu ích cho các kịch bản nhạy cảm về bảo mật, nơi bạn cần kiểm soát quyền truy cập vào một đối tượng.

Ví dụ: Cấp quyền truy cập tạm thời vào một tài nguyên.

            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);
}

            

              
                Copy
              
            
          

Phương thức Proxy.revocable() tạo ra một proxy có thể hủy bỏ. Việc gọi hàm revoke() khiến proxy không thể sử dụng được, ngăn chặn việc truy cập thêm vào đối tượng mục tiêu.

Ví dụ Toàn Cầu: Trong một hệ thống phân tán toàn cầu, bạn có thể sử dụng một proxy có thể hủy bỏ để cấp quyền truy cập tạm thời vào dữ liệu nhạy cảm cho một dịch vụ đang chạy trong một khu vực cụ thể. Sau một khoảng thời gian nhất định, proxy có thể bị hủy bỏ để ngăn chặn truy cập trái phép.

            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 Chuyển Đổi Kiểu

Proxy Chuyển Đổi Kiểu đánh chặn truy cập thuộc tính để tự động chuyển đổi giá trị trả về thành một kiểu cụ thể. Điều này có thể hữu ích khi làm việc với dữ liệu từ các nguồn khác nhau có thể có kiểu không nhất quán.

Ví dụ: Chuyển đổi giá trị chuỗi thành số.

            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
              
            
          

Bẫy get kiểm tra xem giá trị thuộc tính có phải là một chuỗi có thể chuyển đổi thành số hay không. Nếu có, nó sẽ chuyển đổi giá trị thành số trước khi trả về.

Ví dụ Toàn Cầu: Khi xử lý dữ liệu đến từ các API có các quy ước định dạng khác nhau (ví dụ: các định dạng ngày hoặc ký hiệu tiền tệ khác nhau), Proxy Chuyển Đổi Kiểu có thể đảm bảo tính nhất quán của dữ liệu trên toàn bộ ứng dụng của bạn, bất kể nguồn gốc. Ví dụ, xử lý các định dạng ngày khác nhau và chuyển đổi tất cả chúng sang định dạng 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
              
            
          

Các Thực Hành Tốt Nhất Khi Sử Dụng Proxies

• Sử Dụng Proxy một cách Thận Trọng: Proxies có thể làm tăng độ phức tạp cho mã của bạn. Chỉ sử dụng chúng khi chúng mang lại lợi ích đáng kể, chẳng hạn như cải thiện xác thực, ghi log hoặc kiểm soát hành vi đối tượng.
• Cân Nhắc Hiệu Suất: Các bẫy Proxy có thể gây ra chi phí phụ. Hãy biên dịch hồ sơ (profile) mã của bạn để đảm bảo rằng Proxies không ảnh hưởng tiêu cực đến hiệu suất, đặc biệt là trong các phần quan trọng về hiệu suất.
• Xử Lý Lỗi một cách Khéo Léo: Đảm bảo rằng các phương thức bẫy của bạn xử lý lỗi một cách thích hợp, cung cấp các thông báo lỗi có ý nghĩa khi cần thiết.
• Sử Dụng Reflect API: API Reflect cung cấp các phương thức phản ánh hành vi mặc định của các thao tác đối tượng. Sử dụng các phương thức Reflect trong các phương thức bẫy của bạn để ủy quyền cho hành vi gốc khi thích hợp. Điều này đảm bảo rằng các bẫy của bạn không làm hỏng chức năng hiện có.
• Tài Liệu Hóa Proxies của Bạn: Ghi rõ mục đích và hành vi của các Proxies của bạn, bao gồm các bẫy được sử dụng và các ràng buộc được thực thi. Điều này sẽ giúp các nhà phát triển khác hiểu và duy trì mã của bạn.

Kết Luận

JavaScript Proxies là một công cụ mạnh mẽ để thao tác và đánh chặn đối tượng nâng cao. Bằng cách hiểu và áp dụng các mẫu Proxy khác nhau, bạn có thể nâng cao chất lượng mã, bảo mật và khả năng bảo trì. Từ việc xác thực đầu vào của người dùng đến kiểm soát quyền truy cập vào các tài nguyên nhạy cảm, Proxies cung cấp một cơ chế linh hoạt và mở rộng để tùy chỉnh hành vi đối tượng. Khi bạn khám phá các khả năng của Proxies, hãy nhớ sử dụng chúng một cách thận trọng và tài liệu hóa mã của bạn kỹ lưỡng.

Các ví dụ được cung cấp minh họa cách sử dụng JavaScript Proxies để giải quyết các vấn đề thực tế trong bối cảnh toàn cầu. Bằng cách hiểu và áp dụng các mẫu này, bạn có thể tạo ra các ứng dụng mạnh mẽ, an toàn và dễ bảo trì hơn, đáp ứng nhu cầu của cơ sở người dùng đa dạng. Hãy luôn nhớ xem xét các tác động toàn cầu của mã của bạn và điều chỉnh các giải pháp của bạn theo các yêu cầu cụ thể của các khu vực và nền văn hóa khác nhau.