代理模式（Proxy Pattern）：前端設計模式中的代理模式是一種結構型模式，它允許在不改變原始物件的情況下，通過引入一個代理物件來控制對原始物件的訪問，代理物件充當原始物件的中介，客戶端與代理物件互動，代理物件再將請求轉發給原始物件，
代理模式在前端開發中經常被用來處理一些復雜或者耗時的操作，例如圖片的懶加載、快取等，代理物件可以在加載圖片時顯示占位符，當圖片加載完成后再替換占位符，從而提高頁面加載速度和用戶體驗，
另外，代理模式還可以用來實作一些權限控制的功能，例如，在用戶登錄后，代理物件可以檢查用戶的權限，只有具有相應權限的用戶才能夠訪問某些功能或者頁面，
在 JavaScript 中，代理模式通常使用 ES6 中新增的 Proxy 物件來實作，Proxy 物件允許攔截對物件的各種操作，包括讀取、賦值、函式呼叫等，通過使用 Proxy 物件，我們可以在不改變原始物件的情況下，控制對原始物件的訪問，
當我們需要為某個類或者物件添加一些額外的行為或者控制訪問時，可以使用代理模式，下面是一個簡單的示例，使用代理模式實作圖片懶加載的功能，
// 原始物件 - 圖片 class Image { constructor(url) { this.url = url; } // 加載圖片 load() { console.log(`Image loaded: ${this.url}`); } } // 代理物件 - 圖片 class ProxyImage { constructor(url) { this.url = url; this.image = null; // 延遲加載 } // 加載圖片 load() { if (!this.image) { this.image = new Image(this.url); // 延遲加載圖片 console.log(`Placeholder loaded for ${this.url}`); } this.image.load(); // 顯示圖片 } } // 客戶端代碼 const img1 = new ProxyImage('https://example.com/image1.jpg'); const img2 = new ProxyImage('https://example.com/image2.jpg'); img1.load(); // Placeholder loaded for https://example.com/image1.jpg, Image loaded: https://example.com/image1.jpg img1.load(); // Image loaded: https://example.com/image1.jpg img2.load(); // Placeholder loaded for https://example.com/image2.jpg, Image loaded: https://example.com/image2.jpg
在上面的示例中，原始物件是 `Image` 類，代理物件是 `ProxyImage` 類，當客戶端代碼呼叫 `load()` 方法時，代理物件會首先加載占位符，并延遲加載圖片，如果圖片已經被加載過了，代理物件會直接顯示圖片，否則代理物件會加載圖片并顯示，通過使用代理模式，我們可以在不影響原始物件的情況下，實作了圖片的懶加載功能，提高了頁面加載速度和用戶體驗，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546861.html
標籤：JavaScript