Pelajari corak reka bentuk JavaScript (mod ejen)_kemahiran javascript

Corak proksi adalah untuk menyediakan pengganti atau pemegang tempat untuk objek untuk mengawal akses kepadanya
Penggunaan corak proksi (pemahaman peribadi): Untuk memastikan tanggungjawab tunggal (kebebasan relatif) objek semasa, objek lain perlu dicipta untuk mengendalikan beberapa logik sebelum memanggil objek semasa untuk meningkatkan kecekapan kod, pertimbangan status, dll.
Mod proksi yang paling biasa digunakan ialah proksi maya dan proksi caching

1. Ejen Maya
Ejen maya menangguhkan penciptaan dan pelaksanaan beberapa objek mahal sehingga ia benar-benar diperlukan
Contoh: Ejen maya melaksanakan pramuat imej

// 图片加载函数
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 );
  };
  return {
    setSrc: function(src){
      // 图片未被载入时，加载一张提示图片
      myImage.setSrc("file://c:/loading.png");
      img.src = src;
    }
  }
})();

// 调用代理对象加载图片
proxyImage.setSrc( "http://images/qq.jpg");

Contoh: Proksi maya menggabungkan permintaan HTTP
Katakan fungsi memerlukan permintaan rangkaian yang kerap, yang akan menyebabkan overhed yang besar Penyelesaiannya adalah dengan menggunakan fungsi proksi untuk mengumpul permintaan dalam tempoh masa dan menghantarnya ke pelayan sekaligus.
Contohnya: fungsi penyegerakan fail, apabila kita memilih fail, ia akan disegerakkan ke pelayan sandaran yang lain

// 文件同步函数
var synchronousFile = function( id ){
  console.log( "开始同步文件，id为：" + id );
}
// 使用代理合并请求
var proxySynchronousFile = (function(){
  var cache = [], // 保存一段时间内需要同步的ID
    timer; // 定时器指针

  return function( id ){
    cache[cache.length] = id;
    if( timer ){
      return;
    }

    timer = setTimeout( function(){
      proxySynchronousFile( cache.join( "," ) ); // 2s 后向本体发送需要同步的ID集合
      clearTimeout( timer ); // 清空定时器
      timer = null;
      cache = []; // 晴空定时器
    },2000 );
  }
})();

// 绑定点击事件
var checkbox = document.getElementsByTagName( "input" );

for(var i= 0, c; c = checkbox[i++]; ){
  c.onclick = function(){
    if( this.checked === true ){
      // 使用代理进行文件同步
      proxySynchronousFile( this.id );
    }
  }
}

2. Cache proksi
Proksi caching boleh menyediakan storan sementara untuk beberapa hasil operasi yang mahal Dalam operasi seterusnya, jika parameter yang diluluskan adalah konsisten dengan operasi sebelumnya, hasil operasi sebelumnya boleh dikembalikan.
Contoh: Buat proksi caching untuk pendaraban, penambahan, dsb.

// 计算乘积
var mult = function(){
  var a = 1;
  for( var i = 0, l = arguments.length; i < l; i++){
    a = a * arguments[i];
  }
  return a;
};
// 计算加和
var plus = function () {
 var a = 0;
  for( var i = 0, l = arguments.length; i < l; i++ ){
    a += arguments[i];
  }
  return a;
};
// 创建缓存代理的工厂
var createProxyFactory = function( fn ){
  var cache = {}; // 缓存 - 存放参数和计算后的值
  return function(){
    var args = Array.prototype.join.call(arguments, "-");
    if( args in cache ){ // 判断出入的参数是否被计算过
      console.log( "使用缓存代理" );
      return cache[args];
    }
    return cache[args] = fn.apply( this, arguments );
  }
};
// 创建代理
var proxyMult = createProxyFactory( mult ),
  proxyPlus = createProxyFactory( plus );

console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出： 24
console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出： 缓存代理 24
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出： 10
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出： 缓存代理 10

Tiga contoh di atas memperkenalkan mod proksi JavaScript secara terperinci, dan saya harap ia akan membantu pembelajaran anda.