Pelajari corak reka bentuk JavaScript - kemahiran proksi pattern

Pelajari corak reka bentuk JavaScript - kemahiran proksi pattern_javascript

WBOY

Lepaskan： 2016-05-16 15:20:24

asal

1091 orang telah melayarinya

Selebriti diwakili oleh pengurus. Jika anda meminta seorang selebriti mengadakan persembahan komersial, anda hanya boleh menghubungi ejennya Ejen itu akan merundingkan butiran dan imbuhan persembahan komersial, dan kemudian memberikan kontrak kepada selebriti untuk menandatangani.

1. Definisi

Corak proksi: Sediakan pengganti atau pemegang tempat untuk objek untuk mengawal akses kepadanya.
Ejen dibahagikan kepada: Ejen perlindungan dan ejen maya
Ejen perlindungan: digunakan untuk mengawal akses objek dengan kebenaran berbeza kepada objek sasaran Sukar untuk menilai siapa yang telah mengakses objek dalam JavaScript, jadi ejen perlindungan adalah sukar untuk melaksanakan.

2. Pramuat imej (senario aplikasi ejen maya yang paling biasa)

Pramuat imej ialah teknologi biasa Jika anda menetapkan atribut src secara langsung untuk nod teg img, kedudukan imej selalunya akan kosong untuk satu tempoh masa kerana imej terlalu besar atau rangkaian kurang. Pendekatan biasa ialah menggunakan imej memuatkan sebagai pemegang tempat terlebih dahulu, dan kemudian memuatkan imej secara tidak segerak Selepas imej dimuatkan, isikannya ke dalam nod img.
Prinsip pelaksanaan:
Cipta objek Imej: var a = new Image(); Tentukan src objek Imej: a.src = “xxx.gif”; Melakukannya adalah sama dengan menyimpan imej untuk penyemak imbas.

Anda boleh menyemak sama ada imej dimuatkan melalui atribut lengkap objek Imej. Setiap objek Imej mempunyai atribut lengkap Apabila imej dalam proses pemuatan, nilai atribut adalah palsu Apabila mana-mana peristiwa onload, onerror dan onabort berlaku, ini bermakna proses pemuatan imej telah tamat. atribut lengkap adalah benar.

(1) Pelaksanaan bukan proksi

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

Salin selepas log masuk

(2) Pelaksanaan proksi

// 创建图片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");

Salin selepas log masuk

Faedah menggunakan mod proksi: menjadikan setiap fungsi satu fungsi dan merealisasikan "prinsip tanggungjawab tunggal" reka bentuk objek!

3. Penyegerakan fail

Andaikan kita sedang melakukan fungsi penyegerakan fail Apabila kotak semak dipilih, fail yang sepadan akan disegerakkan ke pelayan lain.

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

Salin selepas log masuk

Jelas sekali tidak munasabah untuk menyegerakkan sekali tanpa memilih kotak pilihan. Kerana dalam pembangunan web, overhed terbesar adalah permintaan rangkaian.

Penyelesaian: Gunakan fungsi proksi untuk mengumpul permintaan dalam tempoh masa, dan kemudian menghantarnya ke pelayan sekaligus.

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

Salin selepas log masuk

4. Caching proksi – mengira produk (jujukan adalah betul-betul sama)

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

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.