學習JavaScript設計模式之代理模式_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

學習JavaScript設計模式之代理模式_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

javascript 代理模式設計模式

明星都有經紀人作為代理。如果請明星辦一場商演，只能聯絡其經紀人，經紀人會把商演的細節和報酬談好，再把合約交給明星簽。

一、定義

代理模式：提供一個物件一個代用品或占位符，以便控制對它的存取。
代理程式分為：保護代理與虛擬代理
保護代理：用於控制不同權限的對象對目標對象的訪問，在JavaScript中很難判斷誰訪問了某個對象，所以保護代理很難實現。

二、圖片預載（最常見的虛擬代理應用場景）

圖片預先載入是一種常用技術，如果直接給某個img標籤節點設定src屬性，由於圖片過大或網路不佳，圖片的位置往往有段時間會有空白。常見的做法事先用一張loading圖片佔位，然後非同步載入圖片，待圖片載入完成，把其填入img節點裡。
實作原理：
建立一個Image物件：var a = new Image();
定義Image物件的src: a.src = “xxx.gif”;
這樣做就等於是給瀏覽器快取了一張圖片。

可透過Image物件的complete屬性來偵測映像是否已載入完成。每個Image物件都有一個complete屬性，當圖像處於裝載過程中時，該屬性值false,當發生了onload、onerror、onabort中任何一個事件後，則表示圖像裝載過程結束，此時complete屬性為true 。

（1）非代理實作

var myImage = (function() {
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  var img = new Image();

  img.onload = function() {
    imgNode.src = img.src;
  };

  return {
    setSrc: function(src) {
      imgNode.src = "./images/loading.gif";
      img.src = src;
    }
  }
})();

myImage.setSrc("./images/originImg.png");

登入後複製

（2）代理實作

// 创建图片DOM
var myImage = (function() {
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);

  return {
    setSrc: function(src) {
      imgNode.src = src;
    }
  };
})();

// 代理
var proxyImage = (function() {
  var img = new Image();

  img.onload = function() {
    myImage.setSrc(this.src);  // this指向img！img加载完成后，将img.src传递给myImage
  };

  return {
    setSrc: function(src) {
      myImage.setSrc("./images/loading.gif");   // loading
      img.src = src;
    }
  };
})();

proxyImage.setSrc("./images/originImg.png");

登入後複製

使用代理模式的好處：使每個函數功能單一，實現物件設計的「單一職責原則」！

三、檔案同步

假設我們在做一個檔案同步功能，當勾選checkbox時候，它對應的檔案就會被同步到另外一台伺服器。

<body>
    <input type="checkbox" id="1" />文件1
    <input type="checkbox" id="2" />文件2
    <input type="checkbox" id="3" />文件3
    <input type="checkbox" id="4" />文件4
    <input type="checkbox" id="5" />文件5
    <input type="checkbox" id="6" />文件6
  </body>

登入後複製

沒選中一個checkbox就同步一次，顯然不太合理。因為在web開發中，最大的開銷就是網路請求。
解決方案：透過一個代理函數來收集一段時間之內的請求，然後一次發給伺服器。

var synchronousFile = function(id) {
  console.log("开始同步文件，id为：" + id);
};

var proxySynchonousFile = (function() {
  var cache = [],   // 保存本次需要同步文件的id
    timer;     // 定时器

  return function(id) {
    cache.push(id);
    if(timer) { 
      // 不要覆盖已经启动的定时
      return;
    }

    timer = setTimeout(function(){
      synchronousFile(cache.join(","));
      clearTimeout(timer);
      timer = null;
      cache.length = 0;  // 清空缓存
    }, 2000);
  }
})();

var checkboxs = document.getElementsByTagName("input");

for(var i = 0, c; c = checkboxs[i]; i++) {
  c.onclick = function() {
    if(this.checked === true) {
      proxySynchonousFile(this.id);
    }
  }
}

登入後複製

四、快取代理–計算乘積（序列一模一樣）

var mult = function() {
  var result = 1;
  for(var i = 0, l = arguments.length; i < l; i++) {
    result= result * arguments[i];
  }
  return result;
};

var proxyMult = (function() {
  var cache = {};   // {"1,2,3": 6}
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = mult.apply(this, arguments);
  }
})();

console.log(proxyMult(1, 2, 3));

// 改造：

var proxyFactory = function(fn) {
  var cache = {};
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = fn.apply(this, arguments);
  }  
};

console.log(proxyFactory(mult)(1, 2, 3));

登入後複製

希望本文所述對大家學習javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7456

CakePHP 教程

1376

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

Java框架中設計模式與架構模式的區別 Jun 02, 2024 pm 12:59 PM

在Java框架中，設計模式和架構模式的區別在於：設計模式定義了在軟體設計中解決常見問題的抽象解決方案，專注於類別和物件之間的交互，例如工廠模式。架構模式定義了系統結構和模組之間的關係，關注系統元件的組織和交互，如分層架構。

Java設計模式之裝飾器模式剖析 May 09, 2024 pm 03:12 PM

裝飾器模式是一種結構型設計模式，允許動態添加物件功能，無需修改原始類別。它透過抽象組件、具體組件、抽象裝飾器和具體裝飾器的協作實現，可以靈活擴展類別功能，滿足變化的需求。範例中，將牛奶和摩卡裝飾器添加到Espresso，總價為2.29美元，展示了裝飾器模式在動態修改物件行為方面的強大功能。

Java設計模式之適配器模式的妙用 May 09, 2024 pm 12:54 PM

適配器模式是一種結構型設計模式，允許不相容物件協同工作，它將一個介面轉換為另一個，使物件能夠順利互動。物件適配器透過建立包含被適配器對象的適配器對象，並實現目標接口，實現適配器模式。在一個實戰案例中，透過適配器模式，客戶端（如MediaPlayer）可以播放高級格式的媒體（如VLC），儘管本身僅支援普通媒體格式（如MP3）。

java框架中代理模式的優缺點有哪些？ Jun 03, 2024 am 09:34 AM

代理模式是一種Java框架設計模式，透過建立代理物件在客戶端和目標物件之間進行中介。它的優點包括：保護目標對象，提供資料完整性和安全性；控制對目標的訪問，實現權限控制和安全措施；增強目標行為，添加額外功能如日誌記錄、快取和事務管理；簡化測試，便於mocking和stubbing目標。然而，代理模式也存在劣勢：開銷：建立和維護代理物件可能降低效能；複雜性：需要深入理解設計模式；限制對目標的訪問，可能在某些情況下不合適。